/**
 * My Account: every endpoint, logged in and out.
 *
 * Loaded by fg_enqueue_account_styles() on is_account_page(). WooCommerce's
 * own stylesheets are disabled theme-wide (woocommerce_enqueue_styles =>
 * false), so everything here -- navigation, tables, forms, login -- otherwise
 * renders raw and inherits the external blog styles.
 *
 * SCOPING NOTE: on account pages .fp__woo-commerce sits on #wrapper (high
 * above #content > .fullpostentry > .woocommerce), so blog-style.css's
 * .fp__woo-commerce rules DO apply here -- including traps like
 * `.form-row { max-width: 400px }`. Selectors here scope with
 * body.woocommerce-account (+ #content where blog-style must be
 * out-ranked); external rules that tie on specificity win on load order,
 * so ties are not good enough.
 *
 * The external stylesheet dresses the account nav links as grey inline-block
 * buttons with a solid green active slab; the navigation rules below reset
 * all of that to a plain left-hand list, per design.
 *
 * Mobile navigation contract (extheader.php ~line 58): the
 * .woocommerce-MyAccount-navigation-mobile-button gets its label from the
 * active menu item and toggles `.show` on the nav <ul>. The button/ul
 * visibility rules below implement the other half of that.
 */

:root {
	--fg-green: #50ae26;
	--fg-green-dark: #46991f;
	--fg-ink: #1c1e21;
	--fg-muted: #6b7280;
	--fg-line: #e2e5e8;
	--fg-field: #b8bfc6;
	--fg-surface: #ffffff;
	--fg-radius: 0; /* square corners across the store, per design */
}

/* -------------------------------------------------------------------------
 * Container. #content owns the gutter, same deal as cart/checkout/shop.
 * ---------------------------------------------------------------------- */
body.woocommerce-account #content {
	max-width: 900px;
	margin: 0 auto;
	box-sizing: border-box;
}

body.woocommerce-account .fullpostentry,
body.woocommerce-account #blogcontent {
	max-width: none;
	width: 100%;
	padding: 0;
	font-family: Lato, arial, helvetica, sans-serif;
}

/* The template's top-right utility row (Return to shop / View cart) is
   simply gone on account pages: it fought the title from every angle the
   external styles floated it, and it duplicates navigation that already
   exists (the account menu, the dashboard links, the site header). */
body.woocommerce-account .woocommerce-nav {
	display: none;
}

/* Section titles keep the site's green underline from the external styles;
   just un-constrain them (500px max-width clips the rule short). */
body.woocommerce-account #content > h2,
body.woocommerce-account .woocommerce > h2,
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
	max-width: none;
	width: 100%;
	margin: 0 0 18px;
	box-sizing: border-box;
	text-align: left;
}

/* ...except the page title itself: the floated Return-to-shop / View-cart
   block sits on the same row and cuts the underline short of the right
   edge, so it reads as misaligned. No underline on the title at all. */
body.woocommerce-account #content > h2 {
	border: 0;
	border-bottom: 0;
	background: none;
	box-shadow: none;
	padding-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Notices. Same card treatment as checkout/product/shop.
 * ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce .woocommerce-message,
body.woocommerce-account .woocommerce .woocommerce-info,
body.woocommerce-account .woocommerce ul.woocommerce-error {
	box-shadow: none;
	outline: none;
	background: var(--fg-surface);
	background-color: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-left: 4px solid var(--fg-green);
	border-radius: var(--fg-radius);
	margin: 0 0 18px;
	padding: 13px 16px;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-ink);
	text-align: left;
}

body.woocommerce-account .woocommerce ul.woocommerce-error {
	border-left-color: #d63638;
	color: #b32d2e;
}

body.woocommerce-account .woocommerce ul.woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

/* Buttons inside notices ("Browse products"): quiet inline action, not a
   competing slab. */
body.woocommerce-account .woocommerce .woocommerce-message .button,
body.woocommerce-account .woocommerce .woocommerce-info .button {
	position: static;
	display: inline;
	margin: 0 0 0 6px;
	padding: 0;
	min-width: 0;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--fg-green);
	text-decoration: underline;
}

body.woocommerce-account .woocommerce .woocommerce-message .button:hover,
body.woocommerce-account .woocommerce .woocommerce-info .button:hover {
	color: var(--fg-green-dark);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Layout: navigation list on the left, content on the right. Logged out
 * there is no nav, so the flex row only applies once logged in.
 * ---------------------------------------------------------------------- */
body.woocommerce-account.logged-in .woocommerce {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

/* Plain list, no boxes. Every reset below strips the external stylesheet's
   grey-button treatment (inline-block, backgrounds, borders, shadows, and a
   solid green slab on the active item). */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
	flex: 0 0 180px;
	background: none;
	border: 0;
	padding: 2px 0 0;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li {
	display: block;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	list-style: none;
	text-align: left;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a {
	display: block;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 7px 0;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--fg-ink);
	text-align: left;
	text-decoration: none;
	text-transform: none;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover {
	background: none;
	background-color: transparent;
	color: var(--fg-green);
	opacity: 1;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a {
	background: none;
	background-color: transparent;
	color: var(--fg-green);
	font-weight: 700;
}

/* Desktop: the mobile dropdown trigger stays out of the way. */
body.woocommerce-account .woocommerce-MyAccount-navigation-mobile-button {
	display: none;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--fg-ink);
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content > p {
	margin: 0 0 14px;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content a {
	color: var(--fg-green);
}

/* -------------------------------------------------------------------------
 * Tables (orders, subscriptions, downloads, coupons, order/subscription
 * detail). Same treatment as the confirmation-page tables.
 * ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	max-width: none;
	margin: 0 0 18px;
	border-collapse: collapse;
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	box-shadow: none;
	background: var(--fg-surface);
	font-size: 14px;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--fg-line);
	text-align: left;
	vertical-align: middle;
	background: none;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table thead th {
	font-size: 13px;
	font-weight: 700;
	color: var(--fg-muted);
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table tbody tr:last-child th,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table tfoot th,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table tfoot td {
	border-top: 1px solid var(--fg-line);
	border-bottom: 0;
	font-weight: 700;
}

/* Action buttons (View / Pay / Cancel / Add payment / Switch Subscription /
   pagination...): small outline buttons, wherever they appear in the content
   area. Scoping this to the tables was a bug: the subscription actions sit
   OUTSIDE any table, so the external stylesheet painted them solid green
   while the content-link rule turned their text green -- green-on-green,
   invisible. Explicit primaries (form submits, the direct-child "Add payment
   method" link) override this further down. */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .button {
	position: static;
	float: none;
	display: inline-block;
	width: auto;
	margin: 2px 6px 2px 0;
	padding: 8px 14px;
	min-width: 0;
	background: var(--fg-surface);
	background-color: var(--fg-surface);
	border: 1px solid var(--fg-green);
	border-radius: var(--fg-radius);
	box-shadow: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fg-green);
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .button:hover {
	background-color: var(--fg-green);
	color: #fff;
	opacity: 1;
}

/* Orders pagination: Previous hugs the left, Next the right. */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-pagination {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
}

/* The generic button rule's 6px side margin would push Next off the table's
   right edge; the flex gap owns the spacing here. */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-pagination .button {
	margin: 0;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button--next {
	margin-left: auto;
}

/* The external stylesheet decorates forward/back links with arrow glyphs in
   absolutely-positioned pseudo-elements; unanchored inside this layout they
   drift to the viewport edge (the stray "›" beside the pagination). The
   buttons are labelled -- no pseudo decoration wanted on any of them. */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-pagination::before,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-pagination::after,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-pagination a::before,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-pagination a::after,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .button::before,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .button::after {
	content: none;
}

/* Notice buttons stay quiet inline links -- the generic .button rule above
   also matches them and would re-box them (same specificity, later wins). */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-message .button,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-info .button {
	display: inline;
	margin: 0 0 0 6px;
	padding: 0;
	background: none;
	background-color: transparent;
	border: 0;
	font-size: 14px;
	color: var(--fg-green);
	text-decoration: underline;
}

body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-message .button:hover,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-info .button:hover {
	background: none;
	background-color: transparent;
	color: var(--fg-green-dark);
}

/* -------------------------------------------------------------------------
 * Forms (account details, addresses, login, lost password, add payment
 * method). Field treatment matches checkout. Explicit height:auto because
 * the external stylesheet inflates bare inputs.
 * ---------------------------------------------------------------------- */
/* Forms hold a comfortable single-column width; the width limit lives HERE,
   on the form, not on the rows (blog-style caps .form-row at 400px, which
   made fields narrower than their own fieldset -- see the row rule below). */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content form {
	max-width: 520px;
}

body.woocommerce-account .woocommerce .form-row {
	float: none;
	width: 100%;
	/* blog-style.css caps .fp__woo-commerce .form-row at max-width:400px --
	   the "inputs are 60% wide" mystery. The inputs were always 100% wide;
	   their ROWS were capped. Rows fill the form; the FORM carries the cap. */
	max-width: none;
	margin: 0 0 14px;
	padding: 0;
	overflow: visible;
	text-align: left;
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce .form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-ink);
}

body.woocommerce-account .woocommerce .form-row .required {
	color: var(--fg-muted);
	text-decoration: none;
}

/* #content scope out-ranks blog-style's .form-row input sizing
   (padding 10px 5px). The narrow-fields bug was never here -- it was
   max-width:400px on the ROW, fixed above. */
body.woocommerce-account #content .woocommerce input.input-text,
body.woocommerce-account #content .woocommerce .form-row select,
body.woocommerce-account #content .woocommerce .form-row textarea {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 11px 12px;
	border: 1px solid var(--fg-field);
	border-radius: var(--fg-radius);
	background: var(--fg-surface);
	font-family: Lato, arial, helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--fg-ink);
}

body.woocommerce-account #content .woocommerce input.input-text:focus,
body.woocommerce-account #content .woocommerce .form-row select:focus,
body.woocommerce-account #content .woocommerce .form-row textarea:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
	outline: none;
}

/* Field descriptions ("This will be how your name will be displayed..."). */
body.woocommerce-account .woocommerce .form-row span em,
body.woocommerce-account .woocommerce .form-row .description {
	display: block;
	margin: 5px 0 0;
	font-size: 12px;
	font-style: normal;
	color: var(--fg-muted);
}

/* Checkbox rows (e.g. Subscriptions' "Update the Billing Address contact
   used for all future renewals"): checkbox inline with its text, quiet
   weight -- the block-label rule above otherwise stacks the box on its own
   centered line above the sentence. */
body.woocommerce-account .woocommerce .form-row .woocommerce-input-wrapper {
	display: block;
	text-align: left;
}

/* Block + absolutely-positioned box, NOT flex: the label mixes bare text
   nodes with inline tags (<strong>, the optional span), and a flex container
   promotes every chunk to its own column -- the sentence shattered into a
   weird multi-column layout. Plain flow keeps it one sentence. */
body.woocommerce-account .woocommerce .form-row label.checkbox {
	display: block;
	position: relative;
	margin: 0;
	padding-left: 24px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fg-ink);
	text-align: left;
	cursor: pointer;
}

body.woocommerce-account .woocommerce .form-row label.checkbox input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 2px;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--fg-green);
}

body.woocommerce-account .woocommerce .form-row label.checkbox .optional {
	color: var(--fg-muted);
}

/* WooCommerce's password-reveal toggle. Its JS wraps password fields in
   span.password-input and injects span.show-password-input; the icon itself
   normally comes from WC's stylesheet (disabled theme-wide), so it is drawn
   here as an inline SVG eye instead -- matching the wp-login treatment.
   WC toggles .display-password on the span when the password is shown. */
body.woocommerce-account .woocommerce span.password-input {
	position: relative;
	display: block;
}

body.woocommerce-account .woocommerce span.password-input input {
	padding-right: 46px;
}

body.woocommerce-account .woocommerce .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: transparent center / 22px no-repeat;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
}

body.woocommerce-account .woocommerce .show-password-input.display-password {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94'/><path d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/><path d='M14.12 14.12A3 3 0 1 1 9.88 9.88'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
}

/* Password strength meter (lost-password reset, account details): visible
   feedback -- WooCommerce DISABLES the submit until the meter clears, and
   with the meter unstyled the dead button read as "form not working". */
body.woocommerce-account .woocommerce .woocommerce-password-strength {
	display: block;
	margin: 8px 0 0;
	padding: 8px 10px;
	border: 1px solid var(--fg-line);
	background: var(--fg-surface);
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	color: var(--fg-ink);
}

body.woocommerce-account .woocommerce .woocommerce-password-strength.short,
body.woocommerce-account .woocommerce .woocommerce-password-strength.bad {
	border-left: 4px solid #d63638;
}

body.woocommerce-account .woocommerce .woocommerce-password-strength.good,
body.woocommerce-account .woocommerce .woocommerce-password-strength.strong {
	border-left: 4px solid var(--fg-green);
}

body.woocommerce-account .woocommerce .woocommerce-password-hint {
	display: block;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--fg-muted);
}

/* The strength gate disables the submit -- make disabled LOOK disabled. */
body.woocommerce-account .woocommerce button.button[type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

body.woocommerce-account .woocommerce fieldset {
	margin: 20px 0 14px;
	padding: 16px;
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
}

body.woocommerce-account .woocommerce fieldset legend {
	padding: 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--fg-ink);
}

body.woocommerce-account .woocommerce .clear {
	clear: both;
}

/* Primary form submits (Save changes / Save address / Log in). */
body.woocommerce-account .woocommerce button.button[type="submit"],
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content > .button {
	display: inline-block;
	margin: 4px 0 0;
	padding: 13px 22px;
	min-width: 0;
	border: 0;
	border-radius: var(--fg-radius);
	background: var(--fg-green);
	background-color: var(--fg-green);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.woocommerce-account .woocommerce button.button[type="submit"]:hover,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content > .button:hover {
	background-color: var(--fg-green-dark);
	color: #fff;
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Addresses: two cards side by side.
 * ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce .woocommerce-Addresses {
	display: flex;
	gap: 18px;
	width: 100%;
}

body.woocommerce-account .woocommerce .woocommerce-Address {
	flex: 1 1 0;
	float: none;
	width: auto;
	max-width: none;
	padding: 16px;
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	box-sizing: border-box;
}

/* Title block with the edit link pinned top-right. Absolute, not flex: with
   flex the two cards could break differently (one header wrapped, one not)
   depending on what the external styles did to the heading's width. Pinned,
   both cards are identical by construction. */
body.woocommerce-account .woocommerce .woocommerce-Address-title {
	display: block;
	position: relative;
	margin: 0 0 10px;
	padding: 0 150px 10px 0;
	border-bottom: 1px solid var(--fg-line);
}

body.woocommerce-account .woocommerce .woocommerce-Address-title h2 {
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
	width: auto;
	font-size: 16px;
	font-weight: 700;
	color: var(--fg-ink);
}

/* Order / subscription detail pages: the billing + shipping address block
   (woocommerce-customer-details). Unstyled it rode the external 50% floats
   and italics -- cramped columns with wrapping address text. Same cards as
   the Addresses page. */
body.woocommerce-account .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses {
	display: flex;
	gap: 18px;
	width: 100%;
}

body.woocommerce-account .woocommerce .woocommerce-customer-details .woocommerce-column {
	flex: 1 1 0;
	float: none;
	width: auto;
	max-width: none;
	min-width: 0;
	padding: 16px;
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce .woocommerce-customer-details .woocommerce-column__title {
	max-width: none;
	width: auto;
	margin: 0 0 10px;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 1px solid var(--fg-line);
	font-size: 16px;
	font-weight: 700;
	color: var(--fg-ink);
}

body.woocommerce-account .woocommerce .woocommerce-customer-details address {
	margin: 0;
	border: 0;
	padding: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--fg-muted);
}

/* Phone / email annotations inside the address block. */
body.woocommerce-account .woocommerce .woocommerce-customer-details--phone,
body.woocommerce-account .woocommerce .woocommerce-customer-details--email {
	margin: 8px 0 0;
	font-style: normal;
}

body.woocommerce-account .woocommerce .woocommerce-Address-title a.edit {
	position: absolute;
	right: 0;
	top: 2px;
	margin: 0;
	padding: 0;
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fg-green);
	text-decoration: none;
	white-space: nowrap;
}

body.woocommerce-account .woocommerce .woocommerce-Address-title a.edit:hover {
	color: var(--fg-green-dark);
	text-decoration: underline;
}

body.woocommerce-account .woocommerce .woocommerce-Address address {
	margin: 0;
	border: 0;
	padding: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--fg-muted);
}

/* -------------------------------------------------------------------------
 * Logged out: the login card (also lost-password / reset forms).
 * ---------------------------------------------------------------------- */
/* The heading's site-standard green underline stops at the card edge --
   full-content width dwarfed the 440px card beneath it. */
body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
	max-width: 440px;
}

body.woocommerce-account:not(.logged-in) .woocommerce > form {
	max-width: 440px;
	margin: 0 0 20px;
	padding: 22px;
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	box-sizing: border-box;
}

/* Remember me: checkbox and label on one quiet line above the button.
   label.woocommerce-form-login__rememberme in the selector: the generic
   `.form-row label` rule above carries higher specificity than a lone class
   chain, and silently beat this flex layout once already (checkbox stacked
   on its own line). */
body.woocommerce-account .woocommerce .form-row label.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 400;
	color: var(--fg-ink);
	cursor: pointer;
}

body.woocommerce-account .woocommerce .form-row label.woocommerce-form-login__rememberme span {
	display: inline;
	margin: 0;
}

body.woocommerce-account .woocommerce .form-row label.woocommerce-form-login__rememberme input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--fg-green);
}

body.woocommerce-account .woocommerce button.woocommerce-form-login__submit {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 22px;
}

body.woocommerce-account .woocommerce .lost_password {
	margin: 12px 0 0;
	font-size: 13px;
	text-align: left;
}

body.woocommerce-account .woocommerce .lost_password a {
	color: var(--fg-green);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Narrow screens: nav collapses into the extheader.php-driven dropdown,
 * address cards stack, tables fold into label/value rows.
 * ---------------------------------------------------------------------- */
@media (max-width: 800px) {
	body.woocommerce-account #content {
		padding-left: 10px;
		padding-right: 10px;
	}

	body.woocommerce-account.logged-in .woocommerce {
		display: block;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
		margin: 0 0 18px;
		padding: 0;
	}

	/* The dropdown trigger. extheader.php stamps the active item's label on
	   it and toggles `.show` on the ul. #content in the selector: the
	   external stylesheet positions this button with an #content-prefixed
	   rule (id specificity), which centred it at partial width while the
	   panel below kept full width -- the visible misalignment. */
	body.woocommerce-account #content .woocommerce-MyAccount-navigation-mobile-button {
		display: block;
		float: none;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		padding: 12px 14px;
		background: var(--fg-surface);
		border: 1px solid var(--fg-field);
		border-radius: var(--fg-radius);
		font-family: Lato, arial, helvetica, sans-serif;
		font-size: 15px;
		font-weight: 600;
		color: var(--fg-ink);
		text-align: left;
		cursor: pointer;
		position: relative;
	}

	body.woocommerce-account #content .woocommerce-MyAccount-navigation-mobile-button::after {
		content: "";
		position: absolute;
		right: 14px;
		top: 50%;
		width: 7px;
		height: 7px;
		margin-top: -6px;
		border: solid var(--fg-muted);
		border-width: 0 2px 2px 0;
		transform: rotate( 45deg );
	}

	body.woocommerce-account #content .woocommerce .woocommerce-MyAccount-navigation ul {
		display: none;
	}

	/* The open dropdown panel is the one place the nav needs a box. Width,
	   position and margins pinned so it sits flush under the full-width
	   button whatever the external stylesheet says. */
	body.woocommerce-account #content .woocommerce .woocommerce-MyAccount-navigation ul.show {
		display: block;
		position: static;
		float: none;
		width: 100%;
		margin: -1px 0 0;
		box-sizing: border-box;
		background: var(--fg-surface);
		border: 1px solid var(--fg-field);
		border-radius: var(--fg-radius);
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul.show li a {
		padding: 11px 14px;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul.show li + li {
		border-top: 1px solid var(--fg-line);
	}

	body.woocommerce-account .woocommerce .woocommerce-Addresses {
		flex-direction: column;
	}

	body.woocommerce-account .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses {
		flex-direction: column;
	}

	/* Responsive tables: WooCommerce stamps each cell's heading in
	   data-title; fold rows into label/value pairs. */
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table_responsive thead {
		display: none;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table_responsive,
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table_responsive tbody,
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table_responsive tr {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table_responsive tr {
		border-bottom: 1px solid var(--fg-line);
		padding: 6px 0;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table_responsive tr:last-child {
		border-bottom: 0;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding: 6px 12px;
		border: 0;
		text-align: right;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table_responsive td::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--fg-muted);
		text-align: left;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.shop_table_responsive td:empty {
		display: none;
	}

	/* Orders, compacted: each order folds to two lines, like the membership
	   plan rows -- number and date up top, status/total and View below.
	   The label/value folding above stays as the fallback for other tables;
	   these rules out-specify it via the table class. */
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table tr {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"num    date   actions"
			"status total  actions";
		column-gap: 10px;
		row-gap: 2px;
		align-items: center;
		padding: 9px 12px;
	}

	/* The number cell is a <th scope="row"> in core's template -- every
	   cell rule here covers both. */
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table td,
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th {
		display: block;
		padding: 0;
		border: 0;
		text-align: left;
	}

	/* Values are self-explanatory in this shape (#, date, status, $). */
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table td::before,
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th::before {
		content: none;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number,
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number {
		grid-area: num;
		font-size: 14px;
		font-weight: 700;
	}


	/* Date rides next to the number, left-grouped -- right-aligning it into
	   the middle of the row was the visual clutter. */
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date {
		grid-area: date;
		justify-self: start;
		text-align: left;
		font-size: 12px;
		color: var(--fg-muted);
		white-space: nowrap;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
		grid-area: status;
		font-size: 12px;
		color: var(--fg-muted);
		white-space: nowrap;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
		grid-area: total;
		justify-self: start;
		font-size: 12px;
		color: var(--fg-ink);
		white-space: nowrap;
	}

	/* View spans both lines on the right, vertically centred -- the explicit
	   affordance (a stretched-link row alone didn't read as clickable). */
	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
		grid-area: actions;
		text-align: right;
	}

	body.woocommerce-account .woocommerce .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button {
		margin: 0;
		padding: 7px 12px;
		font-size: 12px;
	}
}

/* -------------------------------------------------------------------------
 * SelectWoo (Country / State on the address editor). Ported from
 * checkout.css: the closed control's own CSS fixes it at 28px tall, so it
 * never matched the text inputs; and the open dropdown is appended to
 * <body>, outside every content scope, so it needs body-level rules.
 * ---------------------------------------------------------------------- */
body.woocommerce-account .woocommerce .select2-container {
	display: block;
	vertical-align: top;
}

body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single {
	height: auto;
	min-height: 46px;
	padding: 11px 12px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.3;
	font-size: 16px;
	/* !important: blog-style forces this span #000 !important (see the same
	   counter in checkout.css). */
	color: var(--fg-ink) !important;
}

body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	height: 20px;
	transform: translateY(-50%);
}

body.woocommerce-account .woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-account .woocommerce .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
}

/* The body-appended dropdown panel. */
body.woocommerce-account .select2-dropdown {
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
	color: var(--fg-ink);
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.10 );
}

body.woocommerce-account .select2-search--dropdown {
	padding: 8px;
}

/* Normal input-box sizing for the search field; 16px also stops iOS zooming. */
body.woocommerce-account .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 11px 12px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background: var(--fg-surface);
	font-family: Lato, arial, helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--fg-ink);
	-webkit-appearance: none;
	appearance: none;
}

body.woocommerce-account .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba( 80, 174, 38, 0.15 );
	outline: none;
}

/* Results list: bounded height with a slim, quiet scrollbar. */
body.woocommerce-account .select2-results__options {
	max-height: 280px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--fg-field) transparent;
}

body.woocommerce-account .select2-results__options::-webkit-scrollbar {
	width: 5px;
}

body.woocommerce-account .select2-results__options::-webkit-scrollbar-thumb {
	background: var(--fg-field);
}

body.woocommerce-account .select2-results__options::-webkit-scrollbar-track {
	background: transparent;
}

body.woocommerce-account .select2-results__option {
	padding: 10px 12px;
	font-size: 15px;
	line-height: 1.35;
}

body.woocommerce-account .select2-results__option--highlighted[aria-selected],
body.woocommerce-account .select2-results__option--highlighted {
	background: var(--fg-green);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Dark mode ("theme-fg" cookie -> body.dark-mode; the external styles turn
 * #wrapper near-black). Every rule in this file reads the tokens, so dark
 * support is this flip. Anything hardcoded light above was converted to a
 * token when this block landed -- keep it that way.
 * ---------------------------------------------------------------------- */
body.dark-mode {
	--fg-ink: #e8eaed;
	--fg-muted: #9aa1a8;
	--fg-line: #3a3d41;
	--fg-field: #5b6167;
	--fg-surface: #242628;
}