/* WooCommerce's My Account area — the `[woocommerce_my_account]` shortcode and
   every endpoint under it, plus the login, register and password forms.

   WHY THIS FILE EXISTS. The site's Cornerstone global CSS carries

       a:link, a:visited, a:hover, a:active { color: #ffffff; }

   which exists for the black footer, where every link is white on black and
   reads correctly. But it is unscoped, so on a light background it paints white
   on white — and it out-specifies almost everything the theme says about links,
   because `a:link` (0,1,1) beats a plain `.class a` (0,1,1) on source order and
   the inline block is printed last.

   In the account area that is not cosmetic, it is most of the page:

   - **The whole navigation vanished except the current tab.** The theme draws
     those tabs as pink-outlined pills whose border is `currentColor`, so
     forcing the text white takes the border with it — text AND box gone. Only
     `.is-active a` survived, on specificity, which is why "Dashboard" was the
     one thing on screen.
   - **Every link in the dashboard copy** — Log out, recent orders, addresses,
     account details — was white on white.
   - **"Lost your password?"** on the login form, so a bidder who forgot their
     password had no way back in, and the **"privacy policy"** link inside
     WooCommerce's consent sentence, which is POPIA-relevant.

   So the first half of this file is repair: put the colour back everywhere the
   override reaches. The second half is the polish that repair alone does not
   buy — the theme's tabs are drawn identically whether current or not, the
   tables and forms have no styling at all with `woocommerce-layout.css`
   dequeued by the theme, and nothing is sized for a thumb.

   The real fix for the root cause is to scope that rule to the footer in
   Cornerstone; it can hide any body-copy link anywhere on the site. This file
   is correct either way.

   SPECIFICITY. The override is `a:link` — one element, one pseudo-class
   (0,1,1). Naming a class in front of the same pseudo-class gives 0,2,1, which
   wins outright rather than depending on stylesheet order. That is why the
   colour rules below are written against `:link`/`:visited` rather than a bare
   descendant selector, and why no `!important` is needed anywhere here.

   COLOUR. From the shared tokens (this sheet depends on me-tokens.css), because
   the account area is general WooCommerce — the shop and gift certificates live
   here too, not only the auction — so it follows the site palette rather than
   the auction one that belongs to a lot page.

     --me-ink              #000000   21:1 on white. Client decision, 2026-07-31:
                                     every heading and every link at rest.
     --me-ink-hover        #6C6C6C   what an interactive one lightens to; see
                                     the note in me-tokens.css for why it is
                                     not --me-grey.
     --me-grey-tint        #F2F2F2   the surface a tab washes to on hover. It
                                     was --me-pink-tint until the client asked
                                     for grey there too.
     --me-pink             #BE5B8F   4.1:1 on white, so borders only. It fails
                                     AA at body sizes and no longer carries any
                                     text.
     --me-pink-accessible  #8E2F63   7.7:1 the other way with white on top, so
                                     it still fills the current tab.
     --me-pink-tint        #f7ecf3   a surface.

   TYPE is deliberately never set here. The site loads exactly one webfont,
   Poppins, and the account area already inherits it; naming a family we do not
   load would land it on a fallback and look less like the site, not more. */

/* --- links: the repair -------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content a:link,
.woocommerce-account .woocommerce-MyAccount-content a:visited,
.me-auction-register a:link,
.me-auction-register a:visited,
.woocommerce-form-login a:link,
.woocommerce-form-login a:visited,
.woocommerce-form-register a:link,
.woocommerce-form-register a:visited,
.woocommerce-LostPassword a:link,
.woocommerce-LostPassword a:visited,
.woocommerce-ResetPassword a:link,
.woocommerce-ResetPassword a:visited,
.woocommerce-privacy-policy-text a:link,
.woocommerce-privacy-policy-text a:visited {
	color: var(--me-ink, #000000);
	text-decoration: underline;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover,
.woocommerce-account .woocommerce-MyAccount-content a:active,
.me-auction-register a:hover,
.me-auction-register a:active,
.woocommerce-form-login a:hover,
.woocommerce-form-login a:active,
.woocommerce-form-register a:hover,
.woocommerce-form-register a:active,
.woocommerce-LostPassword a:hover,
.woocommerce-LostPassword a:active,
.woocommerce-ResetPassword a:hover,
.woocommerce-ResetPassword a:active,
.woocommerce-privacy-policy-text a:hover,
.woocommerce-privacy-policy-text a:active {
	color: var(--me-ink-hover, #6C6C6C);
	text-decoration: underline;
}

/* A link styled as a button keeps the button's own colours — "Browse products"
   inside an empty-orders notice is the case that matters. */
.woocommerce-account .woocommerce-MyAccount-content a.button:link,
.woocommerce-account .woocommerce-MyAccount-content a.button:visited,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover {
	color: #fff;
	text-decoration: none;
}

/* Keyboard focus has to be visible against a white card; the theme's default
   outline inherits the same white the rules above are undoing. */
.woocommerce-account .woocommerce a:focus-visible,
.me-auction-register a:focus-visible,
.woocommerce-privacy-policy-text a:focus-visible {
	outline: 3px solid var(--me-pink-accessible, #8E2F63);
	outline-offset: 2px;
}

/* --- layout ------------------------------------------------------------- */

/* The theme dequeues woocommerce-layout.css, so the nav and the content have no
   relationship of their own — they simply stack full width. Flex rather than a
   two-column grid because the same `.woocommerce` wrapper holds the logged-out
   login/register form as its only child, and that should still fill the row. */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 1 1 100%;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 100%;
	/* Without this a wide table refuses to shrink and pushes the flex item past
	   the container instead of scrolling inside it. */
	min-width: 0;
}

/* Notices are printed as direct children of the same wrapper, so as flex items
   they would shrink to the width of their own text and sit as a stub beside the
   nav rather than spanning the area they are reporting on. */
.woocommerce-account .woocommerce > .woocommerce-message,
.woocommerce-account .woocommerce > .woocommerce-info,
.woocommerce-account .woocommerce > .woocommerce-error,
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	flex: 1 1 100%;
	min-width: 0;
}

/* Logged out, the same wrapper holds `#customer_login` — WooCommerce's own
   two-column login/register markup, which without woocommerce-layout.css runs
   the two forms together with nothing between "Lost your password?" and the
   Register heading below it. */
.woocommerce-account #customer_login {
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 782px) {
	.woocommerce-account #customer_login.u-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
	}

	.woocommerce-account #customer_login > .u-column1,
	.woocommerce-account #customer_login > .u-column2 {
		width: auto;
		float: none;
	}
}

/* --- navigation --------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a,
.woocommerce-account .woocommerce-MyAccount-navigation-link a:link,
.woocommerce-account .woocommerce-MyAccount-navigation-link a:visited {
	display: block;
	/* 44px minimum, so a tab is a thumb-sized target and not a 33px one. */
	min-height: 44px;
	margin: 0;
	padding: 11px 18px;
	border: 1px solid var(--me-pink, #BE5B8F);
	border-radius: 0.5em;
	background: transparent;
	color: var(--me-ink, #000000);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation-link a:active {
	background: var(--me-grey-tint, #F2F2F2);
	color: var(--me-ink-hover, #6C6C6C);
	text-decoration: none;
}

/* The theme draws the current tab exactly like the others, so there is nothing
   on screen saying where you are. Filled, in the accessible pink — white on
   #BE5B8F is 4.1:1 and would fail, white on #8E2F63 is 7.7:1. */
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a:link,
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a:visited,
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a:hover {
	border-color: var(--me-pink-accessible, #8E2F63);
	background: var(--me-pink-accessible, #8E2F63);
	color: #fff;
	font-weight: 600;
}

/* --- content ------------------------------------------------------------ */

.woocommerce-account .woocommerce-MyAccount-content > p {
	margin: 0 0 1em;
	/* Long-form copy at full container width is a wall; the tables and forms
	   below stay unconstrained. */
	max-width: 68ch;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend {
	margin: 1.5em 0 0.6em;
	color: var(--me-ink, #000000);
	font-size: 22px;
	line-height: 1.25;
}

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

/* --- tables, forms, buttons and notices ---------------------------------

   Scoped to `.woocommerce-account .woocommerce` rather than to
   `.woocommerce-MyAccount-content`, so the logged-out login and register forms
   get the same treatment as the signed-in ones — they are the same account
   area to the person using it, and WooCommerce puts them outside the content
   div. The link colours above stay on the narrower scope on purpose: at
   `.woocommerce-account .woocommerce a:link` they would tie with the navigation
   pill rules and be decided by source order. */

/* --- tables ------------------------------------------------------------- */

/* Orders, downloads, and the auction plugin's own lists. Wrapped in its own
   scroller so a wide table never makes the page scroll sideways. */
.woocommerce-account .woocommerce .shop_table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border: 0;
	border-collapse: collapse;
	margin: 0 0 1.5em;
}

.woocommerce-account .woocommerce .shop_table th,
.woocommerce-account .woocommerce .shop_table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid #e6e6e6;
	text-align: left;
	vertical-align: middle;
}

.woocommerce-account .woocommerce .shop_table thead th {
	background: var(--me-pink-tint, #f7ecf3);
	color: var(--me-ink, #000000);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --- forms ---------------------------------------------------------------

   Mirrored onto `.me-auction-register` as well as the account area: the
   standalone registration page is not `.woocommerce-account`, and it now asks
   for four fields rather than one, so leaving its inputs at the browser's
   default `size` looked like a different site to the form beside it. */

.woocommerce-account .woocommerce .woocommerce-form-row,
.woocommerce-account .woocommerce .form-row,
.me-auction-register .woocommerce-form-row,
.me-auction-register .form-row {
	margin: 0 0 18px;
}

.woocommerce-account .woocommerce label,
.me-auction-register label {
	display: block;
	margin: 0 0 6px;
	color: var(--me-ink, #000000);
	font-size: 14px;
	font-weight: 600;
}

/* A checkbox label wraps its own input ("Remember me", the auction plugin's
   ending-soon notification), so the block treatment above would stack the box
   on the words and overlap them. */
.woocommerce-account .woocommerce label.woocommerce-form__label-for-checkbox,
.woocommerce-account .woocommerce label.checkbox {
	/* `flex`, not `inline-flex`: WooCommerce puts "Remember me" and the Log in
	   button inside the same <p>, so an inline label leaves them sharing a line.
	   Block-level pushes the button to its own row; `fit-content` keeps the
	   label's click target on the words rather than the full width of the form,
	   where a stray click would silently toggle the box. */
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-weight: 400;
}

.woocommerce-account .woocommerce label.woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-account .woocommerce label.checkbox input[type="checkbox"] {
	width: auto;
	min-height: 0;
	margin: 0;
}

.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="tel"],
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea,
.me-auction-register input[type="text"],
.me-auction-register input[type="email"],
.me-auction-register input[type="tel"],
.me-auction-register input[type="password"],
.me-auction-register select,
.me-auction-register textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	/* A11Y-2: #cfcfcf on white is 1.56:1, and this border is the field's ONLY
	   boundary — no fill difference, no underline — so it has to clear WCAG
	   1.4.11's 3:1 minimum for a UI component on its own. --me-grey-light was
	   checked first and rejected: it is 2.71:1 (see the A11Y-6 note in
	   gift-certificate.css) and still fails. --me-grey (#706F6F), already used
	   for this field's text above, computes to 5.01:1 against #ffffff and is
	   reused here rather than a one-off colour. */
	border: 1px solid var(--me-grey, #706F6F);
	border-radius: 0.5em;
	background: #fff;
	color: var(--me-ink, #000000);
	font-size: 16px;
}

.woocommerce-account .woocommerce input:focus-visible,
.woocommerce-account .woocommerce select:focus-visible,
.woocommerce-account .woocommerce textarea:focus-visible,
.me-auction-register input:focus-visible,
.me-auction-register select:focus-visible,
.me-auction-register textarea:focus-visible {
	border-color: var(--me-pink-accessible, #8E2F63);
	outline: 2px solid var(--me-pink-accessible, #8E2F63);
	outline-offset: 1px;
}

/* Helper text under a field — "A link to set a password will be sent…", and why
   we are asking for a phone number. Secondary to the labels above them, so they
   should not read at the same weight as the form itself. */
.me-auction-register .me-auction-register-note {
	margin: -8px 0 18px;
	color: var(--me-grey, #706F6F);
	font-size: 13px;
	line-height: 1.45;
}

/* "Password change" is a legend with no separation from the fields above it. */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin: 2em 0 0;
	padding: 1.5em 0 0;
	border: 0;
	border-top: 1px solid #e6e6e6;
}

.woocommerce-account .woocommerce span.description,
.woocommerce-account .woocommerce em {
	display: block;
	margin: 6px 0 0;
	color: var(--me-grey, #706F6F);
	font-size: 13px;
	font-style: normal;
	line-height: 1.45;
}

/* The addresses endpoint ships two columns and, with the layout stylesheet
   dequeued, no rule to put them side by side. */
@media (min-width: 640px) {
	.woocommerce-account .woocommerce .u-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.woocommerce-account .woocommerce .u-columns > .col-1,
	.woocommerce-account .woocommerce .u-columns > .col-2 {
		width: auto;
		float: none;
	}
}

/* WooCommerce ships first/last name as two 47% floats with no breakpoint of
   their own, so on a phone they stay side by side at ~150px each. */
@media (max-width: 639px) {
	.woocommerce-account .woocommerce .form-row-first,
	.woocommerce-account .woocommerce .form-row-last,
	.woocommerce-account .woocommerce .woocommerce-form-row--first,
	.woocommerce-account .woocommerce .woocommerce-form-row--last {
		width: 100%;
		float: none;
	}
}

/* --- buttons ------------------------------------------------------------ */

/* Colour is left to the theme, which already paints these the site pink. What
   is missing is the touch target and the corner radius the rest of this work
   uses — and the theme's button text-shadow, which the client asked to lose
   (2026-07-31). Scoped to the account area's own buttons for the reason set out
   on the lot cards in auction-listing.css: this stylesheet does not load on
   every page, so an unscoped rule would take the shadow off the site's buttons
   HERE and nowhere else. */
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button[type="submit"],
.woocommerce-account .woocommerce input[type="submit"],
.me-auction-register .button,
.me-auction-register button[type="submit"],
.me-auction-register input[type="submit"] {
	min-height: 44px;
	padding: 11px 26px;
	border-radius: 0.5em;
	font-size: 15px;
	line-height: 1.4;
	text-shadow: none;
}

/* A11Y-9: neither of these selectors had a :focus-visible rule, so "Create
   account" — the form the site's ~100 first-time bidders all have to get
   through — fell back to whatever outline the theme's own stylesheet leaves
   in place, and several Themeco skins suppress it outright. Shaped like the
   `a:focus-visible` rule near the top of this file rather than the input
   rule further up: these buttons keep their border-less, theme-painted fill
   (see the comment above), so there is no border-color to swap on focus the
   way the inputs do — only the outline itself is available here, same as
   for a link. */
.woocommerce-account .woocommerce .button:focus-visible,
.woocommerce-account .woocommerce button[type="submit"]:focus-visible,
.woocommerce-account .woocommerce input[type="submit"]:focus-visible,
.me-auction-register .button:focus-visible,
.me-auction-register button[type="submit"]:focus-visible,
.me-auction-register input[type="submit"]:focus-visible {
	outline: 3px solid var(--me-pink-accessible, #8E2F63);
	outline-offset: 2px;
}

/* --- notices ------------------------------------------------------------ */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 1.5em;
	padding: 14px 18px;
	border: 0;
	border-left: 4px solid var(--me-pink, #BE5B8F);
	border-radius: 0.5em;
	background: var(--me-pink-tint, #f7ecf3);
	color: var(--me-grey, #706F6F);
	list-style: none;
}

.woocommerce-account .woocommerce-error {
	border-left-color: #B3261E;
	background: #fdecea;
	color: #7a1c16;
}

.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
	margin-left: auto;
}

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 479px) {
	.woocommerce-account .woocommerce {
		gap: 24px;
	}

	/* Full-width rows read better than a ragged two-per-line wrap at this size,
	   and each row is already a 44px target. Stretched to the container rather
	   than left content-width, so the column reads as one menu instead of seven
	   differently-sized pills. */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link {
		width: 100%;
	}

	.woocommerce-account .woocommerce .button,
	.woocommerce-account .woocommerce button[type="submit"],
	.woocommerce-account .woocommerce input[type="submit"] {
		width: 100%;
	}

	.woocommerce-account .woocommerce-message .button,
	.woocommerce-account .woocommerce-info .button {
		margin-left: 0;
	}
}