/*!
 * Premium My Account UI for WooCommerce — frontend (v2.0.0).
 *
 * Naimur-inspired reset. Everything is scoped under body.pmai-account-page
 * and targets stable WooCommerce classes directly. We do not force a
 * sidebar, do not use :has(), do not introduce shell classes, do not target
 * .woocommerce-account .woocommerce or bare .woocommerce. We do not touch
 * WooCommerce templates or behaviour.
 */

/* ===========================================================
   Design tokens
   =========================================================== */

body.pmai-account-page {
	--pmai-primary: rgba(255, 255, 255, 0.18);
	--pmai-secondary: rgba(255, 255, 255, 0.28);
	--pmai-text: #1d1d1f;
	--pmai-muted: #6e6e73;
	--pmai-surface: #ffffff;
	--pmai-border: rgba(0, 0, 0, 0.08);
	--pmai-active-tint: rgba(255, 255, 255, 0.08);
	--pmai-hover-tint: rgba(255, 255, 255, 0.05);
	--pmai-radius: 16px;
	--pmai-radius-sm: 10px;
	--pmai-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	--pmai-speed: 180ms;

	/* Glass-skin tokens (v2.0.27) — used by the Future-proof base skin
	   layer below and by the generic shop_table / notice rules. Existing
	   --pmai-text / --pmai-muted / --pmai-surface / --pmai-border tokens
	   are intentionally NOT changed. */
	--pmai-glass-text: #ffffff;
	--pmai-glass-muted: rgba(255, 255, 255, 0.72);
	--pmai-glass-soft: rgba(255, 255, 255, 0.08);
	--pmai-glass-soft-hover: rgba(255, 255, 255, 0.12);
	--pmai-glass-border: rgba(255, 255, 255, 0.22);
}

/* ===========================================================
   Nav — centering wrappers
   =========================================================== */

/* Nav is a centered narrow card (Naimur-style) — 360px on desktop,
   100% on mobile. */
body.pmai-account-page .account-navigation-wrap {
	max-width: 360px;
	margin: 0 auto 24px;
	float: none;
	width: auto;
	background: transparent;
	padding: 0;
	border: 0;
	box-shadow: none;
}

/* Fallback centering for themes that don't wrap nav. When the wrap IS
   present, the next rule neutralises this to prevent double-centering. */
body.pmai-account-page .woocommerce-MyAccount-navigation {
	max-width: 360px;
	margin: 0 auto 24px;
}
body.pmai-account-page .account-navigation-wrap .woocommerce-MyAccount-navigation {
	max-width: none;
	margin: 0;
}

/* ===========================================================
   Desktop sidebar layout (Kadence-only, very strictly scoped)
   ===========================================================
   Only matches the exact Kadence wrapper that holds the account
   nav + content. On non-Kadence themes .kt-inside-inner-col is
   absent and this selector matches nothing — the stacked layout
   from the rules above remains in effect. The mobile media
   query below restores stacked layout under 900px.
*/
body.pmai-account-page.pmai-logged-in-account .entry-content .kt-inside-inner-col > .woocommerce {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 28px;
	max-width: 1240px;
	margin: 0 auto;
	align-items: start;
}

/* When the grid layout is active, explicitly place each child in its
   column. v2.0.3 relied on grid auto-placement, but Kadence's
   kadence-account-nav-above puts an `order` value on .account-navigation-wrap
   which (in a grid context) shifted the nav into column 2 and pulled the
   content back into column 1. order: initial resets that. */
body.pmai-account-page.pmai-logged-in-account .entry-content .kt-inside-inner-col > .woocommerce > .account-navigation-wrap {
	grid-column: 1;
	grid-row: 1;
	order: initial;
	width: 340px;
	max-width: 340px;
	min-width: 0;
	margin: 0;
}
body.pmai-account-page.pmai-logged-in-account .entry-content .kt-inside-inner-col > .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1;
	order: initial;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
}
/* Constrain the nav itself to the sidebar column width even if any other
   rule tries to stretch it. */
body.pmai-account-page.pmai-logged-in-account .entry-content .kt-inside-inner-col > .woocommerce > .account-navigation-wrap > .woocommerce-MyAccount-navigation {
	width: 100%;
	max-width: 340px;
	margin: 0;
}

/* ===========================================================
   Nav — card + pill row
   =========================================================== */

body.pmai-account-page .woocommerce-MyAccount-navigation {
	background: rgba(27, 26, 24, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 24px !important;
	padding: 16px !important;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
	float: none;
	width: auto;
	position: relative;
	overflow: hidden;
}

/* Backdrop blur removed (v2.0.61). The backdrop-filter promoted each glass
   surface to its own compositing layer, and that layer flashed a horizontal
   seam on first paint (the "flickering horizontal line on load"). Reducing the
   blur or pre-promoting the layer (the reverted v2.0.56 attempt) did not help,
   because the flash comes from the backdrop-filter layer itself, not the blur
   amount. So the blur is dropped on every account glass surface; the rgba
   background + border on each already served as the documented fallback and is
   now the sole (flat) glass treatment. This note covers the content card,
   address cards, selects, the Select2 dropdown, and the logged-out form cards
   below as well. */

/* Subtle iridescent corner glows — purely decorative, pointer-events: none,
   no animation, no shapes that affect layout. */
body.pmai-account-page .woocommerce-MyAccount-navigation::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 65%);
	pointer-events: none;
	z-index: 0;
}
body.pmai-account-page .woocommerce-MyAccount-navigation::after {
	content: "";
	position: absolute;
	bottom: -50px;
	left: -50px;
	width: 160px;
	height: 160px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 65%);
	pointer-events: none;
	z-index: 0;
}

/* Lift the nav list above the decorative glow pseudo-elements. */
body.pmai-account-page .woocommerce-MyAccount-navigation ul {
	position: relative;
	z-index: 1;
}

body.pmai-account-page .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 6px;
}

body.pmai-account-page .woocommerce-MyAccount-navigation ul li {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 0 !important;
	width: 100% !important;
}

body.pmai-account-page .woocommerce-MyAccount-navigation ul li a {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	padding: 14px 18px !important;
	min-height: 52px;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 14px !important;
	background: rgba(54, 53, 50, 0.88) !important;
	color: #ffffff !important;
	text-decoration: none !important;
	box-shadow: none !important;
	font-weight: 500 !important;
	font-size: 14.5px !important;
	line-height: 1.3 !important;
	box-sizing: border-box !important;
	transition: background var(--pmai-speed) ease, box-shadow var(--pmai-speed) ease, transform var(--pmai-speed) ease, color var(--pmai-speed) ease, border-color var(--pmai-speed) ease;
}

body.pmai-account-page .woocommerce-MyAccount-navigation ul li a:hover {
	background: rgba(255, 255, 255, 0.20) !important;
	color: #ffffff !important;
	box-shadow: 0 0 24px rgba(255, 255, 255, 0.12);
	transform: translateY(-1px);
}

body.pmai-account-page .woocommerce-MyAccount-navigation ul li a:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
}

body.pmai-account-page .woocommerce-MyAccount-navigation ul li.is-active a,
body.pmai-account-page .woocommerce-MyAccount-navigation ul li.is-active a:hover {
	background: rgba(255, 255, 255, 0.40) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.42) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.42) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	transform: none;
}

/* Nav text-colour polish (v2.0.19) — defensive white across nav wrap,
   nav, list items, links, and visited links. Layout / backgrounds /
   active background are untouched. */
body.pmai-account-page .account-navigation-wrap,
body.pmai-account-page .woocommerce-MyAccount-navigation,
body.pmai-account-page .woocommerce-MyAccount-navigation li,
body.pmai-account-page .woocommerce-MyAccount-navigation a {
	color: #ffffff !important;
}
body.pmai-account-page .woocommerce-MyAccount-navigation a,
body.pmai-account-page .woocommerce-MyAccount-navigation a:visited {
	color: #ffffff !important;
}
body.pmai-account-page .woocommerce-MyAccount-navigation a:hover,
body.pmai-account-page .woocommerce-MyAccount-navigation .is-active a {
	color: #ffffff !important;
}

/* ===========================================================
   Content panel
   =========================================================== */

body.pmai-account-page .woocommerce-MyAccount-content {
	background: rgba(49, 48, 46, 0.88) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 20px !important;
	padding: clamp(20px, 3vw, 32px) !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
	float: none;
	width: auto;
	max-width: 1180px;
	margin: 0 auto;
	min-width: 0;
	color: var(--pmai-glass-text);
	position: relative;
	overflow: hidden;
}

/* Backdrop blur on the content card removed (v2.0.61) — see the nav note
   above. The rgba background + border remain as the flat glass treatment. */

/* ===========================================================
   Future-proof base skin (v2.0.27)
   ===========================================================
   Low-specificity safety net: makes generic typography descendants of
   the My Account content card inherit the white text colour. Uses
   :where() so specificity stays 0,0,0 — existing component-specific
   rules below (and any user/theme rule with higher specificity) win.
   No !important. div and span are intentionally NOT included so plugin
   badges / icons / counters / status pills are not forced white.
   =========================================================== */
body.pmai-account-page .woocommerce-MyAccount-content :where(
	p,
	label,
	legend,
	address,
	small,
	strong,
	em,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	th,
	td,
	li,
	dt,
	dd
) {
	color: inherit;
}

body.pmai-account-page .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

body.pmai-account-page .woocommerce-MyAccount-content p {
	line-height: 1.6;
}

body.pmai-account-page .woocommerce-MyAccount-content a:not(.button):not(.wp-element-button) {
	color: var(--pmai-glass-text);
	text-decoration-color: rgba(255, 255, 255, 0.55);
}
body.pmai-account-page .woocommerce-MyAccount-content a:not(.button):not(.wp-element-button):hover {
	color: rgba(255, 255, 255, 0.82);
}
body.pmai-account-page .woocommerce-MyAccount-content a:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ===========================================================
   Forms — scoped to .form-row inside the account so non-Woo
   inputs from other plugins remain untouched
   =========================================================== */

body.pmai-account-page .woocommerce-MyAccount-content .form-row label,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--pmai-muted);
	margin-bottom: 6px;
}

body.pmai-account-page .woocommerce-MyAccount-content input.input-text,
body.pmai-account-page .woocommerce-MyAccount-content input.woocommerce-Input,
body.pmai-account-page .woocommerce-MyAccount-content input[type="text"],
body.pmai-account-page .woocommerce-MyAccount-content input[type="email"],
body.pmai-account-page .woocommerce-MyAccount-content input[type="password"],
body.pmai-account-page .woocommerce-MyAccount-content input[type="tel"],
body.pmai-account-page .woocommerce-MyAccount-content input[type="url"],
body.pmai-account-page .woocommerce-MyAccount-content input[type="number"],
body.pmai-account-page .woocommerce-MyAccount-content textarea,
body.pmai-account-page .woocommerce-MyAccount-content select {
	width: 100% !important;
	padding: 10px 12px !important;
	font-size: 15px !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	transition: border-color var(--pmai-speed) ease, background var(--pmai-speed) ease, box-shadow var(--pmai-speed) ease;
}

body.pmai-account-page .woocommerce-MyAccount-content input.input-text:focus,
body.pmai-account-page .woocommerce-MyAccount-content input.woocommerce-Input:focus,
body.pmai-account-page .woocommerce-MyAccount-content input[type="text"]:focus,
body.pmai-account-page .woocommerce-MyAccount-content input[type="email"]:focus,
body.pmai-account-page .woocommerce-MyAccount-content input[type="password"]:focus,
body.pmai-account-page .woocommerce-MyAccount-content input[type="tel"]:focus,
body.pmai-account-page .woocommerce-MyAccount-content input[type="url"]:focus,
body.pmai-account-page .woocommerce-MyAccount-content input[type="number"]:focus,
body.pmai-account-page .woocommerce-MyAccount-content textarea:focus,
body.pmai-account-page .woocommerce-MyAccount-content select:focus {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.42) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
	outline: none;
}

/* Placeholder colour for account inputs / textareas. */
body.pmai-account-page .woocommerce-MyAccount-content input::placeholder,
body.pmai-account-page .woocommerce-MyAccount-content textarea::placeholder {
	color: rgba(255, 255, 255, 0.58);
}

/* All account-form labels and legends — white on the glass card. */
body.pmai-account-page .woocommerce-MyAccount-content label,
body.pmai-account-page .woocommerce-MyAccount-content legend {
	color: #ffffff !important;
}

/* Required asterisk + helper text inside Woo form rows. */
body.pmai-account-page .woocommerce-MyAccount-content .required {
	color: rgba(255, 255, 255, 0.86) !important;
}
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-form-row em,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-form-row span:not(.password-input) {
	color: rgba(255, 255, 255, 0.72);
}

/* Password wrapper — only the wrapper goes transparent so the inner input
   keeps its glass treatment from the input rule above. The visibility
   toggle (.show-password-input) is NOT styled here. */
body.pmai-account-page .woocommerce-MyAccount-content .password-input {
	background: transparent !important;
}

body.pmai-account-page .woocommerce-MyAccount-content fieldset {
	margin: 22px 0;
	padding: 18px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
}
body.pmai-account-page .woocommerce-MyAccount-content fieldset legend {
	padding: 0 8px;
	font-weight: 600;
	color: var(--pmai-text);
}

/* ===========================================================
   Buttons — primary action, compact in tables
   =========================================================== */

body.pmai-account-page .woocommerce-MyAccount-content .button,
body.pmai-account-page .woocommerce-MyAccount-content button[type="submit"],
body.pmai-account-page .woocommerce-MyAccount-content input[type="submit"],
body.pmai-account-page .woocommerce-form-login .button,
body.pmai-account-page .woocommerce-form-register .button,
body.pmai-account-page .woocommerce-ResetPassword .button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: auto !important;
	max-width: 100%;
	justify-self: start;
	align-self: start;
	padding: 10px 18px !important;
	border: 1px solid rgba(255, 255, 255, 0.26) !important;
	border-radius: var(--pmai-radius-sm) !important;
	background: rgba(255, 255, 255, 0.16) !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 14.5px !important;
	line-height: 1.2 !important;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background var(--pmai-speed) ease;
}

body.pmai-account-page .woocommerce-MyAccount-content .button:hover,
body.pmai-account-page .woocommerce-MyAccount-content button[type="submit"]:hover,
body.pmai-account-page .woocommerce-MyAccount-content input[type="submit"]:hover,
body.pmai-account-page .woocommerce-form-login .button:hover,
body.pmai-account-page .woocommerce-form-register .button:hover {
	background: rgba(255, 255, 255, 0.26) !important;
	color: #fff !important;
}

body.pmai-account-page .woocommerce-MyAccount-content .button:focus-visible,
body.pmai-account-page .woocommerce-MyAccount-content button[type="submit"]:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 3px;
}

/* Inline Add-to-Cart button inside the wishlist (WPC Smart Wishlist) tab.
   Scoped to `p.product.add_to_cart_inline` so it only affects wishlist
   inline buttons — product loops outside My Account, archive pages,
   checkout, and other .button elements are not touched. The base account
   button rule above doesn't set white-space or min-width, so when the
   button sits in a narrow wishlist card the label wraps to two lines and
   the button shrinks. The rules below enforce a readable minimum width
   and keep the label on one line. */
body.pmai-account-page .woocommerce-MyAccount-content p.product.add_to_cart_inline {
	margin: 0;
	display: flex;
	justify-content: center;
}
body.pmai-account-page .woocommerce-MyAccount-content p.product.add_to_cart_inline .button,
body.pmai-account-page .woocommerce-MyAccount-content p.product.add_to_cart_inline .add_to_cart_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 140px;
	max-width: 100%;
	min-height: 44px;
	padding: 11px 18px !important;
	white-space: nowrap;
	text-align: center;
	line-height: 1.2 !important;
	border-radius: 12px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	box-sizing: border-box;
}

/* Compact action buttons inside the orders/downloads tables. Scoped to
   table.shop_table only — never restyles .button elsewhere on the site. */
body.pmai-account-page .woocommerce-MyAccount-content table.shop_table .button,
body.pmai-account-page .woocommerce-MyAccount-content table.shop_table a.button,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
	padding: 7px 12px !important;
	font-size: 13px !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

/* Size + spacing for multiple order action buttons (View / Track / etc.)
   inside the orders-table actions cell. Overrides the compact-buttons rule
   above (which still applies to downloads-table buttons unchanged). Scoped
   strictly to the order-actions cell — unrelated site buttons, checkout
   buttons, product buttons, and wishlist buttons are not touched. */
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 10px 16px !important;
	margin: 4px 8px 4px 0 !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button + .button {
	margin-left: 4px !important;
}

/* Desktop (>=901px) order-actions spacing cleanup (v2.0.47). The base rule
   above spaces View/Track with per-button margins (4px 8px 4px 0 + a 4px
   adjacent margin-left), which reads as uneven/squeezed on desktop. On
   desktop only, drop the per-button margins and use ONE controlled gap
   between adjacent buttons, with a steadier min-width per button and a
   stable actions column. The <td> stays a table-cell (no display change),
   so native table alignment is preserved. Mobile (<=600px) cards and
   tablet (601-900px) are untouched — separate breakpoints. */
@media (min-width: 901px) {
	/* Desktop Orders cell horizontal breathing room (v2.0.58). Sets ONLY the
	   left/right padding to 16px (longhands, not the `padding` shorthand) so the
	   vertical padding from the shared table.shop_table rule (currently 14px) is
	   preserved and never tightened. !important beats that non-important shared
	   rule on the horizontal axis only. Scoped to the Orders endpoint +
	   table.my_account_orders at the desktop breakpoint; the mobile card layout
	   (<=900px) is a separate block and is untouched. */
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content table.my_account_orders th,
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content table.my_account_orders td {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
		white-space: nowrap !important;
		min-width: 190px !important;
	}

	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button,
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button {
		margin: 0 !important;
		min-width: 74px !important;
		padding: 10px 16px !important;
		white-space: nowrap !important;
		vertical-align: middle !important;
	}

	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button + .button,
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button + a.button {
		margin-left: 12px !important;
	}
}

/* ===========================================================
   Wishlist (WPC Smart Wishlist) switcher — label + dropdown row.
   Strictly scoped to the account-content area. Does NOT style wishlist
   products, cards, or any .woosw-switcher elsewhere on the site.
   =========================================================== */
body.pmai-account-page .woocommerce-MyAccount-content .woosw-switcher {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
body.pmai-account-page .woocommerce-MyAccount-content .woosw-switcher .woosw-name {
	flex: 0 0 auto;
	margin: 0;
}
body.pmai-account-page .woocommerce-MyAccount-content .woosw-switcher .woosw-switcher-dropdown {
	margin: 0;
	max-width: 360px;
}

/* Subscription empty-state message text (WPS Subscriptions plugin) — white
   so it reads on the glass content card. Scoped strictly to the account
   content area. */
body.pmai-account-page .woocommerce-MyAccount-content .wps_sfw_account_wrap,
body.pmai-account-page .woocommerce-MyAccount-content .wps_sfw_account_additional_wrap {
	color: #ffffff !important;
}

/* Subscription empty-state box border cleanup (v2.0.46). The "You do not
   have any active subscription(s)." message sits in a box carrying BOTH
   classes (.wps_sfw_account_wrap.wps_sfw_account_additional_wrap) with a
   bright 1px #ddd border + box-shadow that clashes with the glass card.
   Strip the inner frame so the message sits flush on the outer glass card.
   The combined-class selector matches only this empty-state box — active
   subscription tables/lists use different wrapper classes, so they're not
   touched. The outer .woocommerce-MyAccount-content card is unchanged. */
body.pmai-account-page .woocommerce-MyAccount-content .wps_sfw_account_wrap.wps_sfw_account_additional_wrap {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* Wishlist "Favorites" / list heading (WPC Smart Wishlist) — white on
   glass. Scoped to the account content area. */
body.pmai-account-page .woocommerce-MyAccount-content .woosw-name {
	color: #ffffff !important;
}

/* ===========================================================
   Tables — orders, downloads
   =========================================================== */

body.pmai-account-page .woocommerce-MyAccount-content table.shop_table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: var(--pmai-glass-soft) !important;
	border: 1px solid var(--pmai-glass-border) !important;
	border-radius: var(--pmai-radius) !important;
	overflow: hidden;
	box-shadow: none;
}

body.pmai-account-page .woocommerce-MyAccount-content table.shop_table thead th {
	background: transparent;
	border-bottom: 1px solid var(--pmai-glass-border);
	color: var(--pmai-glass-muted);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 14px 16px;
	text-align: left;
}

body.pmai-account-page .woocommerce-MyAccount-content table.shop_table tbody td {
	padding: 14px 16px;
	border-top: 1px solid var(--pmai-glass-border);
	color: var(--pmai-glass-text);
	font-size: 14.5px;
}

body.pmai-account-page .woocommerce-MyAccount-content table.shop_table tbody tr:first-child td {
	border-top: 0;
}

body.pmai-account-page .woocommerce-MyAccount-content table.shop_table tbody tr {
	transition: background var(--pmai-speed) ease;
}
body.pmai-account-page .woocommerce-MyAccount-content table.shop_table tbody tr:hover {
	background: var(--pmai-glass-soft-hover);
}

/* Defensive base for the bare WooCommerce semantic table class
   `.woocommerce-table` used WITHOUT `.shop_table`. Core always pairs the
   two, but some third-party account panels emit `.woocommerce-table`
   alone — without this it would render white-on-white under the white
   base text (the same gap class we hit with the WPC wishlist table).
   Mirrors the .shop_table glass treatment; cells go transparent so the
   table glass shows. Low specificity — the view-order order-details rules
   (`table.woocommerce-table--order-details`, more specific + later) still
   win, so the transparent order-details design is unaffected. */
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-table {
	background: var(--pmai-glass-soft) !important;
	border: 1px solid var(--pmai-glass-border) !important;
	border-radius: var(--pmai-radius);
}
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-table th {
	background: transparent !important;
	color: var(--pmai-glass-muted);
	border-color: var(--pmai-glass-border);
}
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-table td {
	background: transparent !important;
	color: var(--pmai-glass-text);
	border-color: var(--pmai-glass-border);
}

body.pmai-account-page .woocommerce-orders-table__cell-order-status {
	font-weight: 600;
}

/* ===========================================================
   Orders table — glass overlay on the content card (orders endpoint only).
   Targets `table.woocommerce-orders-table` specifically, so the downloads
   table and any other .shop_table outside orders keep their solid styling.
   Excludes `a.button` action buttons so View/Track styling is preserved.
   =========================================================== */
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table thead,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table tbody,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table tr,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table th,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table td {
	background: transparent !important;
	color: #ffffff !important;
}

body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table thead th,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table thead span {
	color: rgba(255, 255, 255, 0.78) !important;
}

body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table time,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table .amount,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-Price-amount,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-Price-currencySymbol {
	color: #ffffff !important;
}

/* Non-button links inside the orders table — white. Action buttons
   (.button) are excluded so their existing colour stays. */
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table a:not(.button) {
	color: #ffffff !important;
	text-decoration: none;
}
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table a:not(.button):hover {
	color: rgba(255, 255, 255, 0.82) !important;
}

/* Subtle row separators that work on the glass surface. */
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table thead th,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td {
	border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Soft glass hover. */
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.06) !important;
}

/* ===========================================================
   Notices
   =========================================================== */

body.pmai-account-page .woocommerce-message,
body.pmai-account-page .woocommerce-info,
body.pmai-account-page .woocommerce-error {
	padding: 12px 16px;
	border-radius: var(--pmai-radius-sm);
	border: 1px solid var(--pmai-glass-border);
	background: var(--pmai-glass-soft);
	color: var(--pmai-glass-text);
	margin: 0 0 16px;
	list-style: none;
}
body.pmai-account-page .woocommerce-message { border-left: 3px solid #16a34a; }
body.pmai-account-page .woocommerce-info    { border-left: 3px solid rgba(255, 255, 255, 0.5); }
body.pmai-account-page .woocommerce-error   { border-left: 3px solid #dc2626; }

/* ===========================================================
   In-flow notices inside My Account (v2.0.42) — release fix
   ===========================================================
   Kadence Shop Kit converts WooCommerce notices into floating
   position:fixed snackbars (.kwsb-snackbar-notice). On My Account these
   overlap form fields/buttons (Account Details temp-password message,
   Edit Address success/error). Repositioning the fixed toast failed on
   multiple endpoints. The robust fix: inside My Account content only,
   put the notice back into NORMAL PAGE FLOW so it takes real layout space
   above the form and structurally cannot overlap it. We do NOT hide
   notices, do NOT force-show anything, and the `:not(.kwsb-hide-notice)
   :not(.kwsb-hidden-notice)` guards mean dismissed notices stay dismissed.
   Scoped to body.pmai-account-page .woocommerce-MyAccount-content, so
   shop / product / cart / checkout snackbars are completely unchanged. */
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-notices-wrapper {
	position: static !important;
	inset: auto !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
	z-index: auto !important;
}

/* v2.0.44 — the wrapper no longer reserves vertical space (its margin was
   causing a gap above page content even with no active notice). Spacing now
   lives on ACTIVE notices only; empty wrappers collapse; dismissed Shop Kit
   notices (.kwsb-hide-notice / .kwsb-hidden-notice) collapse their box so
   they create no gap. Nothing is hidden or resurrected here. */
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
}

body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-message.kwsb-snackbar-notice:not(.kwsb-hide-notice):not(.kwsb-hidden-notice),
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-info.kwsb-snackbar-notice:not(.kwsb-hide-notice):not(.kwsb-hidden-notice),
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-error.kwsb-snackbar-notice:not(.kwsb-hide-notice):not(.kwsb-hidden-notice) {
	position: relative !important;
	inset: auto !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 0 20px !important;
	padding: 16px 56px 16px 16px !important;
	box-sizing: border-box !important;
	transform: none !important;
	z-index: 2 !important;
	pointer-events: auto !important;
}

body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-message.kwsb-snackbar-notice:not(.kwsb-hide-notice):not(.kwsb-hidden-notice) .kwsb-close,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-info.kwsb-snackbar-notice:not(.kwsb-hide-notice):not(.kwsb-hidden-notice) .kwsb-close,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-error.kwsb-snackbar-notice:not(.kwsb-hide-notice):not(.kwsb-hidden-notice) .kwsb-close {
	position: absolute !important;
	top: 50% !important;
	right: 12px !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	transform: translateY(-50%) !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	z-index: 3 !important;
}

/* Active notices (kwsb AND plain non-kwsb WooCommerce notices) carry their
   own bottom spacing now that the wrapper doesn't. Guarded with
   :not(.kwsb-hide-notice):not(.kwsb-hidden-notice) so dismissed notices are
   excluded — this neither hides nor resurrects anything. */
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-message:not(.kwsb-hide-notice):not(.kwsb-hidden-notice),
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-info:not(.kwsb-hide-notice):not(.kwsb-hidden-notice),
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-error:not(.kwsb-hide-notice):not(.kwsb-hidden-notice) {
	margin: 0 0 20px !important;
}

/* Dismissed Shop Kit notices: collapse the box so they create no gap. Not
   display:none, no opacity/visibility forcing — Shop Kit already hides them;
   this only removes the reserved space + makes them non-interactive. */
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-message.kwsb-hide-notice,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-info.kwsb-hide-notice,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-error.kwsb-hide-notice,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-message.kwsb-hidden-notice,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-info.kwsb-hidden-notice,
body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-error.kwsb-hidden-notice {
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* ===========================================================
   Empty Orders state — glass cleanup (v2.0.41, extended to desktop/tablet
   in v2.0.45). Applies on ALL widths.
   ===========================================================
   The "No order has been made yet. Browse products" empty state renders
   as a .woocommerce-info whose Browse-Products button WooCommerce floats
   inline with a negative margin, and the generic notice rule gives it a
   blue left accent. v2.0.41 only fixed mobile; v2.0.45 makes this a base
   (no media query) so desktop/tablet match too — a clean glass card with
   no blue accent and the button cleanly placed at the row's end. Mobile
   then stacks the button full-width below the message. Scoped to
   pmai-endpoint-orders so real-order notices / other endpoints are
   unaffected; does not touch snackbar or notice-spacing rules. */
body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 18px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 18px 22px !important;
	box-sizing: border-box !important;
	color: rgba(255, 255, 255, 0.94) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
}

body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info::before,
body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info::after {
	display: none !important;
	content: none !important;
}

body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info .button,
body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info a.button,
body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 12px 22px !important;
	box-sizing: border-box !important;
	text-align: center !important;
	white-space: nowrap !important;
}

@media (max-width: 600px) {
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 14px !important;
		padding: 16px !important;
	}

	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info .button,
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info a.button,
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button {
		width: 100% !important;
		max-width: 100% !important;
		white-space: normal !important;
	}
}

/* ===========================================================
   Dashboard endpoint polish — strictly scoped to the My Account
   dashboard. The two intro paragraphs (greeting + dashboard
   description) become white on the glass content card.
   =========================================================== */
body.pmai-account-page.pmai-endpoint-dashboard .woocommerce-MyAccount-content > p,
body.pmai-account-page.pmai-endpoint-dashboard .woocommerce-MyAccount-content > p strong {
	color: #ffffff !important;
}
body.pmai-account-page.pmai-endpoint-dashboard .woocommerce-MyAccount-content > p a {
	color: #ffffff !important;
	text-decoration-color: rgba(255, 255, 255, 0.55);
}
body.pmai-account-page.pmai-endpoint-dashboard .woocommerce-MyAccount-content > p a:hover {
	color: rgba(255, 255, 255, 0.82) !important;
}

/* ===========================================================
   Address endpoint polish — strictly scoped to edit-address.
   Every rule below carries the .pmai-endpoint-edit-address chain
   so .woocommerce-Address / .u-column1 / .col-1 elsewhere on the
   account page are completely untouched.
   =========================================================== */

body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content > p:first-of-type {
	margin: 0 0 28px;
	max-width: 720px;
	line-height: 1.5;
	color: #ffffff !important;
}
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content > p:first-of-type a {
	color: #ffffff !important;
}

body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	margin-top: 24px;
}

/* Reset WooCommerce / Kadence column floats and widths INSIDE the address
   grid. !important here because WooCommerce ships .col-1 / .col-2 with
   `float: left; width: 48%` at equal specificity. Scoped to the endpoint
   so no other .u-column1 / .col-1 element is affected. */
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses .woocommerce-Address,
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses .u-column1,
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses .u-column2,
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses .col-1,
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses .col-2 {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	min-width: 0;
	order: initial;
}

/* Explicit grid placement for billing (.u-column1 / .col-1) and shipping
   (.u-column2 / .col-2). Without this, Kadence / WooCommerce can set `order`
   on the column classes (same pattern as the v2.0.4 sidebar placement bug),
   which lets grid auto-placement push the cards into the wrong cells. */
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses > .u-column1,
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses > .col-1 {
	grid-column: 1;
	grid-row: 1;
	order: initial;
}
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses > .u-column2,
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses > .col-2 {
	grid-column: 2;
	grid-row: 1;
	order: initial;
}

body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 18px;
	padding: 28px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
	color: #ffffff !important;
	box-sizing: border-box;
	min-height: 190px;
	display: flex;
	flex-direction: column;
}

/* Backdrop blur on the address cards removed (v2.0.61) — see the nav note.
   The transparent background + white border remain. */

/* Address overview header — title and Edit link stacked vertically
   (v2.0.38). The earlier 2-column layout (title | edit) squeezed both into
   one ~321px row, overlapping. This forces a single-column, two-row grid:
   row 1 = heading, row 2 = Edit pill. Placement props use !important to
   override the prior grid-column/grid-row assignments. */
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address-title {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	grid-template-rows: auto auto !important;
	row-gap: 14px !important;
	column-gap: 0 !important;
	align-items: start !important;
	justify-items: start !important;
	width: 100% !important;
	min-width: 0 !important;
	text-align: left !important;
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address-title h2,
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address-title h3 {
	grid-column: 1 / -1 !important;
	grid-row: 1 !important;
	grid-area: 1 / 1 / 2 / -1 !important;
	order: initial !important;
	display: block !important;
	position: static !important;
	float: none !important;
	clear: both !important;
	transform: none !important;
	justify-self: start !important;
	align-self: start !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	white-space: normal !important;
	font-size: 18px;
	line-height: 1.18 !important;
	font-weight: 700;
	color: #ffffff !important;
}

body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address-title .edit {
	grid-column: 1 / -1 !important;
	grid-row: 2 !important;
	grid-area: 2 / 1 / 3 / -1 !important;
	order: initial !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	position: static !important;
	float: none !important;
	clear: both !important;
	transform: none !important;
	justify-self: start !important;
	align-self: start !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	text-align: center;
	white-space: nowrap !important;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 7px 11px;
	text-decoration: none;
	transition: background var(--pmai-speed) ease, color var(--pmai-speed) ease;
}

body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address-title .edit:hover {
	background: rgba(255, 255, 255, 0.20);
	color: #ffffff !important;
}

body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	color: #ffffff !important;
	line-height: 1.65;
	font-size: 15px;
	word-break: normal;
	overflow-wrap: anywhere;
}

@media (max-width: 900px) {
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
	/* Stacked-mobile placement: billing first, shipping second. */
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses > .u-column1,
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses > .col-1 {
		grid-column: 1;
		grid-row: 1;
	}
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses > .u-column2,
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Addresses > .col-2 {
		grid-column: 1;
		grid-row: 2;
	}
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address {
		padding: 20px;
		min-height: 0;
	}
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address-title {
		grid-template-columns: 1fr;
		align-items: start;
	}
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address-title h2,
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address-title h3 {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		text-align: left;
	}
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-Address-title .edit {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		text-align: center;
		white-space: normal;
	}
}

/* Edit-address form headings — "Billing address" / "Shipping address" page
   titles on the individual edit pages. Direct-child selector limits this
   to the top-level form heading; address-card title headings inside
   `.woocommerce-Address-title` are NOT matched. */
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content > form > h2 {
	color: #ffffff !important;
}

/* Save-address button spacing (v2.0.37). WooCommerce renders the "Save
   address" button inside a plain <p> that is the last child of
   `.woocommerce-address-fields` (after the field-wrapper). With the email
   field's margin-bottom: 0 the button sat flush against it (0px gap). This
   adds comfortable spacing above that button row. No :has() used — the
   structural `> p:last-child` selector targets the button paragraph. Scoped
   to the edit-address endpoint, so the Account Details save button, checkout,
   and cart forms are not affected. */
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content .woocommerce-address-fields > p:last-child {
	margin-top: 18px !important;
}

/* ===========================================================
   Edit-address snackbar containment fix (v2.0.39) — max-width: 600px
   ===========================================================
   Root cause (not the snackbar itself): the glass content card sets
   `overflow: hidden` + `backdrop-filter: blur(18px)`. A backdrop-filter
   makes the element a containing block for position:fixed descendants
   (same as transform/filter), and overflow:hidden then clips them.
   Kadence Shop Kit's fixed snackbar notice is rendered INSIDE
   .woocommerce-MyAccount-content, so it gets trapped + clipped and slides
   under the address cards on scroll. Dropping overflow + backdrop-filter
   on the card (mobile edit-address only) lets the snackbar be truly
   viewport-fixed again. The translucent rgba background remains as the
   readable fallback. We do NOT touch the snackbar / .kwsb-* at all. */
@media (max-width: 600px) {
	body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content {
		overflow: visible !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* Billing Country Select2 rendered text — light white (v2.0.43; was
   #beb9b9 grey which read as "too dark" on mobile). Scoped to the rendered
   display element only; dropdown / search / options / functionality
   untouched. Two selectors cover the direct ID target + the parent-field
   fallback in case Select2 sets `color` on a higher element. */
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content #select2-billing_country-container {
	color: rgba(255, 255, 255, 0.94) !important;
}
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content #billing_country_field .select2-selection__rendered {
	color: rgba(255, 255, 255, 0.94) !important;
}

/* Billing State Select2 rendered text — light white (v2.0.43) to match
   billing country. Same belt-and-suspenders pattern: direct ID + parent
   field fallback. */
body.pmai-account-page.pmai-endpoint-edit-address #select2-billing_state-container {
	color: rgba(255, 255, 255, 0.94) !important;
}
body.pmai-account-page.pmai-endpoint-edit-address #billing_state_field .select2-selection__rendered {
	color: rgba(255, 255, 255, 0.94) !important;
}

/* Select2 visible selection field — glass surface matching v2.0.17 input
   styling. Scoped to the edit-address endpoint via body class so it
   applies to all Select2 fields on this endpoint (country / state). */
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--default .select2-selection--single {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 14px !important;
	color: rgba(255, 255, 255, 0.94) !important;
	box-shadow: none !important;
	min-height: 44px;
}
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: rgba(255, 255, 255, 0.94) !important;
	line-height: 44px;
}
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--default .select2-selection--single .select2-selection__arrow {
	min-height: 44px;
}

/* Select2 placeholder + arrow (v2.0.43) — light so the State/County
   placeholder and the dropdown arrow match the white glass inputs instead
   of rendering dark. Closed-field elements live inside the in-content
   .select2-container, so scoping under .woocommerce-MyAccount-content is
   safe (the OPEN dropdown is appended to <body> and is not targeted here). */
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content .select2-container .select2-selection__placeholder {
	color: rgba(255, 255, 255, 0.58) !important;
}
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content .select2-container .select2-selection__arrow b {
	border-top-color: rgba(255, 255, 255, 0.72) !important;
}
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content .select2-container.select2-container--open .select2-selection__arrow b {
	border-bottom-color: rgba(255, 255, 255, 0.72) !important;
	border-top-color: transparent !important;
}

/* Native <select> fallback inside edit-address (used if Select2 fails to
   load / is disabled). Light closed-field text + glass surface; the option
   list stays dark-on-white so the native OS dropdown is readable. Scoped to
   the edit-address endpoint so checkout / cart / product selects are
   untouched. */
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content select {
	color: rgba(255, 255, 255, 0.94) !important;
	background-color: rgba(255, 255, 255, 0.14) !important;
	border-color: rgba(255, 255, 255, 0.26) !important;
}
body.pmai-account-page.pmai-endpoint-edit-address .woocommerce-MyAccount-content select option {
	color: #111111;
	background-color: #ffffff;
}

/* Select2 OPEN dropdown — Select2 appends this to `<body>` outside the
   account content area, so the scope here is the body class only (no
   `.woocommerce-MyAccount-content`). Limited to the edit-address endpoint
   so checkout / cart / other Select2 dropdowns are unaffected. */
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--open .select2-dropdown {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--open .select2-search--dropdown {
	background: transparent !important;
}
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--open .select2-search__field {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	color: #ffffff !important;
}
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--open .select2-results__options,
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--open .select2-results__option {
	background: transparent !important;
	color: #ffffff !important;
}
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--open .select2-results__option--highlighted,
body.pmai-account-page.pmai-endpoint-edit-address .select2-container--open .select2-results__option[aria-selected="true"] {
	background: rgba(255, 255, 255, 0.16) !important;
	color: #ffffff !important;
}

/* ===========================================================
   View-order endpoint polish — order details page text turns
   white on the glass content card. Two body-class scopes are
   supported: our own `pmai-endpoint-view-order` and WooCommerce's
   native `woocommerce-view-order` (whichever matches wins).
   Buttons (including "Order again") are excluded via :not(.button).
   Orders list table, downloads, wishlist, cart, and checkout
   tables are not affected — only descendants of
   `.woocommerce-MyAccount-content` on the view-order endpoint.
   =========================================================== */
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content p,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content strong,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content h2,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content th,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content td,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content address,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .woocommerce-order-details,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .woocommerce-customer-details,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .wc-item-meta,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .wc-item-meta p,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .wc-item-meta-label,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .woocommerce-Price-amount,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .woocommerce-Price-currencySymbol {
	color: #ffffff !important;
}

body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content p,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content strong,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content h2,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content th,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content td,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content address,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-order-details,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-customer-details,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content .wc-item-meta,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content .wc-item-meta p,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content .wc-item-meta-label,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-Price-amount,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content .woocommerce-Price-currencySymbol {
	color: #ffffff !important;
}

/* Links inside the order details — white. `:not(.button)` excludes
   "Order again" and any other .button-styled link. */
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content a:not(.button),
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content a:not(.button) {
	color: #ffffff !important;
	text-decoration-color: rgba(255, 255, 255, 0.55);
}
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content a:not(.button):hover,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content a:not(.button):hover {
	color: rgba(255, 255, 255, 0.82) !important;
}

/* Product-name link affordance on View Order (v2.0.55). Product names in the
   Order Details table are links but read as plain bold text (the theme strips
   the default underline), so they do not look clickable. A subtle underline is
   used rather than a border or glass pill: product names can be long, and a
   bordered pill would make the table cluttered and button-heavy, whereas a
   clean underline is familiar, readable, and accessible. Scoped to the
   order-details product-name link only. No padding, border, background, or
   display change is added here (the mobile block already handles the block/
   wrap layout). The selector is more specific (0,5,2) than the generic
   view-order link rule (0,4,2), so the underline affordance wins. */
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .woocommerce-table--order-details .product-name > a {
	color: rgba(255, 255, 255, 0.96) !important;
	text-decoration-line: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 4px !important;
	text-decoration-color: rgba(255, 255, 255, 0.38) !important;
	font-weight: 700 !important;
}
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .woocommerce-table--order-details .product-name > a:hover,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .woocommerce-table--order-details .product-name > a:focus-visible {
	color: #ffffff !important;
	text-decoration-color: rgba(255, 255, 255, 0.9) !important;
}

/* <mark> tags around order number / date / status — readable pill style. */
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content mark,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content mark {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	padding: 2px 6px;
}

/* View Order intro sentence — badge line-spacing fix (v2.0.51). The intro
   line ("Order #X was placed on DATE and is currently STATUS.") renders the
   order number / date / status as <mark> pills (bordered + padded by the
   generic mark rule above). As default inline boxes, their border + padding
   paint OUTSIDE the line box, so at the theme's tight ~1.6 line-height the
   pill borders on a wrapped second line nearly touch the line above — they
   look stacked. Fix: (1) open the intro paragraph's line-height so wrapped
   lines clear the pill borders; (2) make the three badges inline-block with a
   tight own line-height plus a small 2px margin, so each pill has a
   predictable height and a little breathing room on every side (a vertical
   margin only takes effect once the element is inline-block, not inline).
   Colour / background / border / radius / padding are intentionally left to
   the generic mark rule above and NOT duplicated here. Scoped to the first
   direct-child paragraph only, so the tracking card, Order Details table and
   Customer Details block are untouched. */
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content > p:first-of-type {
	line-height: 1.85 !important;
}
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content > p:first-of-type mark.order-number,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content > p:first-of-type mark.order-date,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content > p:first-of-type mark.order-status {
	display: inline-block !important;
	line-height: 1.25 !important;
	margin: 2px 2px !important;
	vertical-align: baseline !important;
}

/* Order details table on the View Order page — subtle glass surface with
   a 1px white-translucent outer border and 14px rounded corners. Inner
   rows / cells stay transparent so the table reads as ONE clean outer
   surface (no stacked / doubled row backgrounds, no internal grid).
   Scoped strictly to `table.woocommerce-table--order-details`. */
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details {
	background: rgba(255, 255, 255, 0.08) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 14px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	box-shadow: none !important;
}

/* Table internals — thead / tbody / tfoot / tr / th / td all transparent
   so the outer surface above is the only visible glass layer. */
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details thead,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tr,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details th,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details td,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details thead,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tr,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details th,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details td {
	background: transparent !important;
	background-color: transparent !important;
}

/* Cell borders stay removed — only the outer 1px border on the table
   itself remains. Beats the shared `table.shop_table tbody td { border-top:
   1px ... }` rule and any browser-default cell border. */
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details th,
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details td,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details th,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details td {
	border: 0 !important;
	border-top: 0 !important;
	border-top-width: 0 !important;
	box-shadow: none !important;
}

/* ===========================================================
   View Order order-details mobile layout (v2.0.33) — <=600px only
   ===========================================================
   On small phones WooCommerce/theme core renders the product cell with
   display:flex, squeezing product name / quantity / item-meta into tiny
   side-by-side columns and cutting off text. This block stacks each item
   row vertically as a card, removes the table-level outer border (the
   per-row card border stays), and forces totals to a clean label/value
   grid. All rules live inside @media (max-width: 600px) so desktop /
   tablet (the v2.0.26 glass order-details table above) is untouched. */
@media (max-width: 600px) {
	/* Task 1 — strip the table-level border/background/radius so the row
	   cards are the only bordered surfaces (kills the double-line look). */
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details {
		display: block !important;
		width: 100% !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		overflow: visible !important;
		box-shadow: none !important;
	}

	/* Task 2 — hide thead, keep tbody/tfoot as block sections. */
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details thead,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details thead {
		display: none !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody,
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot {
		display: block !important;
		width: 100% !important;
	}

	/* Task 3 — each order item row becomes a glass card. */
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody tr,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody tr {
		display: block !important;
		width: 100% !important;
		padding: 16px !important;
		margin: 0 0 14px !important;
		background: rgba(255, 255, 255, 0.08) !important;
		border: 1px solid rgba(255, 255, 255, 0.22) !important;
		border-radius: 16px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	/* Task 4 — override the bad flex on product/total cells → block stack. */
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody td,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody td {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		box-sizing: border-box !important;
		overflow: visible !important;
		text-align: left !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody td + td,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody td + td {
		margin-top: 12px !important;
	}

	/* Task 5 — product link / quantity / meta stack naturally. */
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody td.product-name > a,
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody td.woocommerce-table__product-name > a,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody td.product-name > a,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tbody td.woocommerce-table__product-name > a {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: anywhere !important;
		line-height: 1.35 !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .product-quantity,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .product-quantity {
		display: inline-block !important;
		width: auto !important;
		min-width: 0 !important;
		margin-top: 6px !important;
		white-space: nowrap !important;
	}

	/* Task 6 — wc-item-meta: drop the 29px indent + tiny width, full-width. */
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 10px 0 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta li,
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta p,
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta .wc-item-meta-label,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta li,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta p,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta .wc-item-meta-label {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: anywhere !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta .wc-item-meta-label,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta .wc-item-meta-label {
		margin-bottom: 3px !important;
		color: rgba(255, 255, 255, 0.72) !important;
	}

	/* Task 7 — footer/totals rows become a clean label/value grid. */
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot tr,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot tr {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		gap: 12px !important;
		width: 100% !important;
		padding: 10px 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-sizing: border-box !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot th,
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot td,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot th,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot td {
		display: block !important;
		width: auto !important;
		min-width: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot td,
	body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot td {
		text-align: right !important;
	}
}

/* Orders list table cell border-top removal — targeted exception only.
   The shared `table.shop_table tbody td { border-top: 1px ... }` rule
   would otherwise put a visible separator on the order-number cell on
   the My Account Orders list. No other Orders list styling is changed. */
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table th,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table td,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell,
body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__header {
	border-top: 0 !important;
	border-top-width: 0 !important;
}

/* ===========================================================
   Wishlist table glass surface (v2.0.30)
   ===========================================================
   WPC Smart Wishlist (.woosw-items) ships its own white background +
   2px border on the table / tbody / rows / cells. The v2.0.27 future-
   proof base skin paints the wishlist text white, but the surfaces
   stay white, so the white-on-white text disappears. This block makes
   table.woosw-items one outer glass surface with transparent internals
   (matches the v2.0.26 order-details table treatment). Scoped strictly
   to .woocommerce-MyAccount-content table.woosw-items — no other
   wishlist markup elsewhere on the site is affected. The current body
   class on the wishlist endpoint stays pmai-endpoint-dashboard (Woo
   quirk), so we cannot scope by endpoint class; the table class itself
   provides the scope. */
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items {
	background: rgba(255, 255, 255, 0.08) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 14px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	box-shadow: none !important;
}

/* Internal wishlist table layers — transparent so the outer surface
   above is the only visible glass layer (no stacked / doubled row
   backgrounds). */
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items tbody,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items tr.woosw-item,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items td {
	background: transparent !important;
	background-color: transparent !important;
}

/* Wishlist text colours — defensive re-assertion of white on the glass
   surface. v2.0.27 base skin already inherits white, but plugins
   sometimes ship higher-specificity colour rules on these specific
   classes. */
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items td,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--name a,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--price,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--price *,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--time,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--note,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .stock {
	color: #ffffff !important;
}

/* Row + cell separators — subtle white on the glass surface. */
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items tr.woosw-item,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items td {
	border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Image cell + its link wrapper — transparent so product thumbnails sit
   directly on the glass surface, not on a white block. Image files,
   URLs, sizing, and product behaviour are NOT touched. */
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--image,
body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--image a {
	background: transparent !important;
}

/* ===========================================================
   Wishlist mobile layout (v2.0.32 → refined v2.0.34 / v2.0.35 / v2.0.36) — max-width: 600px
   ===========================================================
   v2.0.36 drops the X/remove column entirely on mobile (it was eating
   ~28px and squeezing the title to ~88px) and uses a 2-column card:
     Row 1:  image (76px) | product title (1fr)
     Below (inside the info column): price, date, note stacked vertically.
   The note's black left border is removed. The actions/stock/Add-to-Cart
   cell stays display:none on mobile by design (intentional — no room).
   The Wishlist link / Copy area and the "Share on:" row are enlarged for
   readability. Desktop / tablet wishlist (the v2.0.30 glass table above)
   is untouched — all rules live inside @media (max-width: 600px). */
@media (max-width: 600px) {
	/* Task 1 — un-table the wishlist rows into stacked grid cards. */
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items,
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items tbody,
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items tr.woosw-item,
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items td {
		box-sizing: border-box !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items {
		display: block !important;
		width: 100% !important;
		border: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items tbody {
		display: block !important;
		width: 100% !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items tr.woosw-item {
		display: grid !important;
		grid-template-columns: 76px minmax(0, 1fr) !important;
		grid-template-areas: "image info" !important;
		column-gap: 12px !important;
		row-gap: 8px !important;
		width: 100% !important;
		padding: 12px !important;
		margin: 0 0 14px !important;
		background: rgba(255, 255, 255, 0.08) !important;
		border: 1px solid rgba(255, 255, 255, 0.22) !important;
		border-radius: 16px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	/* Task 2 — reset visible cells + assign grid areas. */
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		min-width: 0 !important;
	}

	/* Remove/X column dropped entirely on mobile — it ate ~28px and squeezed
	   the title. Hidden only at <=600px; desktop remove control is untouched. */
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--remove {
		display: none !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--image {
		grid-area: image !important;
		display: flex !important;
		align-items: flex-start !important;
		justify-content: center !important;
		width: 76px !important;
		min-width: 76px !important;
		padding: 0 !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--info {
		grid-area: info !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	/* Task 3 — keep the actions/stock/Add-to-Cart cell hidden on mobile.
	   Defensive: ensures future card styling can't accidentally reveal it. */
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--actions {
		display: none !important;
	}

	/* Task 4 — image capped to 76px; product text gets the full card width. */
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--image img {
		width: 76px !important;
		height: auto !important;
		max-width: 76px !important;
		border-radius: 10px !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--name,
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--name a {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: anywhere !important;
		line-height: 1.3 !important;
		font-size: 16px !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--price,
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--time,
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--note {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		font-size: 15px !important;
		line-height: 1.35 !important;
		margin-top: 4px !important;
	}

	/* Remove the black left border WPC puts beside the Add-note area. */
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--note {
		border-left: 0 !important;
		border: 0 !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
		box-shadow: none !important;
	}
	body.pmai-account-page .woocommerce-MyAccount-content table.woosw-items .woosw-item--note * {
		border-left: 0 !important;
		border: 0 !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
		box-shadow: none !important;
	}

	/* Task 7 (v2.0.35) — enlarge "Share on:" + "Wishlist link:" text and the
	   social icons so they're comfortable for older customers. */
	body.pmai-account-page .woocommerce-MyAccount-content .woosw-share,
	body.pmai-account-page .woocommerce-MyAccount-content .woosw-copy .woosw-copy-label {
		font-size: 18px !important;
		line-height: 1.35 !important;
		color: #ffffff !important;
	}
	body.pmai-account-page .woocommerce-MyAccount-content .woosw-share a,
	body.pmai-account-page .woocommerce-MyAccount-content .woosw-share i,
	body.pmai-account-page .woocommerce-MyAccount-content .woosw-share svg {
		font-size: 24px !important;
		width: 24px !important;
		height: 24px !important;
	}

	/* Task 8 (v2.0.35) — Wishlist link area: label + input on one row, Copy
	   button full-width underneath. */
	body.pmai-account-page .woocommerce-MyAccount-content .woosw-copy {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) !important;
		grid-template-areas:
			"label input"
			"button button" !important;
		gap: 10px !important;
		align-items: center !important;
		width: 100% !important;
		min-width: 0 !important;
		margin-top: 14px !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content .woosw-copy .woosw-copy-label {
		grid-area: label !important;
		display: block !important;
		width: auto !important;
		min-width: max-content !important;
		white-space: nowrap !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content .woosw-copy .woosw-copy-url {
		grid-area: input !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content .woosw-copy input {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content .woosw-copy .woosw-copy-btn {
		grid-area: button !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	body.pmai-account-page .woocommerce-MyAccount-content .woosw-copy button,
	body.pmai-account-page .woocommerce-MyAccount-content .woosw-copy .button {
		display: inline-flex !important;
		justify-content: center !important;
		width: 100% !important;
		min-width: 0 !important;
		white-space: nowrap !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		text-align: center !important;
		font-size: 17px !important;
		min-height: 46px !important;
	}
}

/* Shipment tracking card on View Order (v2.0.50 glass-card pass).
   History: v2.0.25 painted the surface rgba(255,255,255,0.20); v2.0.26 made
   BOTH .fluid_section and .fluid_container transparent. v2.0.50 now gives
   .fluid_container a proper glass card that MATCHES the Order Details table
   (rgba(255,255,255,0.08) bg, rgba(255,255,255,0.22) border, 14px radius),
   replacing the tracking plugin's default gray 1px border. .fluid_section
   stays transparent — it is the outer wrapper, so painting it too would
   double the card; it only gains bottom spacing before the Order Details
   table. Scoped strictly to the view-order endpoint (both the
   pmai-endpoint-view-order and WooCommerce woocommerce-view-order body-class
   variants, mirroring the prior defensive coverage).

   Specificity note: the .fluid_container glass rule uses the
   `.fluid_section .fluid_container` descendant chain (0,5,1) on purpose — a
   bare `.fluid_container` (0,4,1) would lose to the old transparent rule's
   chain, so the glass would never paint. */
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .fluid_section,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content .fluid_section {
	background: transparent !important;
	background-color: transparent !important;
	margin-bottom: 32px !important;
}
body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .fluid_section .fluid_container,
body.pmai-account-page.woocommerce-view-order .woocommerce-MyAccount-content .fluid_section .fluid_container {
	background: rgba(255, 255, 255, 0.08) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

/* Tracking card — mobile stacked layout (v2.0.50). The tracking plugin
   already switches .fluid_container to flex-direction:column on mobile, but
   the right column keeps text-align:right and the Track button stays an
   inline-flex pill (~153px) shoved to the right edge. Make both columns
   full-width and left-aligned, and the Track button full-width, so the
   stacked card reads as intentional. box-sizing:border-box keeps the border
   inside the width so there is no horizontal overflow. Desktop row layout
   (display/flex-direction/widths) is untouched — this lives only inside the
   max-width:900px media query. */
@media (max-width: 900px) {
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .fluid_section .fluid_container {
		width: 100% !important;
		box-sizing: border-box !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .fluid_section .fluid_container .fluid_cl {
		width: 100% !important;
		box-sizing: border-box !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .fluid_section .fluid_container .fluid_left_cl,
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .fluid_section .fluid_container .fluid_right_cl {
		text-align: left !important;
	}
	body.pmai-account-page.pmai-endpoint-view-order .woocommerce-MyAccount-content .fluid_section .fluid_container .track-button {
		width: 100% !important;
		max-width: 100% !important;
		justify-content: center !important;
		white-space: nowrap !important;
	}
}

/* ===========================================================
   Logged-out glass skin (v2.0.28)
   ===========================================================
   Strictly scoped to body.pmai-account-page.pmai-logged-out-account.
   The logged-out /my-account/ page does NOT have
   .woocommerce-MyAccount-content, so the standard logged-in glass skin
   does not apply. This section gives the login/register/lost-password
   forms the same premium glass treatment. The existing logged-in
   layout rules elsewhere in this file are not touched.
   =========================================================== */

/* Task 1 — centre the logged-out shell so the login/register column
   pair sits in a comfortable max-width. No display: grid on this
   wrapper — only the inner #customer_login becomes a 2-column grid. */
body.pmai-account-page.pmai-logged-out-account .entry-content .kt-inside-inner-col > .woocommerce {
	max-width: 980px;
	margin: 0 auto;
	width: 100%;
}

/* Task 2 — #customer_login becomes a 2-column grid. ID selector keeps
   this scoped strictly to the login/register wrapper; no other
   .u-columns / .col2-set on the site is affected. */
body.pmai-account-page.pmai-logged-out-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

/* Task 3 — neutralise WooCommerce's column floats / 48% widths inside
   the login wrapper only. */
body.pmai-account-page.pmai-logged-out-account #customer_login .u-column1,
body.pmai-account-page.pmai-logged-out-account #customer_login .u-column2,
body.pmai-account-page.pmai-logged-out-account #customer_login .col-1,
body.pmai-account-page.pmai-logged-out-account #customer_login .col-2 {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	min-width: 0;
}

/* Task 3b (v2.0.29) — explicit grid placement for the two direct
   children of #customer_login. v2.0.28 relied on grid auto-placement,
   but WooCommerce / Kadence sets `order` on .col-1 / .col-2 which
   shuffled the Login card into column 2 and the Register card into
   row 2 column 1. `order: initial` resets that and explicit
   grid-column / grid-row pins each card. Same pattern as the v2.0.4
   sidebar bug and v2.0.7 address bug. */
body.pmai-account-page.pmai-logged-out-account #customer_login > .u-column1,
body.pmai-account-page.pmai-logged-out-account #customer_login > .col-1 {
	grid-column: 1 !important;
	grid-row: 1 !important;
	order: initial !important;
	align-self: start;
}
body.pmai-account-page.pmai-logged-out-account #customer_login > .u-column2,
body.pmai-account-page.pmai-logged-out-account #customer_login > .col-2 {
	grid-column: 2 !important;
	grid-row: 1 !important;
	order: initial !important;
	align-self: start;
}

/* Task 4 — Login / Register headings white. */
body.pmai-account-page.pmai-logged-out-account #customer_login h2 {
	color: #ffffff !important;
}

/* Task 5 — login / register / lost-password forms become glass cards. */
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password {
	background: rgba(49, 48, 46, 0.88) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 20px !important;
	padding: clamp(20px, 3vw, 32px) !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
	color: #ffffff;
	width: 100%;
	box-sizing: border-box;
}

/* Backdrop blur on the logged-out form cards removed (v2.0.61) — see the nav
   note. The translucent background remains. */

/* Task 6 — form text / paragraphs / labels / strong all white. */
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login p,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register p,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password p,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login label,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register label,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password label,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login strong,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register strong,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password strong {
	color: #ffffff !important;
}

body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login .required,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register .required,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password .required {
	color: rgba(255, 255, 255, 0.86) !important;
}

/* Task 7 — logged-out links (not buttons). */
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login a:not(.button),
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register a:not(.button),
body.pmai-account-page.pmai-logged-out-account .lost_reset_password a:not(.button) {
	color: #ffffff !important;
	text-decoration-color: rgba(255, 255, 255, 0.55);
}
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login a:not(.button):hover,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register a:not(.button):hover,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password a:not(.button):hover {
	color: rgba(255, 255, 255, 0.82) !important;
}

/* Task 8 — text-style input fields inside logged-out forms. Only the
   explicit types listed below are matched; submit, button, checkbox,
   radio, hidden are NOT included so the password visibility button and
   the remember-me checkbox keep their native styling. */
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login input.input-text,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register input.input-text,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password input.input-text,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login input[type="text"],
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login input[type="email"],
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login input[type="password"],
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register input[type="text"],
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register input[type="email"],
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register input[type="password"],
body.pmai-account-page.pmai-logged-out-account .lost_reset_password input[type="text"],
body.pmai-account-page.pmai-logged-out-account .lost_reset_password input[type="email"] {
	width: 100% !important;
	padding: 10px 12px !important;
	font-size: 15px !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login input.input-text:focus,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register input.input-text:focus,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password input.input-text:focus,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login input[type="text"]:focus,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login input[type="email"]:focus,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login input[type="password"]:focus,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register input[type="text"]:focus,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register input[type="email"]:focus,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register input[type="password"]:focus,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password input[type="text"]:focus,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password input[type="email"]:focus {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.42) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
	outline: none;
}

body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login input::placeholder,
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register input::placeholder,
body.pmai-account-page.pmai-logged-out-account .lost_reset_password input::placeholder {
	color: rgba(255, 255, 255, 0.58);
}

/* Lost-password / reset-password form — legible regardless of login state
   (v2.0.65). The logged-out rules above are gated behind
   pmai-logged-out-account, so when a LOGGED-IN user lands on
   /my-account/lost-password/ (an admin testing, or someone clicking a stale
   reset link while still logged in) none of them apply and the intro
   paragraph falls back to WooCommerce's dark default text, which vanishes on
   the dark background. The reset form (classes woocommerce-ResetPassword +
   lost_reset_password) exists only on this page, so styling it under
   pmai-account-page instead of the logged-out class is safe and fixes both
   states with the same dark-glass card + white text. */
body.pmai-account-page .woocommerce-ResetPassword.lost_reset_password {
	background: rgba(49, 48, 46, 0.88) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 20px !important;
	padding: clamp(20px, 3vw, 32px) !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
	color: #ffffff;
}
body.pmai-account-page .woocommerce-ResetPassword.lost_reset_password p,
body.pmai-account-page .woocommerce-ResetPassword.lost_reset_password label,
body.pmai-account-page .woocommerce-ResetPassword.lost_reset_password strong {
	color: #ffffff !important;
}

/* Task 9 — password wrapper transparent so the inner input keeps its
   glass treatment. The .show-password-input toggle button is NOT
   touched here — visibility behaviour preserved. */
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login .password-input {
	background: transparent !important;
}

/* Task 10 — remember-me row: label readable on glass. The native
   checkbox is intentionally not restyled. */
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login .woocommerce-form-login__rememberme {
	color: #ffffff !important;
}

/* Register submit button top spacing (v2.0.54). The Register button sits a
   little too close to the privacy-policy text above it. The button itself is
   display:inline-flex (from the shared login/register button rule), so a
   vertical margin on the button is not a reliable way to add space; the
   spacing goes on the block-level SUBMIT ROW instead. padding-top (not
   margin-top) is used so the gap cannot be swallowed by margin-collapsing
   with the privacy text's bottom margin, keeping the spacing reliable on every
   width. The submit row is the only direct-child <p> of the register form that
   carries form-row but NOT form-row-wide (the email/password rows are
   form-row-wide; the privacy text and the "a link will be sent" line are not
   form rows at all), so :not(.form-row-wide) isolates it. Register-only and
   logged-out-only, so the Login button spacing is untouched. No media query:
   the spacing applies on all devices. */
body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register > p.woocommerce-form-row.form-row:not(.form-row-wide) {
	padding-top: 10px !important;
}

/* Task 11 — mobile: stack login/register columns, release the shell
   cap, tighten the card padding. Dedicated logged-out media block so
   the rules sit next to the desktop logged-out section. */
@media (max-width: 900px) {
	body.pmai-account-page.pmai-logged-out-account .entry-content .kt-inside-inner-col > .woocommerce {
		max-width: 100%;
	}
	body.pmai-account-page.pmai-logged-out-account #customer_login {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
	/* v2.0.29 — explicit mobile stacked placement: Login row 1, Register
	   row 2. !important needed to defeat the desktop placement above. */
	body.pmai-account-page.pmai-logged-out-account #customer_login > .u-column1,
	body.pmai-account-page.pmai-logged-out-account #customer_login > .col-1 {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}
	body.pmai-account-page.pmai-logged-out-account #customer_login > .u-column2,
	body.pmai-account-page.pmai-logged-out-account #customer_login > .col-2 {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}
	body.pmai-account-page.pmai-logged-out-account .woocommerce-form-login,
	body.pmai-account-page.pmai-logged-out-account .woocommerce-form-register,
	body.pmai-account-page.pmai-logged-out-account .lost_reset_password {
		padding: 20px !important;
	}
}

/* ===========================================================
   Logged-out notice placement (v2.0.52)
   ===========================================================
   The logged-out /my-account/ page has NO .woocommerce-MyAccount-content,
   so the in-flow notice fix earlier in this file (scoped to that container)
   never reaches it. Kadence Shop Kit therefore leaves the registration /
   login error as a position:fixed snackbar pinned to the viewport bottom
   (top/bottom/left set, z-index 100009) — when the user is scrolled near the
   footer it appears detached, overlapping the footer instead of the form.
   Fix: on the logged-out account page only, take the notices WRAPPER out of
   fixed positioning and back into normal flow so the notice renders inline at
   the top of the .woocommerce container, above the Login / Register columns.

   Nothing is hidden — no display:none / visibility / opacity. The notice and
   its red error styling (background / colour / shadow) are preserved; we only
   neutralise the fixed snackbar positioning and round the corners to match
   the glass aesthetic. Bottom spacing lives on the NOTICE, not the wrapper,
   so an empty wrapper stays zero-height (no gap above the forms) WITHOUT
   needing display:none. box-sizing:border-box keeps the notice's own padding
   inside its width so there is no horizontal overflow at narrow widths.

   Scoped strictly to body.pmai-account-page.pmai-logged-out-account
   .woocommerce > .woocommerce-notices-wrapper — so logged-in My Account
   notices (which live under .woocommerce-MyAccount-content) and every shop /
   cart / checkout / product snackbar are completely untouched.
   =========================================================== */
body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper {
	position: static !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 980px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	z-index: auto !important;
	pointer-events: auto !important;
}
body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper .woocommerce-error,
body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper .woocommerce-message,
body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper .woocommerce-info,
body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper .kwsb-snackbar-notice {
	position: relative !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 24px !important;
	box-sizing: border-box !important;
	border-radius: 14px !important;
}

@media (max-width: 900px) {
	body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper {
		max-width: 100% !important;
	}
	/* Tighter on mobile, but the 48px right gutter is preserved for the
	   .kwsb-close button (the snackbar's native 64px right padding proves it
	   exists) so the long error text never runs under the close control. */
	body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper .woocommerce-error,
	body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper .woocommerce-message,
	body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper .woocommerce-info,
	body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-notices-wrapper .kwsb-snackbar-notice {
		margin: 0 0 20px !important;
		padding: 14px 48px 14px 16px !important;
		font-size: 14px !important;
		line-height: 1.45 !important;
	}
}

/* ===========================================================
   Logged-out password-reset confirmation text (v2.0.53)
   ===========================================================
   The "Password reset email has been sent." confirmation renders as a
   STANDALONE .woocommerce-message that is a DIRECT child of .woocommerce
   (not inside .woocommerce-notices-wrapper), followed by an explanatory <p>.
   The v2.0.52 fix only matches notices INSIDE .woocommerce-notices-wrapper,
   so it never reached this message. The generic notice rule earlier in this
   file sets white text on .woocommerce-message but WITHOUT !important, so the
   standalone message kept WooCommerce's dark default. The sibling <p> has no
   logged-out white-text rule at all (those are scoped to the form containers,
   not .woocommerce > p), so it stayed dark too. Fix: give the direct-child
   message a readable glass card with white text, and recolour the
   immediately-following paragraph (and any link in it) to white.

   The paragraph uses `.woocommerce-message + p` (adjacent sibling) on purpose
   so ONLY the explanatory line right after the confirmation is recoloured.
   Register privacy text and any other .woocommerce > p are left untouched.
   Scoped strictly to body.pmai-account-page.pmai-logged-out-account. */
body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-message {
	color: rgba(255, 255, 255, 0.96) !important;
	background: rgba(255, 255, 255, 0.10) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 980px !important;
	margin: 0 auto 18px !important;
	padding: 16px 18px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
}
body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-message + p {
	color: rgba(255, 255, 255, 0.82) !important;
	width: 100% !important;
	max-width: 980px !important;
	margin: 0 auto !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.65 !important;
}
body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-message + p a {
	color: rgba(255, 255, 255, 0.96) !important;
	text-decoration-color: rgba(255, 255, 255, 0.45) !important;
}

@media (max-width: 900px) {
	body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-message,
	body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-message + p {
		max-width: 100% !important;
	}
	body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-message {
		padding: 14px 16px !important;
		font-size: 14px !important;
		line-height: 1.45 !important;
	}
	body.pmai-account-page.pmai-logged-out-account .woocommerce > .woocommerce-message + p {
		font-size: 14px !important;
		line-height: 1.6 !important;
	}
}

/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width: 900px) {
	/* Release the desktop sidebar grid AND override the desktop direct-child
	   placement widths. v2.0.4's desktop rules set width: 340px on the nav
	   wrap and grid-column on both children — those rules use a 6-component
	   selector chain, so general mobile selectors can't beat them. The fix
	   is to mirror the exact desktop chain here so equal-specificity rules
	   inside the media query win by source order. */
	body.pmai-account-page.pmai-logged-in-account .entry-content .kt-inside-inner-col > .woocommerce {
		display: block;
		/* v2.0.63 — the outer left/right gap around the account column is the
		   theme's content edge padding. Pull the whole column ~16px into that
		   padding on each side so the gap is roughly halved and the cards are
		   wider (content less squeezed). Width is compensated with calc so the
		   margin box still equals 100% — no horizontal scroll. To make the gap
		   smaller or larger, change the 16px (and the matching 32px) below. */
		max-width: none;
		width: calc(100% + 32px);
		margin-left: -16px;
		margin-right: -16px;
	}
	body.pmai-account-page.pmai-logged-in-account .entry-content .kt-inside-inner-col > .woocommerce > .account-navigation-wrap {
		width: 100%;
		max-width: none;
		min-width: 0;
		margin: 0 0 24px;
	}
	body.pmai-account-page.pmai-logged-in-account .entry-content .kt-inside-inner-col > .woocommerce > .account-navigation-wrap > .woocommerce-MyAccount-navigation {
		width: 100%;
		max-width: none;
		min-width: 0;
		margin: 0;
	}
	body.pmai-account-page.pmai-logged-in-account .entry-content .kt-inside-inner-col > .woocommerce > .woocommerce-MyAccount-content {
		width: 100%;
		max-width: none;
		min-width: 0;
		margin: 0;
		padding: 20px 14px !important;
	}

	/* Fallback for non-Kadence themes where the desktop direct-child chain
	   doesn't match — these general rules still apply. */
	body.pmai-account-page .account-navigation-wrap,
	body.pmai-account-page .woocommerce-MyAccount-navigation {
		max-width: 100%;
	}

	body.pmai-account-page .woocommerce-MyAccount-content {
		padding: 20px 14px !important;
	}

	/* Order action buttons — mobile/card layout (v2.0.48, label fix v2.0.49).
	   The actions cell is already display:flex (from the stacked-table td
	   rule). Its FIRST flex item is the responsive ::before label ("Actions",
	   from the generic td[data-title]::before rule); View/Track follow it.
	   v2.0.48 used justify-content:flex-end to cluster the buttons on the
	   right — but flex-end packs the ::before LABEL to the right too, so the
	   label drifted away from the Date/Status/Total column edge.
	   v2.0.49 fix: justify-content:flex-start (label sits at the left, aligned
	   like the other rows) and margin-right:auto on the ::before label to push
	   the View/Track group to the right edge. NOT space-between: with three
	   flex items (label, View, Track) space-between would spread the two
	   buttons apart; the single auto margin keeps them grouped, separated only
	   by the 12px gap. Buttons keep zero margins — parent gap is the sole
	   button spacing. */
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-start !important;
		gap: 12px !important;
		flex-wrap: wrap !important;
	}
	/* Keep the "Actions" label hard left; margin-right:auto absorbs all free
	   space after it, shoving the View/Track button group to the right edge.
	   Works identically for one button (View) or two (View + Track). */
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions::before {
		flex: 0 0 auto !important;
		margin-right: auto !important;
	}
	body.pmai-account-page .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
		min-height: 42px;
		padding: 11px 16px !important;
		font-size: 14.5px !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
		min-width: 74px !important;
		white-space: nowrap !important;
	}
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button + .button,
	body.pmai-account-page.pmai-endpoint-orders .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button + a.button {
		margin-left: 0 !important;
	}

	/* Wishlist inline Add-to-Cart — tighter padding for narrow product cards. */
	body.pmai-account-page .woocommerce-MyAccount-content p.product.add_to_cart_inline .button,
	body.pmai-account-page .woocommerce-MyAccount-content p.product.add_to_cart_inline .add_to_cart_button {
		min-width: 132px;
		padding: 11px 16px !important;
	}

	/* Wishlist switcher — tighter gap, dropdown spans available width. */
	body.pmai-account-page .woocommerce-MyAccount-content .woosw-switcher {
		gap: 12px;
	}
	body.pmai-account-page .woocommerce-MyAccount-content .woosw-switcher .woosw-switcher-dropdown {
		max-width: 100%;
	}

	/* Stack table rows as cards on small screens. data-title is added by
	   frontend.js; if JS hasn't run yet, cells still stack legibly. */
	body.pmai-account-page .woocommerce-MyAccount-content table.shop_table thead {
		display: none;
	}
	body.pmai-account-page .woocommerce-MyAccount-content table.shop_table,
	body.pmai-account-page .woocommerce-MyAccount-content table.shop_table tbody,
	body.pmai-account-page .woocommerce-MyAccount-content table.shop_table tr,
	body.pmai-account-page .woocommerce-MyAccount-content table.shop_table td {
		display: block;
		width: 100%;
	}
	body.pmai-account-page .woocommerce-MyAccount-content table.shop_table {
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	body.pmai-account-page .woocommerce-MyAccount-content table.shop_table tbody tr {
		background: var(--pmai-glass-soft);
		border: 1px solid var(--pmai-glass-border);
		border-radius: var(--pmai-radius);
		box-shadow: none;
		margin-bottom: 12px;
		padding: 8px 4px;
	}
	body.pmai-account-page .woocommerce-MyAccount-content table.shop_table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 10px 16px;
		border-top: 0;
		text-align: right;
	}
	body.pmai-account-page .woocommerce-MyAccount-content table.shop_table tbody td[data-title]::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--pmai-glass-muted);
		font-size: 12px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-align: left;
	}

	/* Orders table mobile — remove the table-level outer border so the
	   stacked row/card border isn't doubled up. The desktop `table.shop_table
	   { border: 1px ... !important }` rule at the top of the file otherwise
	   wins over the generic mobile `table.shop_table { border: 0 }` (which
	   has no !important). The row/card border (set on `tbody tr` above) is
	   intentionally NOT touched here — it stays. */
	body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table {
		border: 0 !important;
		border-top: 0 !important;
		border-right: 0 !important;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
	}

	/* Orders table mobile — keep stacked-card layout but with transparent
	   surface and white text so it reads on the glass content card. */
	body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr {
		background: transparent !important;
	}
	body.pmai-account-page .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td[data-title]::before {
		color: rgba(255, 255, 255, 0.78) !important;
	}
}

/* ===========================================================
   Reduced motion
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
	body.pmai-account-page *,
	body.pmai-account-page *::before,
	body.pmai-account-page *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}