/*
 * LT Shop Tables — WooCommerce My Account.
 *
 * Loaded only on is_account_page(), and every selector below is scoped to
 * body.lt-st-account, so nothing here can reach the rest of the site even if
 * the stylesheet is loaded by accident.
 *
 * WooCommerce's own markup is styled exactly as it stands: no template is
 * overridden, and every figure on these pages is still printed by WooCommerce
 * or by LTB2B. This file reads no price and adds no content — it only paints.
 *
 * Palette from lt-shop-tokens.css.
 *
 * Written as the sibling of lt-shop-cart.css and in the same way, because it
 * is doing the same job one journey later: the cart skins WooCommerce's order
 * pages, this skins WooCommerce's account pages, and a trade buyer moves
 * between them in one session. Where a value is shared with that file — the
 * form-field and button levers, the page title, the 46px navy table head, the
 * 768px stacking breakpoint — it is repeated here deliberately rather than
 * being loosened, so the two pages cannot drift apart.
 *
 * Three things make the selectors longer than they look like they need to be:
 *
 *   1. Neve 4.2 styles the account pages through body.woocommerce-account, and
 *      four of those rules carry !important:
 *          body.woocommerce-account table          { border: 0 !important }
 *          body.woocommerce-account table td       { border: 0 !important }
 *          body.woocommerce-account table th, td   { padding: 10px !important }
 *      Every !important in this file answers one of those, or unwinds one of
 *      this file's own answers inside a media query; each is named at the rule.
 *   2. WooCommerce lays the two account columns out with floats in
 *      woocommerce-layout.css and undoes them in woocommerce-smallscreen.css,
 *      which is enqueued with its own media attribute. A width declared here
 *      outside a media query would beat the small-screen sheet on specificity
 *      whatever the viewport, so both halves of that layout are stated inside
 *      the matching query and 768px is named twice on purpose.
 *   3. LTB2B adds nine items to the account menu (Shop, Store, Cart, Standing
 *      Orders, Claims, Invoices, Credit Account, Previous Purchases, My Team)
 *      and six endpoints of its own. Its tables are .shop_table but not
 *      .shop_table_responsive and its cells carry no data-title, so
 *      WooCommerce's stacked small-screen layout does not apply to them — see
 *      the scroll box in the table section, which is what keeps them off the
 *      page's horizontal scrollbar.
 *
 * LTB2B also prints a handful of inline style attributes on the My Team and
 * Standing Orders forms (display:inline-flex, width:100%). Inline styles win
 * over anything here, so this file leaves those properties alone rather than
 * escalating to !important to fight markup that is not misbehaving.
 */

/* ============================================================
   theme levers, focus, page title
   ============================================================ */

/*
 * Neve drives every button and form field from these custom properties and
 * declares them on :root, so redefining them restyles the controls this file
 * never names — LTB2B's own account forms included — with no specificity fight
 * at all. Declared on WooCommerce's own .woocommerce wrapper rather than on
 * <body> so the site header and footer keep the buttons they have on every
 * other page. Same values as lt-shop-cart.css: a field on Account details and
 * a field on the checkout are the same field.
 */
body.lt-st-account .woocommerce {
	--formfieldbgcolor: var(--lt-st-surface);
	--formfieldbordercolor: var(--lt-st-line);
	--formfieldborderwidth: 1px;
	--formfieldborderradius: 9px;
	--formfieldcolor: var(--lt-st-ink);
	--formfieldpadding: 10px 14px;
	--formfieldfontsize: 14.5px;
	--formfieldlineheight: 1.45;
	--formfieldtexttransform: none;

	--primarybtnbg: var(--lt-st-brand);
	--primarybtnhoverbg: var(--lt-st-brand);
	--primarybtncolor: #fff;
	--primarybtnhovercolor: #fff;
	--primarybtnborderwidth: 0;
	--primarybtnborderradius: 9px;
	--primarybtnpadding: 12px 20px;
	--primarybtnshadow: none;

	--secondarybtnbg: var(--lt-st-surface);
	--secondarybtnhoverbg: var(--lt-st-brand);
	--secondarybtncolor: var(--lt-st-brand);
	--secondarybtnhovercolor: #fff;
	--secondarybtnborderwidth: 1.5px;
	--secondarybtnborderradius: 9px;
	--secondarybtnpadding: 11px 18px;

	--btnfontweight: 700;
	--btnfs: 14px;
	--btnlineheight: 1;

	color: var(--lt-st-ink);
}

body.lt-st-account .woocommerce :is(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--lt-st-amber);
	outline-offset: 2px;
}

/*
 * The shop's page-title treatment, hooked to nothing. Neve reads the title's
 * alignment from --textalign, so centring it is a matter of setting the
 * theme's own variable rather than overriding the theme's rule; a per-page
 * title alignment set in the page editor is an inline style and still wins,
 * which is the right way round.
 *
 * The margin replaces Neve's own `.nv-page-title-wrap { margin-top: 60px }`,
 * which put 60px of empty page above "My account". The home page has no title
 * wrap at all, so its content starts straight after the header — which is the
 * gap the owner noticed. 20px matches `.lt-st-pagetitle` on the shop archives,
 * so the two land level.
 */
body.lt-st-account .nv-page-title-wrap {
	--textalign: center;
	margin-top: 20px;
}

body.lt-st-account .nv-page-title-wrap .nv-page-title h1 {
	font-family: var(--lt-st-display);
	font-weight: 600;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	margin: 0;
}

/* The 56px amber rule under the title, drawn on the theme's own h1. */
body.lt-st-account .nv-page-title-wrap .nv-page-title h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--lt-st-amber);
	margin: 12px auto 0;
}

/* ============================================================
   the two columns
   ============================================================ */

/*
 * WooCommerce floats the navigation and the content past each other. With
 * fifteen menu items the navigation is routinely the taller of the two — an
 * endpoint whose whole content is "No invoices yet." makes that certain — and
 * an uncleared float that tall escapes the wrapper and lands on the footer, so
 * the wrapper is made to contain them.
 */
body.lt-st-account .woocommerce::after {
	content: "";
	display: block;
	clear: both;
}

/*
 * 769px and 768px below: WooCommerce's own small-screen stylesheet drops both
 * floats and takes both columns to 100% at max-width 768px, and it does that
 * through a media attribute on the <link> rather than a query in the file. A
 * width declared here outside a query would outrank it at every viewport, so
 * the desktop layout is confined to the query above that breakpoint and the
 * stacked layout is restated below it.
 *
 * 26/70 rather than WooCommerce's 30/68: the navigation holds short labels and
 * the content holds tables, so the room is better spent on the right, and the
 * 4% left over is the gutter.
 */
@media (min-width: 769px) {
	body.lt-st-account .woocommerce .woocommerce-MyAccount-navigation {
		float: left;
		width: 26%;
	}

	body.lt-st-account .woocommerce .woocommerce-MyAccount-content {
		float: right;
		width: 70%;
	}
}

@media (max-width: 768px) {
	body.lt-st-account .woocommerce .woocommerce-MyAccount-navigation,
	body.lt-st-account .woocommerce .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}
}

/* ============================================================
   the navigation card
   ============================================================ */

/*
 * One card, hairline border, 12px radius: the same surface as the shop's
 * category tiles and the cart's panels. No shadow and no amber edge — on the
 * shop and the cart those belong to the basket, and the navigation is not the
 * thing being decided on this page.
 *
 * Neve's own version of this list is a 2px --nv-light-bg box with 2px
 * separators; the border and radius here replace it, and overflow: hidden is
 * what lets the filled active row reach the card's rounded corners.
 */
body.lt-st-account .woocommerce-MyAccount-navigation ul {
	display: block;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	background: var(--lt-st-surface);
	border: 1px solid var(--lt-st-line);
	border-radius: 12px;
	overflow: hidden;
}

body.lt-st-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.lt-st-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	/* Fifteen rows at 42px is a long column whichever way it is cut, so the row
	   is kept to a comfortable minimum rather than the theme's 15px 20px. */
	padding: 11px 15px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lt-st-ink);
	text-decoration: none;
	/* Neve pulls each row up by a pixel to collapse its 2px separators; with
	   one hairline per row there is nothing to collapse. */
	margin-top: 0;
	border-bottom: 1px solid var(--lt-st-line);
	transition: background-color .12s ease, color .12s ease;
}

body.lt-st-account .woocommerce-MyAccount-navigation ul li:last-child a {
	border-bottom: 0;
}

body.lt-st-account .woocommerce-MyAccount-navigation ul li a:hover,
body.lt-st-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
	color: var(--lt-st-brand);
	background: var(--lt-st-ground);
}

/*
 * The link items that leave this page — Shop, and Cart for an organisation
 * member — used to carry the shop's ground tint, to read as one exit rather
 * than as account pages that never look current.
 *
 * Removed at the owner's request. It only worked as a group: LTB2B adds Cart
 * (and, before it was retired, Store) for organisation members but adds Shop
 * to every account, so a staff account with no organisation saw one tinted row
 * among twelve — which reads as a fault, not as a category. The current row is
 * the only thing that should be picked out here.
 */

/*
 * The current endpoint, filled navy — the shop's .lt-st-chip.is-on, one column
 * over. The class is on the <li> and the paint has to cover the whole row, so
 * the row carries the fill and the link carries the text colour.
 *
 * border-left is dropped here rather than on the plain row above because Neve
 * puts border-left: 5px solid --nv-primary-accent on .is-active itself, and
 * only a selector naming that class outranks it; against a filled row that bar
 * reads as a stray blue edge.
 */
body.lt-st-account .woocommerce-MyAccount-navigation ul li.is-active {
	background: var(--lt-st-deep);
	border-left: 0;
}

body.lt-st-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.lt-st-account .woocommerce-MyAccount-navigation ul li.is-active a:hover,
body.lt-st-account .woocommerce-MyAccount-navigation ul li.is-active a:focus-visible {
	color: #fff;
	background: transparent;
	/* Transparent, not a lighter line: the row's navy shows through and the
	   filled row reads as one block. */
	border-bottom-color: transparent;
}

/* ============================================================
   the content column
   ============================================================ */

body.lt-st-account .woocommerce-MyAccount-content {
	color: var(--lt-st-ink);
	font-size: 14.5px;
	line-height: 1.6;
	/* min-width: 0 so a wide table's scroll box measures itself against the
	   column rather than the other way round. */
	min-width: 0;
}

/*
 * :not(.button) because Neve colours a WooCommerce button from
 * --primarybtncolor through `.woocommerce a.button`, and a plain descendant
 * selector here would outrank it and paint every solid button's label brand
 * blue on a brand blue fill.
 */
body.lt-st-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--lt-st-brand);
}

/*
 * Neve borrows the h3 size for h2 on these pages; the shop's headings are
 * sized in px and set in the display face, so both are named here. Every
 * endpoint opens with one — "Invoices", "My Team", "Your Standing Orders" —
 * and LTB2B nests h3 and h4 under them on My Team.
 */
body.lt-st-account .woocommerce-MyAccount-content h2 {
	font-family: var(--lt-st-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 14px;
}

body.lt-st-account .woocommerce-MyAccount-content h2 + h3,
body.lt-st-account .woocommerce-MyAccount-content h3 {
	font-family: var(--lt-st-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.2;
	margin: 26px 0 12px;
}

body.lt-st-account .woocommerce-MyAccount-content h4 {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--lt-st-ink-soft);
	margin: 18px 0 10px;
}

/*
 * A readable measure for prose only. The cap is on the paragraphs and the
 * formatted addresses rather than on the column, because the column also holds
 * tables and a table wants every pixel it can get.
 */
body.lt-st-account .woocommerce-MyAccount-content > p,
body.lt-st-account .woocommerce-MyAccount-content > form > p,
body.lt-st-account .woocommerce-MyAccount-content address,
body.lt-st-account .woocommerce-MyAccount-content p.description {
	max-width: 70ch;
}

body.lt-st-account .woocommerce-MyAccount-content p.description,
body.lt-st-account .woocommerce-MyAccount-content .woocommerce-privacy-policy-text {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--lt-st-ink-soft);
}

body.lt-st-account .woocommerce-MyAccount-content address {
	font-style: normal;
	line-height: 1.6;
	color: var(--lt-st-ink-soft);
}

/*
 * WooCommerce deliberately strips <mark> back to bold body text inside the
 * account content. The order number and date in "Order #123 was placed on …"
 * keep that reading; only the status becomes a pill, further down.
 */
body.lt-st-account .woocommerce-MyAccount-content mark:is(.order-number, .order-date) {
	background: none;
	color: var(--lt-st-ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   tables: orders, downloads, invoices, credit, standing orders,
   previous purchases, My Team
   ============================================================ */

/*
 * Every table in the account column gets the shop's table: navy head, hairline
 * rows, 12px radius on the container.
 *
 * The container is the table itself, blockified. There is no wrapper element to
 * scroll — WooCommerce prints its tables as direct children of the content
 * column and LTB2B prints six more the same way — and a table box cannot
 * scroll, so display: block makes the <table> a block that can, and the rows
 * inside it are laid out by the anonymous table box the browser generates
 * around them. Column alignment, border-collapse and border-spacing all still
 * behave: border-collapse is inherited, so the anonymous table takes the
 * separate value set here, which is what keeps the border-radius.
 *
 * The pair of width declarations is the point of the technique. An anonymous
 * table shrinks to fit its own content, so a block left at 100% would leave
 * white space beside the navy head of a three-column table; width: max-content
 * hugs it instead, and max-width: 100% caps a wide one at the column so the
 * table scrolls inside itself rather than dragging the page sideways. The
 * width: auto above it is the fallback for a browser that does not know
 * max-content: the gap comes back, nothing breaks.
 *
 * This is also what covers LTB2B's tables, which are .shop_table without
 * .shop_table_responsive and have no data-title on their cells, so
 * WooCommerce's stacked small-screen layout never reaches them.
 */
body.lt-st-account .woocommerce-MyAccount-content table {
	display: block;
	width: auto;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 26px;
	font-size: 13.5px;
	background: var(--lt-st-surface);
	/* Neve: body.woocommerce-account table { border: 0 !important } */
	border: 1px solid var(--lt-st-line) !important;
	border-radius: 12px;
	/* separate, not collapse: a collapsed table discards its border-radius. */
	border-collapse: separate;
	border-spacing: 0;
	/* Neve sizes in-table buttons from these two; restated so a row action
	   matches the outline buttons further down rather than the theme's. */
	--primarybtnpadding: 8px 14px;
	--secondarybtnpadding: 7px 13px;
	--btnfs: 12.5px;
}

body.lt-st-account .woocommerce-MyAccount-content table thead,
body.lt-st-account .woocommerce-MyAccount-content table tbody,
body.lt-st-account .woocommerce-MyAccount-content table tfoot {
	border: 0;
	background: none;
}

body.lt-st-account .woocommerce-MyAccount-content table thead th {
	background: var(--lt-st-deep);
	color: #fff;
	text-align: left;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
	border: 0;
	/* Neve: body.woocommerce-account table th, td { padding: 10px 10px
	   !important } */
	padding: 11px 14px !important;
}

/* 11px, not 12px: the cell corner sits one border-width inside the table's. */
body.lt-st-account .woocommerce-MyAccount-content table thead th:first-child {
	border-top-left-radius: 11px;
}

/*
 * The last column is the action column on every endpoint that has one — View,
 * Download PDF, Save, Remove — and Neve already right-aligns the cell. Stated
 * on the header too so the column reads as one column, and stated on the cell
 * as well so it does not depend on the theme for it.
 */
body.lt-st-account .woocommerce-MyAccount-content table thead th:last-child {
	border-top-right-radius: 11px;
	text-align: right;
}

body.lt-st-account .woocommerce-MyAccount-content table tbody td,
body.lt-st-account .woocommerce-MyAccount-content table tbody th {
	border: 0;
	vertical-align: middle;
	color: var(--lt-st-ink);
	/*
	 * Lining figures for every cell, not only the ones this file can name. The
	 * reference, date and quantity columns LTB2B prints carry no class of their
	 * own, and tabular figures change nothing about a cell holding words.
	 */
	font-variant-numeric: tabular-nums;
	/* Neve: body.woocommerce-account table th, td { padding: 10px 10px
	   !important } */
	padding: 11px 14px !important;
}

body.lt-st-account .woocommerce-MyAccount-content table tbody td:last-child {
	text-align: right;
}

/*
 * The separator is drawn by every row that follows another one, rather than by
 * every row and then removed from the first: it saves unwinding a rule that
 * only carries !important because Neve's does.
 *
 * Neve: body.woocommerce-account table td { border: 0 !important }
 */
body.lt-st-account .woocommerce-MyAccount-content table tbody tr + tr td,
body.lt-st-account .woocommerce-MyAccount-content table tbody tr + tr th {
	border-top: 1px solid var(--lt-st-line) !important;
}

/*
 * The tint is on the row, not on its cells. Neve forces every cell in an
 * account table transparent, so a row's colour has to come from the row
 * anyway — and the status cell further down is an inline-block rather than a
 * cell, so a tint painted cell by cell would skip it and leave a white notch
 * across the hovered row.
 */
body.lt-st-account .woocommerce-MyAccount-content table tbody tr:hover {
	background: var(--lt-st-ground);
}

body.lt-st-account .woocommerce-MyAccount-content table tbody th {
	font-weight: 600;
	color: var(--lt-st-ink-soft);
}

body.lt-st-account .woocommerce-MyAccount-content table td a:not(.button) {
	color: var(--lt-st-brand);
	font-weight: 600;
	text-decoration: none;
}

body.lt-st-account .woocommerce-MyAccount-content table td a:not(.button):hover {
	text-decoration: underline;
}

/* ---- money and dates ---- */

/*
 * wc_price() is the only thing that prints money on any of these endpoints —
 * WooCommerce's order totals and LTB2B's invoice, credit and product columns
 * all go through it — so its span is the hook, and no column has to be named
 * or counted. Amber ink and tabular figures, as in the shop's price column.
 *
 * Not confined to the tables: the Credit Account endpoint states the limit, the
 * balance and the credit available as three paragraphs, and those are the three
 * most important figures on the page.
 */
body.lt-st-account .woocommerce-MyAccount-content .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--lt-st-amber-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.lt-st-account .woocommerce-MyAccount-content del .woocommerce-Price-amount {
	font-weight: 500;
	opacity: .65;
}

body.lt-st-account .woocommerce-MyAccount-content table td:is(
	.woocommerce-orders-table__cell-order-number,
	.woocommerce-orders-table__cell-order-date
),
body.lt-st-account .woocommerce-MyAccount-content table td time {
	white-space: nowrap;
}

body.lt-st-account .woocommerce-MyAccount-content table td.woocommerce-orders-table__cell-order-date {
	color: var(--lt-st-ink-soft);
}

/* Row actions keep to one line so the column cannot be squeezed into a stack
   of half-width buttons. */
body.lt-st-account .woocommerce-MyAccount-content table td:is(
	.woocommerce-orders-table__cell-order-actions,
	.download-actions
) {
	white-space: nowrap;
}

/* ---- status pills ---- */

/*
 * WooCommerce prints an order's status in two places and wraps it in an element
 * in only one of them, so the pill is made twice.
 *
 * On a single order it is <mark class="order-status">, which is an inline box
 * already. In the orders table it is bare text in a <td>, and the only way to
 * paint a pill around bare text without touching the template is to stop the
 * cell being a table cell: display: inline-block makes it an inline-block, the
 * browser wraps it in an anonymous table cell, and the column keeps its place
 * and its alignment while the pill hugs its own text. The stacked layout at the
 * bottom of this file hands the cell back.
 */
body.lt-st-account .woocommerce-MyAccount-content mark.order-status,
body.lt-st-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-status {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.35;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 99px;
	background: var(--lt-st-tile-a);
	color: var(--lt-st-deep);
	/* Neve: body.woocommerce-account table th, td { padding: 10px 10px
	   !important } — the pill's own padding is the whole shape. */
	padding: 5px 11px !important;
}

/*
 * Coloured by state, from the class WooCommerce puts on the row. Completed is
 * the filled navy the current menu item and the shop's chip bar use, anything
 * still moving is amber, and anything that went wrong is the basket's
 * destructive pair. No colour here that the shop does not already use.
 */
body.lt-st-account .woocommerce-MyAccount-content tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status {
	background: var(--lt-st-deep);
	color: var(--lt-st-on-deep);
}

body.lt-st-account .woocommerce-MyAccount-content tr:is(
	.woocommerce-orders-table__row--status-pending,
	.woocommerce-orders-table__row--status-processing,
	.woocommerce-orders-table__row--status-on-hold
) td.woocommerce-orders-table__cell-order-status {
	background: var(--lt-st-amber-soft);
	color: var(--lt-st-amber-ink);
}

body.lt-st-account .woocommerce-MyAccount-content tr:is(
	.woocommerce-orders-table__row--status-cancelled,
	.woocommerce-orders-table__row--status-failed,
	.woocommerce-orders-table__row--status-refunded
) td.woocommerce-orders-table__cell-order-status {
	background: var(--lt-st-danger-soft);
	color: var(--lt-st-danger);
}

/* ---- order details totals (view-order) ---- */

/*
 * The order-details table is the only one on these pages with a foot. Dashed
 * separators and a solid navy rule above the total, as in the cart's totals
 * panel and the checkout's review table.
 *
 * Neve: body.woocommerce-account table td { border: 0 !important }. The th half
 * of each rule below does not need the !important and takes it only to keep
 * the pair in one declaration.
 */
body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot th,
body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot td {
	background: var(--lt-st-ground);
	font-size: 12.5px;
	border-top: 1px dashed var(--lt-st-line) !important;
	padding: 9px 14px !important;
}

body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot tr:first-child th,
body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot tr:first-child td {
	border-top: 1px solid var(--lt-st-line) !important;
}

body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot th {
	text-align: left;
	font-family: inherit;
	font-weight: 600;
	color: var(--lt-st-ink-soft);
}

body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child th,
body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td {
	border-top: 2px solid var(--lt-st-deep) !important;
}

/*
 * The serif total, set on the <strong> and its <bdi> so a note beside it keeps
 * the body font. Ink rather than amber, as the grand total in the cart's totals
 * panel is: on a row of its own above a navy rule it is already the loudest
 * thing on the page.
 */
body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td strong,
body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td strong bdi,
body.lt-st-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td strong .woocommerce-Price-amount {
	font-family: var(--lt-st-display);
	font-size: 19px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--lt-st-ink);
}

/* The customer details block under it: the same plain card as everything else
   on the page. */
body.lt-st-account .woocommerce-MyAccount-content .woocommerce-customer-details address {
	padding: 14px 16px;
	background: var(--lt-st-surface);
	border: 1px solid var(--lt-st-line);
	border-radius: 12px;
	color: var(--lt-st-ink);
}

/* ============================================================
   buttons
   ============================================================ */

/*
 * Neve paints every WooCommerce .button — a.button, button.button,
 * input.button and .alt alike — from the --primarybtn* set declared at the top
 * of this file, so the solid brand button is already the default and only the
 * exceptions are named here.
 *
 * Row actions are the exception: View, Save, Deactivate, Remove and Add to
 * basket are all .button inside a table, and a table of solid brand buttons
 * reads as a table of alarms. They take the shop's .lt-st-backbtn outline
 * instead, which is the same decision the cart made about Apply coupon and
 * Update cart. .alt and .button-primary keep the fill: LTB2B uses them for the
 * one action that creates something — Create Standing Order, Send invite, Add
 * location, Save menus.
 */
body.lt-st-account .woocommerce-MyAccount-content table .button:not(.alt):not(.button-primary) {
	color: var(--lt-st-brand);
	background: var(--lt-st-surface);
	border: 1.5px solid var(--lt-st-brand);
	border-radius: 9px;
	box-shadow: none;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

body.lt-st-account .woocommerce-MyAccount-content table .button:not(.alt):not(.button-primary):hover {
	background: var(--lt-st-brand);
	border-color: var(--lt-st-brand);
	color: #fff;
}

/* WooCommerce's own paging on the orders endpoint: two buttons, no numbers.
   The shop's pagination row, minus the numbers it has nothing to put in. */
body.lt-st-account .woocommerce-MyAccount-content .woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}

body.lt-st-account .woocommerce-MyAccount-content .woocommerce-pagination .button {
	color: var(--lt-st-brand);
	background: var(--lt-st-surface);
	border: 1px solid var(--lt-st-line);
	border-radius: 8px;
	box-shadow: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 14px;
	text-decoration: none;
}

body.lt-st-account .woocommerce-MyAccount-content .woocommerce-pagination .button:hover {
	border-color: var(--lt-st-brand);
	background: var(--lt-st-brand);
	color: #fff;
}

/* ============================================================
   forms: login and register, Account details, Addresses
   ============================================================ */

/*
 * Logged out, /my-account/ is two columns of floated 48% halves. A grid places
 * them instead, so a store with registration switched off — which a trade store
 * with an application form may well be — gets one full-width card rather than a
 * half-width one, and auto-fit does that without this file knowing which it is.
 */
body.lt-st-account .woocommerce #customer_login {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 22px;
	align-items: start;
}

body.lt-st-account .woocommerce #customer_login > div {
	float: none;
	width: auto;
	padding: 18px 20px 20px;
	background: var(--lt-st-surface);
	border: 1px solid var(--lt-st-line);
	border-radius: 14px;
}

body.lt-st-account .woocommerce #customer_login > div > h2 {
	font-family: var(--lt-st-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 14px;
}

/* Neve makes the login form a 10px grid and leaves the register form as
   blocks, so both are stated. gap: 0 because the row spacing comes from the
   .form-row margin further down, which is the spacing every other form on
   these pages uses. */
body.lt-st-account .woocommerce form:is(.woocommerce-form-login, .woocommerce-form-register) {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ---- Account details ---- */

/*
 * First and last name side by side, everything else across both columns.
 * WooCommerce sizes .form-row-first and .form-row-last at 47% and floats them;
 * a grid item ignores the float but not the width, so the width goes too.
 *
 * The universal child rule spans everything by default, which is what puts
 * LTB2B's marketing-consent fieldset and the submit row across the form
 * without either being named.
 */
body.lt-st-account .woocommerce form.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 14px;
}

body.lt-st-account .woocommerce form.woocommerce-EditAccountForm > * {
	grid-column: 1 / -1;
}

body.lt-st-account .woocommerce form.woocommerce-EditAccountForm > .form-row-first {
	grid-column: 1;
}

body.lt-st-account .woocommerce form.woocommerce-EditAccountForm > .form-row-last {
	grid-column: 2;
}

body.lt-st-account .woocommerce form.woocommerce-EditAccountForm fieldset {
	margin: 14px 0 0;
	padding: 14px 16px 4px;
	background: var(--lt-st-surface);
	border: 1px solid var(--lt-st-line);
	border-radius: 12px;
}

body.lt-st-account .woocommerce form.woocommerce-EditAccountForm legend {
	font-family: var(--lt-st-display);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	padding: 0;
	margin: 0 0 8px;
}

/* ---- Addresses ---- */

body.lt-st-account .woocommerce .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 18px;
	margin: 0 0 26px;
}

body.lt-st-account .woocommerce .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	padding: 16px 18px 18px;
	background: var(--lt-st-surface);
	border: 1px solid var(--lt-st-line);
	border-radius: 14px;
}

body.lt-st-account .woocommerce .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 10px;
}

body.lt-st-account .woocommerce .woocommerce-Address-title h2 {
	font-family: var(--lt-st-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

/* The Edit link, as the shop's back button: an outline control, not a word in
   a heading. */
body.lt-st-account .woocommerce .woocommerce-Address-title a.edit {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--lt-st-brand);
	background: var(--lt-st-surface);
	border: 1.5px solid var(--lt-st-brand);
	border-radius: 8px;
	padding: 6px 11px;
	text-decoration: none;
}

body.lt-st-account .woocommerce .woocommerce-Address-title a.edit:hover {
	background: var(--lt-st-brand);
	color: #fff;
}

/* Two columns of address fields, as on the checkout. */
body.lt-st-account .woocommerce .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 14px;
}

body.lt-st-account .woocommerce .woocommerce-address-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}

/* ---- fields, labels and states, shared by every form above ---- */

body.lt-st-account .woocommerce .form-row {
	float: none;
	width: auto;
	margin: 0 0 12px;
	padding: 0;
}

body.lt-st-account .woocommerce .form-row label {
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.5;
	color: var(--lt-st-ink-soft);
}

body.lt-st-account .woocommerce .form-row label:is(.checkbox, .woocommerce-form__label-for-checkbox),
body.lt-st-account .woocommerce .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--lt-st-ink);
}

body.lt-st-account .woocommerce .form-row abbr.required,
body.lt-st-account .woocommerce .required {
	color: var(--lt-st-danger);
	border: 0;
	text-decoration: none;
}

body.lt-st-account .woocommerce .form-row :is(.input-text, textarea, select) {
	width: 100%;
	max-width: 100%;
}

body.lt-st-account .woocommerce .form-row textarea {
	min-height: 88px;
}

body.lt-st-account .woocommerce .form-row.woocommerce-invalid :is(.input-text, select) {
	border-color: var(--lt-st-danger);
}

/* The register form's meter. Its three states borrow the shop's amber and the
   basket's destructive red rather than introducing traffic lights. */
body.lt-st-account .woocommerce .woocommerce-password-strength {
	font-size: 12px;
	font-weight: 700;
	padding: 6px 0 0;
	text-align: left;
}

body.lt-st-account .woocommerce .woocommerce-password-strength:is(.short, .bad) {
	color: var(--lt-st-danger);
}

body.lt-st-account .woocommerce .woocommerce-password-strength.good {
	color: var(--lt-st-amber-ink);
}

body.lt-st-account .woocommerce .woocommerce-password-strength.strong {
	color: var(--lt-st-brand);
}

body.lt-st-account .woocommerce .woocommerce-password-hint {
	font-size: 12px;
	color: var(--lt-st-ink-soft);
}

/* Neve centres this link and sets it in ems; inside a card, left-aligned reads
   as part of the form it belongs to. */
body.lt-st-account .woocommerce .lost_password {
	margin: 0;
	font-size: 12.5px;
	text-align: left;
}

/* ============================================================
   notices
   ============================================================ */

/*
 * WooCommerce's notices arrive on these pages from three directions: its own
 * "Address changed successfully", LTB2B's "Updated." on My Team and its claim
 * errors, and the menu-access redirect notice. Neve paints all three as solid
 * accent blocks with white text and WooCommerce decorates them with an icon
 * font, which is a lot of colour for "Saved."
 *
 * The shop's notice panel instead — pale ground, coloured left edge — which is
 * what the floating basket and the cart's delivery-stream notices already look
 * like. Scoped to .woocommerce rather than to the content column because on
 * the logged-out page the notice is printed above #customer_login, outside it.
 */
body.lt-st-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) {
	display: block;
	list-style: none;
	margin: 0 0 20px;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lt-st-ink-soft);
	background: var(--lt-st-ground);
	border: 0;
	border-left: 3px solid var(--lt-st-brand);
	border-radius: 9px;

	/* Neve hands buttons inside a notice a transparent fill and a 3px white
	   border, which was for its own solid block; on a pale panel they go back
	   to the page's own pair. */
	--primarybtnbg: var(--lt-st-brand);
	--primarybtnhoverbg: var(--lt-st-brand);
	--primarybtncolor: #fff;
	--primarybtnhovercolor: #fff;
	--primarybtnborderwidth: 0;
	--primarybtnpadding: 10px 16px;
}

/* WooCommerce sets an icon-font glyph in this pseudo-element and positions it
   in the 3.5em left padding the rule above has taken away. */
body.lt-st-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::before {
	content: none;
}

body.lt-st-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) li {
	list-style: none;
	margin: 0;
}

body.lt-st-account .woocommerce .woocommerce-message {
	color: var(--lt-st-ink);
	background: var(--lt-st-tile-a);
	border-left-color: var(--lt-st-brand);
}

body.lt-st-account .woocommerce .woocommerce-error {
	color: var(--lt-st-danger);
	background: var(--lt-st-danger-soft);
	border-left-color: var(--lt-st-danger);
}

/* Neve stretches a notice's button to the full width of the panel; at this size
   it only needs to sit under the text. */
body.lt-st-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button {
	width: auto;
	margin: 10px 0 0;
	text-align: center;
}

/*
 * The one thing the button levers above cannot deliver: white text.
 *
 * Neve carries `.woocommerce .woocommerce-info a { color: inherit }`, written
 * for its own solid accent notice where inheriting meant white. The rule
 * repainting the panel pale with dark ink therefore handed that dark ink to any
 * button inside it, while --primarybtnbg kept the brand fill — dark text on a
 * blue button, which is what the owner saw on "Browse products". Neve's
 * `.woocommerce a.button` cannot win it back: the two selectors tie on
 * specificity and the `inherit` one comes later in the file.
 *
 * Separate from the rule above so the width and margin keep applying to a
 * <button> or <input> too — the link states below match only anchors.
 */
body.lt-st-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button,
body.lt-st-account .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button:is(:link, :visited, :hover, :focus, :active) {
	color: #fff;
}

/* ============================================================
   LTB2B's own account markup
   ============================================================ */

/* The organisation summary LTB2B prints above the dashboard, as a notice panel
   rather than a stray paragraph — it is the account's headline fact. */
body.lt-st-account .woocommerce-MyAccount-content p.ltb2b-org-summary {
	margin: 0 0 18px;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lt-st-ink-soft);
	background: var(--lt-st-ground);
	border-left: 3px solid var(--lt-st-brand);
	border-radius: 9px;
	max-width: none;
}

body.lt-st-account .woocommerce-MyAccount-content p.ltb2b-org-summary strong {
	color: var(--lt-st-ink);
}

/* Previous Purchases marks a line it cannot sell again. */
body.lt-st-account .woocommerce-MyAccount-content span.ltb2b-out-of-stock {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lt-st-ink-soft);
	white-space: nowrap;
}

body.lt-st-account .woocommerce-MyAccount-content p.ltb2b-fa-direct-invoices-note {
	font-size: 12px;
	color: var(--lt-st-ink-soft);
}

/*
 * My Team's per-member menu-access panels. LTB2B gives the <details> and its
 * <summary> inline styles for their margin and cursor, so only what it left
 * alone is set here.
 */
body.lt-st-account .woocommerce-MyAccount-content details {
	background: var(--lt-st-surface);
	border: 1px solid var(--lt-st-line);
	border-radius: 10px;
	overflow: hidden;
}

body.lt-st-account .woocommerce-MyAccount-content details > summary {
	padding: 10px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--lt-st-ink);
	background: var(--lt-st-ground);
}

body.lt-st-account .woocommerce-MyAccount-content details[open] > summary {
	border-bottom: 1px solid var(--lt-st-line);
}

body.lt-st-account .woocommerce-MyAccount-content details label {
	font-size: 13px;
	font-weight: 500;
	color: var(--lt-st-ink);
}

/* Standing Orders' new-order builder is the one table on these pages that is
   a form: its rows are text inputs, so they keep the surface white rather than
   lighting up on hover. */
body.lt-st-account .woocommerce-MyAccount-content table#ltb2b-so-items-table tbody tr:hover {
	background: var(--lt-st-surface);
}

body.lt-st-account .woocommerce-MyAccount-content table#ltb2b-so-items-table :is(input, select) {
	min-width: 8ch;
}

/* ============================================================
   phone and tablet
   ============================================================ */

/*
 * 768px because that is where WooCommerce's own small-screen stylesheet
 * collapses .shop_table_responsive into one block per row and starts supplying
 * each cell's label from its data-title. These rules turn those blocks into the
 * stacked cards the shop's product table uses on a phone.
 *
 * Only the tables WooCommerce prints are stacked: LTB2B's carry no data-title,
 * so a stacked row of theirs would be a column of unlabelled values. Those keep
 * the scroll box, which is why nothing here can put the page on a horizontal
 * scrollbar either way.
 */
@media (max-width: 768px) {
	/*
	 * The row group is blockified along with the table. Left as a
	 * table-row-group inside a block it would have an anonymous table box
	 * generated around it — and, because its rows are blocks by then, an
	 * anonymous row and cell inside that — and the cards would be sized by that
	 * cell's shrink-to-fit width instead of filling the column. Two blocks and
	 * no anonymous boxes at all is what makes the cards full width.
	 */
	body.lt-st-account .woocommerce-MyAccount-content table.shop_table_responsive,
	body.lt-st-account .woocommerce-MyAccount-content table.shop_table_responsive tbody {
		display: block;
		width: auto;
		max-width: none;
		overflow: visible;
		background: none;
		border-radius: 0;
		/* Unwinds the table border above, which carries !important only because
		   Neve's body.woocommerce-account table { border: 0 !important } does. */
		border: 0 !important;
	}

	body.lt-st-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr {
		display: block;
		margin: 0 0 12px;
		padding: 10px 12px;
		background: var(--lt-st-surface);
		border: 1px solid var(--lt-st-line);
		border-radius: 12px;
	}

	/* A card is not a row: it keeps its surface under the pointer. */
	body.lt-st-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr:hover {
		background: var(--lt-st-surface);
	}

	body.lt-st-account .woocommerce-MyAccount-content table.shop_table_responsive tbody td {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 4px 10px;
		/* WooCommerce zebra-stripes every second row at this width, which inside
		   a column of cards tints every second card. */
		background: transparent;
		/* WooCommerce's small-screen rule is text-align: right !important. */
		text-align: left !important;
		/* Both unwind this file's own cell rules, which carry !important only
		   because Neve's th/td padding and td border rules do. */
		padding: 4px 0 !important;
		border: 0 !important;
	}

	body.lt-st-account .woocommerce-MyAccount-content table.shop_table_responsive tbody td::before {
		float: none;
		font-size: 12px;
		font-weight: 600;
		color: var(--lt-st-ink-soft);
	}

	/*
	 * The status cell hands back the pill and becomes a labelled row like the
	 * others: at this width the label WooCommerce supplies is inside the cell,
	 * and a filled pill would swallow it. !important for the same reason as the
	 * padding above it.
	 */
	body.lt-st-account .woocommerce-MyAccount-content table.shop_table_responsive tbody td.woocommerce-orders-table__cell-order-status {
		display: flex;
		background: none;
		color: var(--lt-st-ink);
		border-radius: 0;
		letter-spacing: 0;
		text-transform: none;
		font-size: 13px;
		padding: 4px 0 !important;
	}

	/* Row actions get the full width of the card rather than a corner of it. */
	body.lt-st-account .woocommerce-MyAccount-content table.shop_table_responsive tbody td:is(
		.woocommerce-orders-table__cell-order-actions,
		.download-actions
	) {
		justify-content: flex-start;
		gap: 8px;
		padding-top: 8px !important;
		white-space: normal;
	}

	/* ---- touch targets ---- */

	/*
	 * 16px stops iOS zooming the page when a field takes focus, and 44px keeps
	 * every control at a comfortable tap size.
	 */
	body.lt-st-account .woocommerce {
		--formfieldfontsize: 16px;
		--primarybtnpadding: 14px 20px;
		--secondarybtnpadding: 13px 18px;
	}

	body.lt-st-account .woocommerce-MyAccount-content table .button,
	body.lt-st-account .woocommerce-MyAccount-content .woocommerce-pagination .button {
		min-height: 44px;
	}

	/* A 15-item menu is the whole of a phone's first screen whatever is done to
	   it, so the rows are taken to a 44px tap target rather than squeezed. */
	body.lt-st-account .woocommerce-MyAccount-navigation ul li a {
		padding: 13px 14px;
	}

	body.lt-st-account .woocommerce-MyAccount-navigation ul {
		margin-bottom: 22px;
	}
}

@media (max-width: 640px) {
	body.lt-st-account .woocommerce form.woocommerce-EditAccountForm,
	body.lt-st-account .woocommerce .woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	body.lt-st-account .woocommerce form.woocommerce-EditAccountForm > :is(.form-row-first, .form-row-last) {
		grid-column: 1;
	}

	body.lt-st-account .woocommerce #customer_login > div,
	body.lt-st-account .woocommerce .woocommerce-Addresses .woocommerce-Address {
		padding: 14px 14px 16px;
	}
}