/*
 * My Account, and the order received page.
 *
 * No mockup covers either, so nothing here invents a look: the layout is the
 * content pages' sidebar grid, the menu is their nav card, and the forms and
 * tables are the ones forms.css and shop.css already draw. What this file does
 * is put WooCommerce's own markup into those shapes.
 *
 * Every value comes from tokens.css. No raw colours or sizes belong in here.
 */

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

/*
 * WooCommerce prints the menu and the panel as siblings inside `.woocommerce`,
 * so the grid goes on that wrapper rather than on anything of ours. The track
 * widths are the content pages' own, so an account screen and an information
 * page line up when a visitor moves between them.
 */
/*
 * Logged out there is no menu, and a login form does not want a 1320px
 * measure, so the narrow centred block is the default and the two column grid
 * is what a signed in visitor opts into.
 *
 * That order matters. This was written the other way round, with the grid as
 * the default and `:not(:has(.woocommerce-MyAccount-navigation))` turning it
 * off. `:has()` is a progressive enhancement everywhere else in this theme,
 * meaning the rule can be dropped and the page still reads. Here it could not:
 * a browser without `:has()` keeps the grid, and the login form is then squeezed
 * into a 280px column with an empty 1fr beside it. `body.logged-in` is
 * WordPress's own class and needs no support to test.
 */
.fms-account .woocommerce {
	max-width: 1080px;
	margin-inline: auto;
}

/*
 * A page with one form on it, which is login when registration is off, and both
 * of the password reset steps. A direct child selector rather than `:has()`,
 * because when both forms are present WooCommerce wraps each in a column and
 * neither is a child of `.woocommerce` any more. So this caps the lone form and
 * leaves the pair alone, with no `:has()` and nothing to degrade.
 */
.fms-account .woocommerce > form,
.fms-account .woocommerce > h2,
.fms-account .woocommerce > .woocommerce-ResetPassword {
	max-width: 520px;
	margin-inline: auto;
}

/*
 * Login and register, side by side, when registration is on. Stacked they read
 * as one long column with a heading floating between two cards.
 */
.fms-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}

.fms-account .u-columns.col2-set > div > h2 {
	margin-top: 0;
}

@media (max-width: 900px) {
	.fms-account .u-columns.col2-set {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}
}

body.logged-in .fms-account .woocommerce {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 64px;
	max-width: none;
	margin-inline: 0;
	align-items: start;
}

.fms-account .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* -------------------------------------------------------------------- menu */

.fms-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: calc(var(--fms-nav-h) + 20px);
	padding: 14px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

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

.fms-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--fms-tap-min);
	padding: 15px 18px;
	border-radius: 10px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
	text-decoration: none;
}

.fms-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--fms-cream);
	color: var(--fms-ink);
}

.fms-account .woocommerce-MyAccount-navigation .is-active > a {
	background: var(--fms-sage);
	color: var(--fms-ink);
}

/* Logging out is not a place in the account, so it does not sit with the rest. */
.fms-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--fms-border);
}

.fms-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--fms-muted);
}

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

.fms-account .woocommerce-MyAccount-content > p,
.fms-account .woocommerce-MyAccount-content > form,
.fms-account .woocommerce-MyAccount-content > table,
.fms-account .woocommerce-MyAccount-content > div {
	margin-block: 0 24px;
}

.fms-account .woocommerce-MyAccount-content > p {
	font-size: var(--fms-size-lead);
	line-height: var(--fms-leading-lead);
}

.fms-account h2,
.fms-account .woocommerce-column__title,
.fms-account .woocommerce-Address-title h3 {
	margin: 0 0 20px;
	font-family: var(--fms-font-display);
	font-size: var(--fms-size-h3);
	line-height: var(--fms-leading-heading);
}

/* ------------------------------------------------- the login form as a card */

.fms-account .woocommerce-form-login,
.fms-account .woocommerce-form-register,
.fms-account .woocommerce-ResetPassword {
	padding: 36px 36px 32px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

.fms-account .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
}

.fms-account .form-row label {
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
}

/*
 * WooCommerce wraps the password field so it can hang a reveal button off the
 * end of it. Unstyled, that button rendered as a 16 by 6 pixel sliver above the
 * "Remember me" row, which read as a stray empty pill.
 */
.fms-account .password-input {
	position: relative;
	display: block;
}

.fms-account .show-password-input {
	position: absolute;
	top: 50%;
	right: 6px;
	width: var(--fms-tap-min);
	height: var(--fms-tap-min);
	transform: translateY(-50%);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.fms-account .show-password-input::after {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin-inline: auto;
	border: 1.5px solid var(--fms-muted);
	border-radius: 50% 0;
	transform: rotate(45deg);
}

.fms-account .show-password-input:hover::after,
.fms-account .show-password-input.display-password::after {
	border-color: var(--fms-brass);
}

.fms-account .password-input input {
	padding-right: 52px;
}

/*
 * The remember row: a checkbox and the submit, on one line, properly aligned.
 *
 * The label is the target, not the box: clicking the words toggles the input,
 * so it is the label that has to reach 44px. The checkbox stays at 24, which
 * is the size a checkbox should be.
 */
.fms-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--fms-tap-min);
	margin: 0;
	font-size: var(--fms-size-meta);
}

.fms-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}

/*
 * 18px was under the 24px minimum in WCAG 2.5.8, and a checkbox has no
 * surrounding box to grow into, so the control itself carries the size.
 */
.fms-account input[type="checkbox"] {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--fms-forest);
}

.fms-account .woocommerce-LostPassword {
	margin: 0;
	font-size: var(--fms-size-meta);
}

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

.fms-account table {
	width: 100%;
	border-collapse: collapse;
	background: var(--fms-white);
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	overflow: hidden;
}

.fms-account table th,
.fms-account table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--fms-border);
	font-size: var(--fms-size-meta);
}

.fms-account table thead th {
	background: var(--fms-forest);
	color: var(--fms-cream);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fms-account table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * The order number is a link, and at 50 by 20 it was under the 24px minimum in
 * WCAG 2.5.8. A link in a data cell is a control rather than a link in a
 * sentence, so the inline exception does not cover it.
 *
 * `th` as well as `td`: WooCommerce puts the order number in a row header, so
 * a rule that named only `td` matched nothing, which is exactly what the first
 * attempt did.
 */
.fms-account table td a:not(.button):not(.woocommerce-button),
.fms-account table tbody th a:not(.button):not(.woocommerce-button) {
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
}

/* ----------------------------------------------------------------- addresses */

.fms-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.fms-account .woocommerce-Address {
	padding: 28px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

.fms-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.fms-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: var(--fms-leading-body);
}

/* --------------------------------------------------------------- messages */

.fms-account .woocommerce-message,
.fms-account .woocommerce-info,
.fms-account .woocommerce-error {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-left: 3px solid var(--fms-brass);
	border-radius: var(--fms-radius-note);
	background: var(--fms-sage);
	list-style: none;
	font-size: var(--fms-size-meta);
}

/* ------------------------------------------------------------- narrower ---
 * The sidebar goes above the panel before the columns get too tight to read,
 * at the same width the content pages drop theirs.
 */

@media (max-width: 900px) {
	.fms-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.fms-account .woocommerce-MyAccount-navigation {
		position: static;
	}

	.fms-account .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.fms-account .woocommerce-form-login,
	.fms-account .woocommerce-form-register,
	.fms-account .woocommerce-ResetPassword {
		padding: 24px 20px;
	}

	.fms-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}


/* ============================================== the order received page === */

/*
 * Reached once, by somebody who has just spent money, and until now the least
 * finished page on the site: WooCommerce's raw output in the 770px reading
 * measure, pushed two thirds of the way across, with the order summary as a
 * bulleted list and an unstyled table under it.
 *
 * It reuses what the account screens already have rather than inventing a
 * second way of drawing a table and an address.
 */

.fms-received .woocommerce {
	max-width: 820px;
	margin-inline: auto;
}

/* The "thank you, your order has been received" line, as a card rather than a
 * loose sentence. */
.fms-received .woocommerce-notice--success {
	margin: 0 0 32px;
	padding: 20px 24px;
	border: 1px solid var(--fms-border);
	border-left: 3px solid var(--fms-brass);
	border-radius: var(--fms-radius-note);
	background: var(--fms-white);
	font-family: var(--fms-font-display);
	font-size: var(--fms-size-h4);
	line-height: var(--fms-leading-heading);
	color: var(--fms-ink);
}

/*
 * Order number, date, total, payment method. WooCommerce ships these as a
 * bulleted list; they are a summary, so they are drawn as one.
 */
.fms-received .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin: 0 0 40px;
	padding: 0;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-border);
	overflow: hidden;
	list-style: none;
}

.fms-received .woocommerce-order-overview li {
	margin: 0;
	padding: 18px 20px;
	background: var(--fms-white);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: var(--fms-size-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fms-muted);
}

/* The value sits inside a <strong> that WooCommerce puts after the label. */
.fms-received .woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-family: var(--fms-font-display);
	font-weight: var(--fms-weight-semibold);
	font-size: var(--fms-size-h4);
	letter-spacing: 0;
	text-transform: none;
	color: var(--fms-ink);
}

.fms-received .woocommerce-order-details,
.fms-received .woocommerce-customer-details {
	margin: 0 0 40px;
}

.fms-received h2,
.fms-received .woocommerce-column__title {
	margin: 0 0 20px;
	font-family: var(--fms-font-display);
	font-size: var(--fms-size-h3);
	line-height: var(--fms-leading-heading);
	color: var(--fms-ink);
}

/* The order table, matching the account's order history table. */
.fms-received table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	overflow: hidden;
}

.fms-received table th,
.fms-received table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--fms-border);
	font-size: var(--fms-size-meta);
}

.fms-received table thead th {
	background: var(--fms-forest);
	color: var(--fms-cream);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fms-received table tfoot th {
	font-weight: var(--fms-weight-medium);
	color: var(--fms-muted);
}

.fms-received table tfoot tr:last-child th,
.fms-received table tfoot tr:last-child td {
	border-bottom: 0;
	font-weight: var(--fms-weight-bold);
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

.fms-received table td a {
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
	color: var(--fms-ink);
}

.fms-received .woocommerce-Price-amount {
	color: var(--fms-brass);
	font-weight: var(--fms-weight-medium);
}

/*
 * The address, as the card the account screens use.
 *
 * `address` is named directly as well as the column, because WooCommerce only
 * wraps addresses in columns when there are two of them. An order that ships to
 * the billing address renders one bare `<address>` inside the section, which is
 * the common case and was the one left sitting on the page ground.
 */
.fms-received .woocommerce-customer-details > address {
	display: block;
	padding: 28px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

.fms-received .woocommerce-customer-details p {
	margin: 12px 0 0;
}

.fms-received .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.fms-received .woocommerce-column {
	padding: 28px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

.fms-received .woocommerce-column address {
	margin: 0;
	font-style: normal;
	font-size: var(--fms-size-meta);
	line-height: var(--fms-leading-body);
}

@media (max-width: 600px) {
	.fms-received .woocommerce-order-overview {
		grid-template-columns: minmax(0, 1fr);
	}

	.fms-received table th,
	.fms-received table td {
		padding: 14px 16px;
	}
}