/*
 * The Crypto Secret — My Account, downloads and order history (Story 4.2).
 *
 * Restyles WooCommerce's own account-page markup (this theme's
 * page-my-account.php shell plus its woocommerce/myaccount/*.php overrides)
 * to design/canvas/Account.dc.html. Every value below is a --tcs-* custom
 * property — either declared for this story in css/tokens.css's own
 * "SHAPE AND COLOUR — the account page" section, or reused verbatim from an
 * earlier story (checkout's field/focus tokens, motion's .tcs-btn, sections'
 * .tcs-band) — never a literal, per this story's own Boundaries.
 *
 * REGISTERED LAST (tcs_child_stylesheets(), functions.php), after
 * tcs-delivery. It consumes sections.css (.tcs-band--cream), motion.css
 * (.tcs-btn / .tcs-btn--dark for the download button and login submit) and
 * checkout.css's own field/focus-border shapes (this page's login form is
 * the SAME visual field the checkout form already defines) rather than
 * re-declaring any of them, so it must be able to win where a rule touches
 * the same element at equal specificity.
 */

/* ---------------------------------------------------------------------------
 * 1. PAGE SHELL.
 * ------------------------------------------------------------------------- */

.tcs-account {
	padding-top: var(--tcs-account-top-pad);
}

.tcs-account__title {
	font-size: var(--tcs-fs-page-title);
	line-height: var(--tcs-lh-page-title);
	letter-spacing: var(--tcs-ls-page-title);
	font-weight: var(--tcs-fw-semibold);
	margin: 0 0 var(--tcs-card-gap);
}

/* ---------------------------------------------------------------------------
 * 2. THE TWO-COLUMN LAYOUT (Account.dc.html:100). Sidebar nav, then content.
 * ------------------------------------------------------------------------- */

.tcs-account__layout {
	display: grid;
	grid-template-columns: var(--tcs-account-nav-col) 1fr;
	gap: var(--tcs-account-col-gap);
	align-items: start;
}

/* ---------------------------------------------------------------------------
 * 3. THE SIDEBAR NAV (Account.dc.html:102-111).
 * ------------------------------------------------------------------------- */

.tcs-account__nav {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-account-nav-gap);
}

.tcs-account__nav-identity {
	display: flex;
	align-items: center;
	gap: var(--tcs-account-identity-gap);
	padding-bottom: var(--tcs-account-identity-pad-bottom);
	margin-bottom: var(--tcs-account-identity-margin-bottom);
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
}

.tcs-account__nav-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--tcs-account-avatar-size);
	height: var(--tcs-account-avatar-size);
	border-radius: var(--tcs-radius-full);
	background: var(--tcs-black);
	color: var(--tcs-orange);
	font-size: var(--tcs-fs-checkout-label);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-account__nav-who {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.tcs-account__nav-name {
	font-size: var(--tcs-fs-checkout-input);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-account__nav-email {
	font-size: var(--tcs-fs-checkout-hint);
	color: var(--tcs-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tcs-account__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tcs-account-nav-gap);
}

.tcs-account__nav-link {
	display: flex;
	align-items: center;
	gap: var(--tcs-account-nav-row-gap);
	padding: var(--tcs-account-nav-row-pad);
	min-height: var(--tcs-tap-min);
	border-radius: var(--tcs-radius);
	font-size: var(--tcs-fs-checkout-input);
	font-weight: var(--tcs-fw-medium);
	color: var(--tcs-body);
	text-decoration: none;
	border: var(--tcs-border-width) solid transparent;
}

.tcs-account__nav-link--current {
	background: var(--tcs-white);
	border-color: var(--tcs-border);
	color: var(--tcs-black);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-account__nav-link:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 4. LOGGED-IN CONTENT COLUMN.
 * ------------------------------------------------------------------------- */

.tcs-account__content {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-section-y-mobile);
}

.tcs-account__content > .woocommerce-MyAccount-content {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-section-y-mobile);
}

/* ---------------------------------------------------------------------------
 * 4b. THE DOWNLOADS TAB HEADING (Account.dc.html:113-117; code-review fix,
 * 2026-09-04 — the artboard's <h1>/lede above the download card had no
 * markup at all before this). Left-aligned, unlike the centered
 * .tcs-account__login-head below — this sits inside the two-column
 * logged-in layout, not the standalone login card.
 * ------------------------------------------------------------------------- */

.tcs-account__downloads-head {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.tcs-account__downloads-lede {
	margin: 0;
	font-size: 16px;
	line-height: var(--tcs-lh-body);
	color: var(--tcs-body);
}

/* ---------------------------------------------------------------------------
 * 5. THE DOWNLOAD CARD(S) (Account.dc.html:119-136).
 * ------------------------------------------------------------------------- */

.tcs-account__downloads {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-card-gap);
}

.tcs-account__download-card {
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-lg);
	padding: var(--tcs-account-card-pad);
	display: flex;
	align-items: center;
	gap: var(--tcs-account-card-gap);
}

.tcs-account__download-thumb {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	width: var(--tcs-account-thumb-w);
	height: var(--tcs-account-thumb-h);
	border-radius: 3px 5px 5px 3px;
	background: linear-gradient(150deg, #1b1b1f, var(--tcs-black));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--tcs-account-thumb-pad);
	box-shadow: var(--tcs-btn-hover-shadow-orange);
}

/* Real cover image in the frame (2026-09-05); the drawn spine and "101" are gone. */
.tcs-account__download-thumb {
	padding: 0;
}

.tcs-account__download-cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcs-account__download-thumb-mark {
	position: relative;
	padding-left: 4px;
	font-size: 20px;
	font-weight: var(--tcs-fw-bold);
	color: var(--tcs-orange);
	letter-spacing: var(--tcs-ls-hero);
	line-height: 1;
}

.tcs-account__download-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
	min-width: 0;
}

.tcs-account__download-name {
	font-size: var(--tcs-fs-card-title);
	line-height: var(--tcs-lh-card-title);
	letter-spacing: var(--tcs-ls-card-title);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-account__download-meta {
	font-size: var(--tcs-fs-checkout-hint);
	color: var(--tcs-muted);
}

.tcs-account__download-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.tcs-account__download-badge--unlimited {
	font-size: var(--tcs-fs-checkout-hint);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-success);
	background: color-mix(in srgb, var(--tcs-success) 10%, transparent);
	border-radius: var(--tcs-radius-full);
	padding: 4px 10px;
}

.tcs-account__download-count {
	font-size: var(--tcs-fs-checkout-hint);
	color: var(--tcs-muted);
}

.tcs-account__download-btn {
	flex-shrink: 0;
	white-space: nowrap;
	gap: 9px;
	padding: 15px 26px;
}

/* ---------------------------------------------------------------------------
 * 6. ORDER HISTORY (Account.dc.html:138-151).
 * ------------------------------------------------------------------------- */

.tcs-account__orders {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-card-gap);
}

.tcs-account__orders-label {
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-muted);
}

.tcs-account__orders-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-md);
	overflow: hidden;
}

.tcs-account__orders-table thead th {
	text-align: left;
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-muted);
	background: var(--tcs-cream-2);
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
	padding: 14px 22px;
}

.tcs-account__orders-table tbody td,
.tcs-account__orders-table tbody th {
	padding: 18px 22px;
	font-size: var(--tcs-fs-checkout-input);
	color: var(--tcs-ink);
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
	text-align: left;
}

.tcs-account__orders-table tbody tr:last-child td,
.tcs-account__orders-table tbody tr:last-child th {
	border-bottom: 0;
}

.tcs-account__orders-table .woocommerce-orders-table__cell-order-number {
	font-weight: var(--tcs-fw-semibold);
}

.tcs-account__orders-table .woocommerce-orders-table__cell-order-total {
	text-align: right;
	font-weight: var(--tcs-fw-semibold);
}

.tcs-account__orders-table thead .woocommerce-orders-table__header-order-total {
	text-align: right;
}

.tcs-account__orders-table a {
	color: inherit;
	text-decoration: none;
}

.tcs-account__orders-table a:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 7. THE TWO INFO CARDS (Account.dc.html:153-162).
 * ------------------------------------------------------------------------- */

.tcs-account__info-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tcs-account-info-gap);
}

.tcs-account__info-card {
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-md);
	padding: var(--tcs-account-info-pad);
	display: flex;
	flex-direction: column;
	gap: var(--tcs-account-info-stack-gap);
}

.tcs-account__info-title {
	font-size: var(--tcs-fs-body-sm);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-account__info-body {
	font-size: var(--tcs-fs-checkout-input);
	line-height: var(--tcs-lh-body-sm);
	color: var(--tcs-body);
}

.tcs-account__info-link {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
	/*
	 * The 44px tap floor (Story 4.5's sweep caught these at 19px tall in
	 * the logged-in views). inline-flex keeps them inline where they sit
	 * beside plain text while the box grows to the floor.
	 */
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * 8. LOGGED-OUT STATE — the login card.
 * ------------------------------------------------------------------------- */

.tcs-account__login-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tcs-account__login-head {
	width: 100%;
	text-align: center;
	max-width: var(--tcs-account-login-card-max);
	margin-bottom: 28px;
}

.tcs-account__login-head .tcs-account__title {
	margin-bottom: 10px;
}

/* One line under the title: who this page is for. */
.tcs-account__login-lede {
	margin: 0;
	font-size: 16px;
	line-height: var(--tcs-lh-body);
	color: var(--tcs-body);
}

.tcs-account__login-card {
	width: 100%;
	max-width: var(--tcs-account-login-card-max);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: 20px;
	padding: var(--tcs-account-login-card-pad);
	box-shadow: var(--tcs-account-login-card-shadow);
}

.tcs-account__login-title {
	margin: 0 0 6px;
	font-size: var(--tcs-fs-card-title);
	line-height: var(--tcs-lh-card-title);
	letter-spacing: var(--tcs-ls-card-title);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-account__login-hint {
	margin: 0 0 26px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tcs-muted);
}

/* Below the card, outside it: what a first-time buyer needs to know. */
.tcs-account__login-note {
	width: 100%;
	max-width: var(--tcs-account-login-card-max);
	margin: 22px 0 0;
	text-align: center;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tcs-muted);
}

.tcs-account__login-form {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-account-login-field-gap);
}

/*
 * WooCommerce's stylesheet draws `form.login` as its own bordered, padded
 * box, which nested a second card inside .tcs-account__login-card. The card
 * is the only frame.
 */
.tcs-account__login-card form.login,
.tcs-account__login-card .woocommerce-form-login {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
	background: transparent;
}

.tcs-account__remember input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--tcs-orange);
}

.tcs-account__field {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-field-gap);
	margin: 0;
}

.tcs-account__field-label {
	font-size: var(--tcs-fs-checkout-label);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-account__field-input {
	width: 100%;
	min-height: var(--tcs-checkout-input-h);
	padding: var(--tcs-checkout-input-pad);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-checkout-input-border);
	border-radius: var(--tcs-checkout-input-radius);
	font-family: var(--tcs-font);
	font-size: var(--tcs-fs-checkout-input);
	line-height: 1.3;
	color: var(--tcs-black);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

/*
 * WooCommerce wraps the password input in span.password-input and injects
 * its eye button; the wrapper is the positioning box so the button sits
 * INSIDE the field's right edge, and the input leaves room for it.
 */
.tcs-account__login-wrap .password-input {
	position: relative;
	display: block;
}

.tcs-account__login-wrap .password-input input.tcs-account__field-input {
	padding-right: 52px;
}

/*
 * Woo's `.woocommerce form .form-row .input-text` (0,3,1) and its :focus
 * twin (0,4,1, border-color: currentColor) outrank the bare
 * .tcs-account__field-input rules above — the same cascade bug Story 4.5's
 * keyboard sweep caught on checkout (see checkout.css's own note), hitting
 * this login form's fields the same way: no visible focus, wrong resting
 * border. Mirroring Woo's shape with the theme class added wins both
 * states; this sheet loads after woocommerce.css, so even a tie resolves
 * to the theme.
 *
 * THE SELECT LINE IS THE ONE EXCEPTION (code-review fix, 2026-09-04):
 * .tcs-account__field-input is only ever written onto markup by this
 * theme's own form-login.php override, which has no <select> to write it
 * onto — the address-book forms use WooCommerce's stock template, so
 * their country/state <select> never carries this class and
 * `select.tcs-account__field-input` matched nothing, leaving Woo's own
 * `.woocommerce form .form-row select:focus{border-color:currentColor}`
 * (0,3,2) as the only rule a no-JS address-edit select ever saw — the
 * same gap checkout.css's identical note just fixed, invisible to the
 * JS-enabled sweep because Select2 replaces the focusable element there
 * too. Fixed the same way: drop the never-matching class requirement and
 * double the wrapper class so specificity (0,4,2) beats Woo's (0,3,2)
 * outright instead of depending on a load-order tie.
 */
.woocommerce form .form-row input.tcs-account__field-input,
.woocommerce.woocommerce form .form-row select,
.woocommerce form .form-row textarea.tcs-account__field-input {
	border: var(--tcs-border-width) solid var(--tcs-checkout-input-border);
}

.woocommerce form .form-row input.tcs-account__field-input:hover {
	border-color: var(--tcs-checkout-input-border-hover);
}

.woocommerce form .form-row input.tcs-account__field-input:focus,
.woocommerce.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea.tcs-account__field-input:focus {
	outline: none;
	border: var(--tcs-checkout-input-border-focus);
	box-shadow: var(--tcs-checkout-input-ring);
}

/* Remember-me on its own row, then a full-width submit beneath it. */
.tcs-account__login-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin: 6px 0 0;
}

.tcs-account__remember {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--tcs-body);
	cursor: pointer;
	font-size: var(--tcs-fs-checkout-hint);
	color: var(--tcs-body);
	/*
	 * The 44px tap floor (Story 4.5's sweep caught the whole remember-me
	 * row at 25px tall). The label tile IS the checkbox's tap target —
	 * clicking "Remember me" toggles it — so the row grows to the floor.
	 */
	min-height: var(--tcs-tap-min);
}

/*
 * WooCommerce 9 injects a password-visibility toggle button
 * (button.show-password-input) into the login form at runtime — it is not
 * in the served markup, only in the laid-out DOM, which is why Story 4.5's
 * browser sweep found it at 22×22 and no earlier curl gate could have.
 * Sized to the floor and given the house focus ring (its UA default ring
 * does not survive the gate's computed-style check, and `outline: none
 * without a replacement` is the one thing the floor forbids).
 */
.tcs-account__login-wrap button.show-password-input {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tcs-tap-min);
	min-width: var(--tcs-tap-min);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--tcs-muted);
	cursor: pointer;
}

.tcs-account__login-wrap button.show-password-input:hover {
	color: var(--tcs-black);
}

.tcs-account__login-wrap button.show-password-input:focus-visible,
.tcs-account__login-wrap input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 2px;
}

/*
 * A design-QA finding: WooCommerce's own `.woocommerce button.button` rule
 * (specificity 0,2,1 — two classes plus the `button` element) outranks
 * `.tcs-btn--dark` (0,1,0 — one class) in the cascade, so this real
 * WooCommerce form-submit button (it must keep the `button`/
 * `woocommerce-button` classes for Woo's own JS to recognize it, unlike the
 * checkout page's inert custom pay button) was rendering in WooCommerce's
 * default grey rather than the theme's dark button. Matching that same
 * element+two-class shape here (`button.tcs-account__login-submit.button`,
 * 0,2,1) is what actually wins — a two-class-only selector still lost.
 */
button.tcs-account__login-submit.button {
	position: relative;
	/* Woo's button rule resets overflow; without this the shimmer span slides
	 * out of the button and paints a white bar beside the card. */
	overflow: hidden;
	width: 100%;
	min-height: var(--tcs-checkout-input-h);
	padding: 0 24px;
	background: var(--tcs-black);
	color: var(--tcs-cream);
	font-size: 16px;
	white-space: nowrap;
}

button.tcs-account__login-submit.button:hover {
	background: var(--tcs-orange);
	color: var(--tcs-black);
}

.tcs-account__lost-password {
	margin: 4px 0 0;
	text-align: center;
}

.tcs-account__lost-password a {
	color: var(--tcs-amber);
	font-size: var(--tcs-fs-checkout-hint);
	font-weight: var(--tcs-fw-medium);
	/*
	 * The 44px tap floor (Story 4.5's sweep caught this at 15px tall).
	 * The row it sits in is centered and roomy, so the box grows without
	 * moving anything else.
	 */
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	vertical-align: middle;
}

.tcs-account__lost-password a:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 2px;
}

/* Lost-password / reset-password forms (WooCommerce core markup, unforked)
 * reuse the same card + field shapes as the login form so a visitor moving
 * between the two sees one consistent surface, not a themed card followed
 * by an unstyled one. */
.tcs-account__login-wrap .woocommerce-ResetPassword,
.tcs-account__login-wrap .woocommerce-form-lost-password {
	width: 100%;
	max-width: var(--tcs-account-login-card-max);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: 20px;
	box-shadow: var(--tcs-account-login-card-shadow);
	padding: var(--tcs-account-login-card-pad);
	display: flex;
	flex-direction: column;
	gap: var(--tcs-account-login-field-gap);
}

.tcs-account__login-wrap .woocommerce-ResetPassword .form-row,
.tcs-account__login-wrap .woocommerce-form-lost-password .form-row,
.woocommerce-page .tcs-account__login-wrap .woocommerce-ResetPassword .form-row,
.woocommerce-page .tcs-account__login-wrap .woocommerce-form-lost-password .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-checkout-field-gap);
	/* Woo floats the username row at 47% (.form-row-first); full width here. */
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Woo's own intro sentence, set like the login card's hint. */
.tcs-account__login-wrap .woocommerce-ResetPassword > p:first-child,
.tcs-account__login-wrap .woocommerce-form-lost-password > p:first-child {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tcs-body);
}

.tcs-account__login-wrap .woocommerce-ResetPassword label,
.tcs-account__login-wrap .woocommerce-form-lost-password label {
	font-size: var(--tcs-fs-checkout-label);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-account__login-wrap .woocommerce-ResetPassword input.input-text,
.tcs-account__login-wrap .woocommerce-form-lost-password input.input-text {
	width: 100%;
	min-height: var(--tcs-checkout-input-h);
	padding: var(--tcs-checkout-input-pad);
	border: var(--tcs-border-width) solid var(--tcs-checkout-input-border);
	border-radius: var(--tcs-checkout-input-radius);
	font-family: var(--tcs-font);
	font-size: var(--tcs-fs-checkout-input);
}

.tcs-account__login-wrap .woocommerce-ResetPassword input.input-text:focus,
.tcs-account__login-wrap .woocommerce-form-lost-password input.input-text:focus {
	outline: none;
	border: var(--tcs-checkout-input-border-focus);
}

/* The house dark button, at the shape that beats Woo's `.woocommerce
 * button.button` (0,2,1) — see the login submit's own note above. */
.tcs-account__login-wrap .woocommerce-ResetPassword button.button,
.tcs-account__login-wrap .woocommerce-form-lost-password button.button {
	width: 100%;
	min-height: var(--tcs-checkout-input-h);
	padding: 0 24px;
	border: 0;
	border-radius: var(--tcs-radius);
	background: var(--tcs-black);
	color: var(--tcs-cream);
	font-family: var(--tcs-font);
	font-size: 16px;
	font-weight: var(--tcs-fw-semibold);
	cursor: pointer;
	transition: background-color 220ms ease, color 220ms ease;
}

.tcs-account__login-wrap .woocommerce-ResetPassword button.button:hover,
.tcs-account__login-wrap .woocommerce-form-lost-password button.button:hover {
	background: var(--tcs-orange);
	color: var(--tcs-black);
}

.tcs-account__login-wrap .woocommerce-ResetPassword button.button:focus-visible,
.tcs-account__login-wrap .woocommerce-form-lost-password button.button:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * 9. EDIT-ACCOUNT (Details tab) — WooCommerce core markup, unforked. Same
 * field shapes as the login form so the fourth tab does not look like an
 * unstyled admin screen dropped into a themed page.
 * ------------------------------------------------------------------------- */

.tcs-account__content .woocommerce-EditAccountForm .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 var(--tcs-checkout-field-group-gap);
}

.tcs-account__content .woocommerce-EditAccountForm label {
	font-size: var(--tcs-fs-checkout-label);
	font-weight: var(--tcs-fw-medium);
	color: var(--tcs-body);
}

.tcs-account__content .woocommerce-EditAccountForm input.input-text,
.tcs-account__content .woocommerce-EditAccountForm select {
	width: 100%;
	min-height: var(--tcs-tap-min);
	padding: var(--tcs-checkout-input-pad);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-checkout-input-border);
	border-radius: var(--tcs-checkout-input-radius);
	font-family: var(--tcs-font);
	font-size: var(--tcs-fs-checkout-input);
	color: var(--tcs-black);
}

.tcs-account__content .woocommerce-EditAccountForm input.input-text:focus {
	outline: none;
	border: var(--tcs-checkout-input-border-focus);
}

.tcs-account__content .woocommerce-EditAccountForm fieldset {
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-md);
	padding: var(--tcs-checkout-field-group-gap);
	margin: 0 0 var(--tcs-checkout-field-group-gap);
}

.tcs-account__content .woocommerce-EditAccountForm button {
	min-height: var(--tcs-tap-min);
	padding: 11px 20px;
	border: 0;
	border-radius: var(--tcs-radius);
	background: var(--tcs-black);
	color: var(--tcs-cream);
	font-family: var(--tcs-font);
	font-size: var(--tcs-fs-body-sm);
	font-weight: var(--tcs-fw-semibold);
	cursor: pointer;
}

.tcs-account__content .woocommerce-EditAccountForm button:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * 10. NOTICES. WooCommerce's own .woocommerce-message / .woocommerce-error /
 * .woocommerce-info wrappers, restyled to this system's card language
 * rather than core's default flat list-item look.
 * ------------------------------------------------------------------------- */

.tcs-account ul.woocommerce-error,
.tcs-account .woocommerce-message,
.tcs-account .woocommerce-info,
.tcs-account .woocommerce-notice {
	list-style: none;
	margin: 0 0 var(--tcs-card-gap);
	padding: 16px 20px;
	border-radius: var(--tcs-radius-md);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	font-size: var(--tcs-fs-checkout-input);
	color: var(--tcs-body);
}

.tcs-account ul.woocommerce-error li {
	color: var(--tcs-error);
}

.tcs-account .woocommerce-message a,
.tcs-account .woocommerce-info a,
.tcs-account .woocommerce-notice a {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
}

/* ---------------------------------------------------------------------------
 * 11. MOBILE — 390px (tokens.md, mobile breakpoint). Sidebar collapses above
 * content, download card and info cards both go single column, and every
 * tap target the desktop rules above already sized at --tcs-tap-min stays
 * that size — this section only ever changes LAYOUT, never geometry that
 * would shrink a target below 44px.
 * ------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
 * 12. ACCOUNT AREA POLISH (2026-09-05). Everything below backs the template
 * overrides added in the same pass: notices drawn with inline SVG instead of
 * WooCommerce's icon font, a heading on every tab, the Details tab as two
 * cards, the single-order view, the lost/reset/set-password cards, and the
 * sidebar icons Account.dc.html:106-111 draws.
 * ------------------------------------------------------------------------- */

/* 12.1 Notices. WooCommerce's classes stay on the element (its scripts and
 * the gates read them); .tcs-notice carries the design. The ::before rules
 * neutralise woocommerce.css's icon-font glyph, which rendered as a stray
 * square over the first word because this theme never loads that font. */
.tcs-notice,
.tcs-account .woocommerce-message,
.tcs-account .woocommerce-info,
.tcs-account ul.woocommerce-error {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0 0 var(--tcs-account-card-gap);
	padding: 14px 18px;
	border-radius: var(--tcs-radius-md);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-left-width: 4px;
	box-shadow: 0 12px 28px -22px rgba(12, 12, 13, .35);
	font-size: 15px;
	line-height: 1.55;
	color: var(--tcs-ink);
	list-style: none;
}

.tcs-notice::before,
.tcs-account .woocommerce-message::before,
.tcs-account .woocommerce-info::before,
.tcs-account .woocommerce-error::before,
.tcs-account .woocommerce-error li::before {
	content: none !important;
	display: none !important;
}

.tcs-account ul.woocommerce-error {
	flex-direction: column;
	gap: 10px;
}

.tcs-notice__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	color: var(--tcs-ink);
}

.tcs-notice__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: -3px;
	border-radius: 50%;
}

.tcs-notice__text {
	flex: 1 1 auto;
	min-width: 0;
}

.tcs-notice__text > .button,
.tcs-notice__text > a.button,
.tcs-notice > .button,
.tcs-account .woocommerce-message > .button,
.tcs-account .woocommerce-info > .button,
.tcs-account .woocommerce-error .button {
	display: inline-flex;
	align-items: center;
	margin: 6px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: inherit;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-amber);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tcs-notice--success,
.tcs-account .woocommerce-message {
	border-left-color: var(--tcs-green);
}

.tcs-notice--success .tcs-notice__icon {
	background: color-mix(in srgb, var(--tcs-green) 14%, transparent);
	color: var(--tcs-green);
}

.tcs-notice--info,
.tcs-account .woocommerce-info {
	border-left-color: var(--tcs-orange);
}

.tcs-notice--info .tcs-notice__icon {
	background: color-mix(in srgb, var(--tcs-orange) 16%, transparent);
	color: var(--tcs-amber);
}

.tcs-notice--error,
.tcs-account ul.woocommerce-error {
	border-left-color: var(--tcs-error);
}

.tcs-notice--error .tcs-notice__icon {
	background: color-mix(in srgb, var(--tcs-error) 12%, transparent);
	color: var(--tcs-error);
}

.tcs-account .woocommerce-error li,
.tcs-account ul.woocommerce-error li {
	color: var(--tcs-ink);
}

.tcs-notice strong {
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-notice a:not(.button) {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
}

/* In the logged-out column the notice takes the card's own width so the card
 * below it stays centred under the heading instead of drifting left. */
.tcs-account__login-wrap > .woocommerce-message,
.tcs-account__login-wrap > .woocommerce-info,
.tcs-account__login-wrap > ul.woocommerce-error,
.tcs-account__login-wrap > .woocommerce-notices-wrapper,
.tcs-account__login-wrap > .woocommerce > .woocommerce-notices-wrapper {
	width: 100%;
	max-width: var(--tcs-account-login-card-max);
	margin-left: auto;
	margin-right: auto;
}

.tcs-account__login-wrap .woocommerce-notices-wrapper:empty {
	display: none;
}

/* 12.2 The tab heading, shared by every tab (was Downloads-only). */
.tcs-account__head {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 26px;
}

.tcs-account__lede {
	margin: 0;
	font-size: 16px;
	line-height: 1.62;
	color: var(--tcs-body);
}

.tcs-account__back {
	align-self: flex-start;
	font-size: 13.5px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-amber);
	min-height: var(--tcs-tap-min);
	display: inline-flex;
	align-items: center;
}

.tcs-account__order-title-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.tcs-account__order-title-row .tcs-account__title {
	margin: 0;
}

.tcs-account__pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: .02em;
}

.tcs-account__pill--ok {
	background: color-mix(in srgb, var(--tcs-green) 12%, transparent);
	color: var(--tcs-green);
}

.tcs-account__pill--muted {
	background: var(--tcs-cream-2);
	color: var(--tcs-muted);
}

.tcs-account__pill--error {
	background: color-mix(in srgb, var(--tcs-error) 10%, transparent);
	color: var(--tcs-error);
}

/* 12.3 Sidebar icons (Account.dc.html:106-111). */
.tcs-account__nav-icon {
	flex-shrink: 0;
	color: var(--tcs-muted);
	transition: color var(--tcs-dur-btn-hover, 200ms) ease;
}

.tcs-account__nav-link--current .tcs-account__nav-icon,
.tcs-account__nav-link:hover .tcs-account__nav-icon {
	color: var(--tcs-orange);
}

/* 12.4 Details tab: two white cards. */
.tcs-account__form {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-account-card-gap);
}

.tcs-account__form-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: var(--tcs-account-card-pad);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: 14px;
	min-inline-size: 0;
}

.tcs-account__form-card-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 16px;
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
}

.tcs-account__form-card-title {
	margin: 0;
	font-size: 18px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -.02em;
	color: var(--tcs-black);
}

.tcs-account__form-card-hint {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tcs-muted);
}

.tcs-account__form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.tcs-account__form .tcs-account__field,
.tcs-account__content .woocommerce-EditAccountForm .tcs-account__field {
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.tcs-account__content .woocommerce-EditAccountForm .tcs-account__field-label {
	font-size: 13.5px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-account__content .woocommerce-EditAccountForm input.tcs-account__field-input {
	width: 100%;
	min-height: var(--tcs-checkout-input-h, 52px);
	padding: 0 16px;
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border-2);
	border-radius: 10px;
	font-family: var(--tcs-font);
	font-size: 16px;
	color: var(--tcs-black);
	box-shadow: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.tcs-account__content .woocommerce-EditAccountForm input.tcs-account__field-input:focus {
	outline: none;
	border-color: var(--tcs-orange);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcs-orange) 22%, transparent);
}

.tcs-account__field-help {
	font-size: 13px;
	line-height: 1.5;
	color: var(--tcs-muted);
}

.tcs-account__field-help em {
	font-style: normal;
}

.tcs-account__form-actions {
	margin: 0;
	display: flex;
	justify-content: flex-start;
}

.tcs-account__content .woocommerce-EditAccountForm button.tcs-account__form-submit {
	position: relative;
	overflow: hidden;
	min-height: var(--tcs-checkout-input-h, 52px);
	padding: 0 28px;
	background: var(--tcs-black);
	color: var(--tcs-cream);
	font-size: 15px;
	border: 0;
	border-radius: var(--tcs-radius);
}

/* The password show/hide toggle WooCommerce injects: one rule for every form
 * in the account area (the Details tab's copy was inheriting the black
 * button skin and showed as three black squares). */
.tcs-account .password-input {
	position: relative;
	display: flex;
	width: 100%;
}

.tcs-account .password-input input {
	width: 100%;
	padding-right: 52px;
}

.tcs-account button.show-password-input {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tcs-tap-min);
	min-width: var(--tcs-tap-min);
	padding: 0;
	margin: 0;
	background: none !important;
	border: 0;
	border-radius: 8px;
	color: var(--tcs-muted);
	cursor: pointer;
	box-shadow: none;
}

.tcs-account button.show-password-input::after {
	color: inherit;
}

.tcs-account button.show-password-input:hover {
	color: var(--tcs-black);
}

.tcs-account button.show-password-input:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 2px;
}

/* WooCommerce's strength meter under a new password. */
.tcs-account .woocommerce-password-strength {
	margin-top: 8px;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: var(--tcs-fw-semibold);
	text-align: left;
	background: var(--tcs-cream-2);
	color: var(--tcs-muted);
	border: 0;
}

.tcs-account .woocommerce-password-strength.short,
.tcs-account .woocommerce-password-strength.bad {
	background: color-mix(in srgb, var(--tcs-error) 10%, transparent);
	color: var(--tcs-error);
}

.tcs-account .woocommerce-password-strength.good {
	background: color-mix(in srgb, var(--tcs-orange) 16%, transparent);
	color: var(--tcs-amber);
}

.tcs-account .woocommerce-password-strength.strong {
	background: color-mix(in srgb, var(--tcs-green) 12%, transparent);
	color: var(--tcs-green);
}

.tcs-account .woocommerce-password-hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tcs-muted);
}

/* 12.5 Single order view. */
.tcs-account__order-cards {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--tcs-account-info-gap);
	margin-bottom: var(--tcs-account-card-gap);
}

.tcs-account__downloads + .tcs-account__order-cards {
	margin-top: var(--tcs-account-card-gap);
}

.tcs-account__receipt,
.tcs-account__billing,
.tcs-account__updates {
	padding: var(--tcs-account-info-pad);
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-md);
	min-inline-size: 0;
}

.tcs-account__card-label {
	display: block;
	margin: 0 0 14px;
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: uppercase;
	color: var(--tcs-muted);
}

.tcs-account__receipt-lines {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.tcs-account__receipt-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 11px 0;
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
	font-size: 14.5px;
	color: var(--tcs-ink);
}

.tcs-account__receipt-line:last-child {
	border-bottom: 0;
}

.tcs-account__receipt-qty {
	color: var(--tcs-muted);
	font-size: 13px;
}

.tcs-account__receipt-amount {
	font-weight: var(--tcs-fw-semibold);
	white-space: nowrap;
	color: var(--tcs-black);
}

.tcs-account__receipt-line--order_total {
	padding-top: 14px;
	margin-top: 4px;
	border-top: 2px solid var(--tcs-black);
	font-size: 16px;
}

.tcs-account__receipt-line--order_total .tcs-account__receipt-amount {
	font-size: 22px;
	letter-spacing: -.03em;
}

.tcs-account__billing-name {
	margin: 0 0 2px;
	font-size: 15.5px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-account__billing-row {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--tcs-body);
	overflow-wrap: anywhere;
}

.tcs-account__billing-note {
	margin-top: 10px;
	padding-top: 10px;
	border-top: var(--tcs-border-width) solid var(--tcs-border);
}

.tcs-account__updates {
	margin-bottom: var(--tcs-account-card-gap);
}

.tcs-account__updates-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tcs-account__update {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 14px;
	font-size: 14.5px;
	color: var(--tcs-body);
}

.tcs-account__update-date {
	color: var(--tcs-muted);
}

.tcs-account__update-text p {
	margin: 0;
}

/* 12.6 Lost / reset / set-password cards share the login card. */
.tcs-account__login-card--reset .tcs-account__login-hint,
.tcs-account__login-card--confirm .tcs-account__login-hint {
	margin-bottom: 24px;
}

.tcs-account__login-card--confirm {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tcs-account__confirm-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--tcs-green) 12%, transparent);
	color: var(--tcs-green);
}

.tcs-account__confirm-body {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--tcs-body);
	max-width: 36ch;
}

.tcs-account__login-card--reset .tcs-account__lost-password,
.tcs-account__login-card--confirm .tcs-account__lost-password {
	margin-top: 8px;
}

/* Every card form in the account area gets the login card's field styling,
 * whichever WooCommerce class the input arrived with. */
.tcs-account__login-card input.tcs-account__field-input,
.woocommerce form .form-row input.tcs-account__field-input {
	width: 100%;
}

@media (max-width: 782px) {
	.tcs-account {
		padding-top: var(--tcs-section-y-mobile);
	}

	.tcs-account__layout {
		grid-template-columns: 1fr;
		gap: var(--tcs-section-y-mobile);
	}

	.tcs-account__nav-list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.tcs-account__nav-link {
		flex: 1 1 auto;
		justify-content: center;
	}

	.tcs-account__download-card {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.tcs-account__download-thumb {
		align-self: center;
	}

	.tcs-account__download-btn {
		justify-content: center;
	}

	.tcs-account__orders-table,
	.tcs-account__orders-table thead,
	.tcs-account__orders-table tbody,
	.tcs-account__orders-table tr {
		display: block;
		width: 100%;
	}

	.tcs-account__orders-table thead {
		display: none;
	}

	.tcs-account__orders-table tbody tr {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 16px 18px;
		border-bottom: var(--tcs-border-width) solid var(--tcs-border);
	}

	.tcs-account__orders-table tbody td,
	.tcs-account__orders-table tbody th {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 2px 0;
		border: 0;
		text-align: left;
	}

	.tcs-account__orders-table tbody td::before,
	.tcs-account__orders-table tbody th::before {
		content: attr(data-title);
		font-weight: var(--tcs-fw-semibold);
		color: var(--tcs-muted);
	}

	.tcs-account__orders-table .woocommerce-orders-table__cell-order-total {
		text-align: right;
	}

	.tcs-account__info-cards {
		grid-template-columns: 1fr;
	}

	.tcs-account__login-card,
	.tcs-account__login-wrap .woocommerce-ResetPassword,
	.tcs-account__login-wrap .woocommerce-form-lost-password {
		padding: var(--tcs-thank-you-card-pad-mobile);
	}

	.tcs-account__login-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.tcs-account__login-submit {
		width: 100%;
	}

	.tcs-account__form-grid,
	.tcs-account__order-cards {
		grid-template-columns: 1fr;
	}
	.tcs-account__form-card {
		padding: 22px 18px;
	}
	.tcs-account__content .woocommerce-EditAccountForm button.tcs-account__form-submit {
		width: 100%;
	}
	.tcs-account__update {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.tcs-account__nav-link {
		gap: 8px;
	}
}

/* ---------------------------------------------------------------------------
 * 13. FIXES FOUND BY THE 2026-09-05 ACCOUNT AUDIT.
 * ------------------------------------------------------------------------- */

/* FOCUS RING ON EVERY ACCOUNT TEXT INPUT. The login card's focus rule above
 * reads --tcs-checkout-input-border-focus / --tcs-checkout-input-ring, which
 * checkout.css defines and this page never loads — so `border: var(--undefined)`
 * was dropped and the field showed no focus change at all
 * (verify-account.spec.js's tab-order test caught it). Concrete values here. */
.tcs-account input.tcs-account__field-input:focus,
.woocommerce form .form-row input.tcs-account__field-input:focus,
.tcs-account .woocommerce-ResetPassword input.input-text:focus,
.tcs-account__content .woocommerce-EditAccountForm input.tcs-account__field-input:focus {
	outline: none;
	border-color: var(--tcs-orange);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcs-orange) 22%, transparent);
}

/* WooCommerce's script focuses the notice for screen readers; the browser
 * then paints its default black focus outline around the whole box. The
 * notice is not interactive, so the outline says nothing to a sighted user. */
.tcs-notice:focus,
.tcs-account .woocommerce-message:focus,
.tcs-account .woocommerce-info:focus,
.tcs-account .woocommerce-error:focus {
	outline: none;
}

/* woocommerce.css zeroes `stroke` on SVGs inside notices; restore the glyph. */
.tcs-notice__icon svg {
	display: block;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	width: 16px;
	height: 16px;
}

/* The lost/reset password FORM used to be the card (section 8 above styles
 * .woocommerce-ResetPassword as a bordered, padded, shadowed box). It now
 * sits inside .tcs-account__login-card, so the form itself goes flat. */
.tcs-account__login-wrap .woocommerce-ResetPassword,
.tcs-account__login-wrap .woocommerce-form-lost-password,
.woocommerce-page .tcs-account__login-wrap .woocommerce-ResetPassword {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.tcs-account__login-wrap .woocommerce-ResetPassword > p:first-child {
	margin: 0;
}

.tcs-account__login-wrap .woocommerce-ResetPassword button.tcs-account__login-submit,
.tcs-account__login-wrap .woocommerce-ResetPassword button.button {
	width: 100%;
	min-height: var(--tcs-checkout-input-h, 52px);
	padding: 0 24px;
	background: var(--tcs-black);
	color: var(--tcs-cream);
	border: 0;
	border-radius: var(--tcs-radius);
	font-size: 16px;
	font-weight: var(--tcs-fw-semibold);
}

.tcs-account__login-wrap .woocommerce-ResetPassword .tcs-account__field,
.woocommerce-page .tcs-account__login-wrap .woocommerce-ResetPassword .form-row {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

.tcs-account__login-wrap .woocommerce-ResetPassword input.tcs-account__field-input {
	width: 100%;
}

/* The border colour SNAPS on focus; only the ring eases in. A transitioned
 * border colour is still the unfocused colour on the first frame, which is
 * what an automated focus probe (and verify-account.spec.js) reads. */
.tcs-account .tcs-account__field-input,
.tcs-account input.tcs-account__field-input {
	transition: box-shadow 160ms ease;
}

/* ---------------------------------------------------------------------------
 * 14. TABLET WIDTHS AND TABLE SPECIFICITY (second staging test, 2026-09-05).
 *
 * A phone browser rendering at tablet width (720-1100px CSS) still got the
 * desktop two-column grid: 260px of nav plus 56px of gap left the content
 * column ~330px, and the download card's three-across row crushed its text
 * to one letter per line. Below 1100px the nav now sits above the content
 * as a row of pills, and the download card is allowed to wrap at any width.
 *
 * The orders table looked like a plain spreadsheet on the live host because
 * woocommerce.css's `.woocommerce table.shop_table td` (cell borders, 9px
 * padding) out-ranked the theme's rules there; the same rules are restated
 * below with the .tcs-account prefix so they win everywhere.
 * ------------------------------------------------------------------------- */
.tcs-account__download-card {
	flex-wrap: wrap;
}

.tcs-account__download-info {
	flex: 1 1 260px;
	min-width: 0;
}

.tcs-account__download-btn {
	flex: 0 0 auto;
}

.tcs-account__download-name,
.tcs-account__download-meta {
	overflow-wrap: anywhere;
}

@media (max-width: 1100px) and (min-width: 783px) {
	.tcs-account__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.tcs-account__nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px 24px;
	}
	.tcs-account__nav-identity {
		flex: 1 1 100%;
		padding-bottom: 14px;
		margin-bottom: 0;
	}
	.tcs-account__nav-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}
	.tcs-account__nav-link {
		padding: 10px 16px;
	}
}

@media (max-width: 782px) {
	.tcs-account__download-btn {
		flex: 1 1 100%;
	}
}

.tcs-account table.tcs-account__orders-table,
.woocommerce .tcs-account table.tcs-account__orders-table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-md);
	overflow: hidden;
	font-size: 15px;
}

.tcs-account table.tcs-account__orders-table thead th,
.woocommerce .tcs-account table.tcs-account__orders-table thead th {
	padding: 14px 22px;
	background: var(--tcs-cream-2);
	border: 0;
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: uppercase;
	color: var(--tcs-muted);
	text-align: left;
}

.tcs-account table.tcs-account__orders-table tbody td,
.tcs-account table.tcs-account__orders-table tbody th,
.woocommerce .tcs-account table.tcs-account__orders-table tbody td,
.woocommerce .tcs-account table.tcs-account__orders-table tbody th {
	padding: 18px 22px;
	border: 0;
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
	font-size: 15px;
	font-weight: var(--tcs-fw-regular);
	color: var(--tcs-ink);
	text-align: left;
	vertical-align: middle;
	background: transparent;
	transition: background-color 200ms ease;
}

.tcs-account table.tcs-account__orders-table tbody tr:last-child td,
.tcs-account table.tcs-account__orders-table tbody tr:last-child th {
	border-bottom: 0;
}

.tcs-account table.tcs-account__orders-table tbody tr:hover td,
.tcs-account table.tcs-account__orders-table tbody tr:hover th {
	background: color-mix(in srgb, var(--tcs-orange) 7%, transparent);
}

.tcs-account table.tcs-account__orders-table .woocommerce-orders-table__cell-order-number a {
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-amber);
	text-decoration: none;
}

.tcs-account table.tcs-account__orders-table .woocommerce-orders-table__cell-order-total,
.tcs-account table.tcs-account__orders-table thead .woocommerce-orders-table__header-order-total {
	text-align: right;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
	white-space: nowrap;
}

@media (max-width: 782px) {
	.tcs-account table.tcs-account__orders-table,
	.tcs-account table.tcs-account__orders-table tbody,
	.tcs-account table.tcs-account__orders-table tr {
		display: block;
	}
	.tcs-account table.tcs-account__orders-table thead {
		display: none;
	}
	.tcs-account table.tcs-account__orders-table tbody td,
	.tcs-account table.tcs-account__orders-table tbody th {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 18px;
		border: 0;
	}
	.tcs-account table.tcs-account__orders-table tbody tr {
		padding: 12px 0;
		border-bottom: var(--tcs-border-width) solid var(--tcs-border);
	}
	.tcs-account table.tcs-account__orders-table tbody tr:last-child {
		border-bottom: 0;
	}
	.tcs-account table.tcs-account__orders-table .woocommerce-orders-table__cell-order-total {
		white-space: normal;
	}
}