/*
 * Customer account.
 *
 * Operate mode, in Impeccable's terms: the visitor is in a task, not reading.
 * Two people arrive here — someone reordering what they already know, and
 * someone with a problem about an order, who is tense. Neither is browsing.
 * The interface should disappear into the task.
 *
 * Everything WooCommerce renders here is the classic shortcode and its legacy
 * PHP templates, so this file dresses markup it does not own. It changes no
 * structure: every rule either survives a WooCommerce update or stops matching.
 *
 * Scoping note (CLAUDE.md section 7): `.woocommerce-account` is a body class and
 * never appears alone. Where it is needed to say "this page", it is paired with
 * `main` to say "this region" — the P9 regression is the reason the rule exists.
 */

/* --- Type -----------------------------------------------------------------
 *
 * One family, Inter, which is also what section 5.5 gives the whole functional
 * interface. Operate mode does not want a display/body pairing, and the account
 * is the clearest case on the site: nothing here is editorial.
 *
 * Cormorant is removed from the page title for the same reason. "My account" in
 * a 40px Garamond announces a magazine; this is a tool. Hierarchy comes from
 * weight and size, which is also how the emails will have to carry it.
 */

.woocommerce-account main .wp-block-post-title {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--display-md );
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--brown );
}

/*
 * Safety net, not a duplicate of the rule above: the global `heading` element
 * style (theme.json) now paints every h1-h6 purple, which is right for the
 * brand pages and wrong here — account is Operate mode (CLAUDE.md section 13)
 * and stays brown on purpose, the reasoning for the whole file. A one-off
 * selector per heading is how "Login" slipped through un-styled and went
 * purple next to a brown "My account" on the same screen. This catches every
 * heading under the account region, present or future, instead of one at a
 * time.
 */
.woocommerce-account main h1,
.woocommerce-account main h2,
.woocommerce-account main h3,
.woocommerce-account main h4,
.woocommerce-account main h5,
.woocommerce-account main h6 {
	color: var( --wp--preset--color--brown );
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-Address-title h3 {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--heading );
	font-weight: 600;
	color: var( --wp--preset--color--brown );
}

/* Numbers read, they do not decorate (section 5.5). */
.woocommerce-orders-table__cell-order-total,
.woocommerce-orders-table__cell-order-number,
.woocommerce-table--order-details .amount,
.woocommerce-table--order-details td,
.woocommerce-Price-amount {
	font-family: var( --wp--preset--font-family--sans );
	font-variant-numeric: tabular-nums;
}

/* --- Navigation -----------------------------------------------------------
 *
 * WooCommerce ships every item as a link, and this theme's link colour is
 * purple, so the account arrived with ten purple things on screen. Section 5.3
 * allows one primary action per screen; a menu is not it.
 *
 * So the menu is brown, and the current item is marked the way a menu should
 * mark it: weight, plus a bar on the leading edge. Two signals, neither of them
 * colour alone, which is also what the palette rules ask for on state.
 */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-inline-start: 1px solid var( --wp--preset--color--border );
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var( --wp--preset--spacing--xs ) var( --wp--preset--spacing--sm );
	margin-inline-start: -1px;
	border-inline-start: 3px solid transparent;
	color: var( --wp--preset--color--brown );
	font-size: var( --wp--preset--font-size--base );
	font-weight: 400;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible {
	background-color: var( --wp--preset--color--surface );
	text-decoration: underline;
}

.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a[aria-current] {
	border-inline-start-color: var( --wp--preset--color--brown );
	font-weight: 600;
}

/* --- Layout ---------------------------------------------------------------
 *
 * Menu beside content on desktop, stacked on mobile. WooCommerce floats these
 * by default, which leaves the content column as wide as the viewport and the
 * page looking like an unfinished draft.
 */

/*
 * The two-column account layout applies only where there are two columns to
 * lay out — :has() asks for the navigation, which exists only once somebody is
 * signed in.
 *
 * Without that condition the same rule reaches the signed-out page, whose
 * children are the notices wrapper and the login/register pair: the grid then
 * puts notices in one column and both forms in the other, 240px wide, where
 * WooCommerce's floats halve them again to 115px each. That is what the first
 * version of this file did.
 */

/*
 * The account is a tool, and the page template's prose measure is not the width
 * for one: 760px leaves the dashboard's two panels at 238px each.
 *
 * The cap sits on `.entry-content` itself, not only on its children, so a wider
 * max-width on the account wrapper achieves nothing — a box cannot outgrow its
 * parent. The page's own content column is widened instead, on account pages
 * only. Paragraphs stay readable: the measure rule further down still holds
 * prose to a line length, which is the thing the 760px was protecting.
 */

.woocommerce-account main .entry-content {
	max-inline-size: var( --wp--style--global--wide-size );
}

.woocommerce-account main .woocommerce:has( .woocommerce-MyAccount-navigation ) {
	display: grid;
	gap: var( --wp--preset--spacing--md );
	grid-template-columns: 1fr;
	align-items: start;
}

@media ( min-width: 782px ) {

	.woocommerce-account main .woocommerce:has( .woocommerce-MyAccount-navigation ) {
		grid-template-columns: minmax( 12rem, 15rem ) minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--lg );
	}
}

/*
 * Signed out: sign in and create an account, side by side above the breakpoint
 * and stacked below it, each capped so neither becomes a long thin ribbon.
 * WooCommerce floats these; the floats are dropped rather than fought.
 */

.woocommerce-account main .u-columns.col2-set {
	display: grid;
	gap: var( --wp--preset--spacing--md );
	grid-template-columns: 1fr;
	align-items: start;
	max-inline-size: 48rem;
}

@media ( min-width: 782px ) {

	.woocommerce-account main .u-columns.col2-set {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --wp--preset--spacing--lg );
	}
}

/*
 * WooCommerce's own rule is `.woocommerce .col2-set .col-1 { float: left;
 * width: 48% }`, three classes deep, so a selector with fewer loses and the
 * columns stay 48% of their grid cell — 175px inside a 364px column. Matching
 * its shape wins without !important.
 */
.woocommerce-account main .col2-set .col-1,
.woocommerce-account main .col2-set .col-2 {
	float: none;
	inline-size: auto;
	width: auto;
}

.woocommerce-account main .u-columns form {
	padding: var( --wp--preset--spacing--sm );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--md, 8px );
}

/*
 * "Login" and "Register" are h2 outside the account content wrapper, so the
 * heading rule above did not reach them and they arrived in Cormorant.
 */
.woocommerce-account main .u-columns h2 {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--heading );
	font-weight: 600;
	color: var( --wp--preset--color--brown );
}

/* The registration privacy note is small print, and reads as small print. */
.woocommerce-account main .woocommerce-privacy-policy-text p {
	color: var( --wp--preset--color--text-muted );
	font-size: var( --wp--preset--font-size--sm );
}

/*
 * WooCommerce floats these at 30% and 68%, from a two-class selector, so a
 * one-class rule loses and the columns take 30% of their grid cell instead of
 * filling it — a 72px menu inside a 240px column. Scoped through `main` to
 * outrank it without !important.
 */
.woocommerce-account main .woocommerce-MyAccount-navigation,
.woocommerce-account main .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	inline-size: auto;
}

/* Prose inside the account still gets a readable measure. */
.woocommerce-MyAccount-content p {
	max-inline-size: var( --wp--custom--measure--prose, 65ch );
}

/* --- Forms ----------------------------------------------------------------
 *
 * Inputs never below 16px, which is the AA floor for body text and also what
 * stops iOS zooming the page when a field takes focus.
 */

.woocommerce-form input[type="text"],
.woocommerce-form input[type="email"],
.woocommerce-form input[type="password"],
.woocommerce-form input[type="tel"],
.woocommerce-EditAccountForm input,
.woocommerce-address-fields input,
.woocommerce-address-fields select,
.woocommerce-ResetPassword input {
	inline-size: 100%;
	min-block-size: 44px;
	padding: var( --wp--preset--spacing--xs );
	border: 1px solid var( --wp--preset--color--gray-dark );
	border-radius: var( --wp--custom--radius--sm, 4px );
	background-color: var( --wp--preset--color--white );
	color: var( --wp--preset--color--brown );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--base );
}

.woocommerce-form label,
.woocommerce-address-fields label,
.woocommerce-EditAccountForm label {
	display: block;
	margin-block-end: var( --wp--preset--spacing--xxs );
	color: var( --wp--preset--color--brown );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
}

.woocommerce-form .required,
.woocommerce-address-fields .required {
	color: var( --wp--preset--color--error );
	text-decoration: none;
}

/*
 * The one purple per screen: the button that commits the change. Everything
 * else in the account — menu, table links, "add address" — stays brown.
 */
.woocommerce-account main button[type="submit"],
.woocommerce-account main .woocommerce-Button,
.woocommerce-account main .button {
	min-block-size: 44px;
	padding-inline: var( --wp--preset--spacing--sm );
	border: 0;
	border-radius: var( --wp--custom--radius--md, 8px );
	background-color: var( --wp--preset--color--purple );
	color: var( --wp--preset--color--white );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--base );
	font-weight: 600;
	cursor: pointer;
}

.woocommerce-account main button[type="submit"]:hover,
.woocommerce-account main .woocommerce-Button:hover,
.woocommerce-account main .button:hover {
	background-color: var( --wp--preset--color--purple-hover );
}

/* Links inside the account content are brown, not the site's purple. */
/*
 * Buttons are excluded, and that exclusion is the fix for a real defect rather
 * than tidiness: `.petpartners-dashboard__button` has a purple fill, and this
 * rule outranked its own colour and painted the label brown — brown on purple,
 * 1.61:1, the exact pair section 5.3 forbids in both directions. The same
 * mistake P9 made, in a different file.
 */
.woocommerce-MyAccount-content a:not( .button, .woocommerce-Button, .wp-element-button, .petpartners-dashboard__button ),
.woocommerce-MyAccount-navigation a {
	color: var( --wp--preset--color--brown );
}

.woocommerce-account main :focus-visible {
	outline: 2px solid var( --wp--preset--color--purple );
	outline-offset: 2px;
}

/* --- Notices --------------------------------------------------------------
 *
 * WooCommerce already gives the notice role="alert" and tabindex="-1", so it is
 * announced and reachable; account.js moves focus onto it after a failed
 * submit, because an alert already present at page load is not reliably read.
 *
 * Never colour alone (section 5.3): the border carries the state alongside the
 * word "Error" that WooCommerce prints.
 */

.woocommerce-account main .wc-block-components-notice-banner,
.woocommerce-account main .woocommerce-message,
.woocommerce-account main .woocommerce-info {
	margin-block-end: var( --wp--preset--spacing--sm );
	padding: var( --wp--preset--spacing--xs ) var( --wp--preset--spacing--sm );
	border-inline-start: 4px solid var( --wp--preset--color--brown );
	border-radius: var( --wp--custom--radius--sm, 4px );
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--brown );
	font-size: var( --wp--preset--font-size--base );
}

.woocommerce-account main .wc-block-components-notice-banner.is-error {
	border-inline-start-color: var( --wp--preset--color--error );
}

.woocommerce-account main .wc-block-components-notice-banner.is-success,
.woocommerce-account main .woocommerce-message {
	border-inline-start-color: var( --wp--preset--color--success );
}

/* --- Tables ---------------------------------------------------------------
 *
 * Operate mode allows density. The orders table is a table, and it stays one on
 * desktop; below the breakpoint it becomes rows of labelled pairs, because a
 * five-column table at 375px is a horizontal scroll nobody wants in the middle
 * of finding an order.
 */

.woocommerce-orders-table,
.woocommerce-table--order-details {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--base );
}

.woocommerce-orders-table th,
.woocommerce-table--order-details th {
	padding: var( --wp--preset--spacing--xs );
	border-block-end: 1px solid var( --wp--preset--color--border );
	color: var( --wp--preset--color--text-muted );
	font-size: var( --wp--preset--font-size--label );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: start;
	text-transform: uppercase;
}

.woocommerce-orders-table td,
.woocommerce-table--order-details td {
	padding: var( --wp--preset--spacing--xs );
	border-block-end: 1px solid var( --wp--preset--color--border );
	vertical-align: top;
}

@media ( max-width: 781px ) {

	/*
	 * WooCommerce already turns this table into rows of labelled pairs below
	 * its own breakpoint — hidden head, `data-title` printed by a ::before.
	 * That work is left alone; duplicating it only produced two rules fighting
	 * over the same cell. What is added is the card frame, and what is fixed is
	 * the order number.
	 */

	.woocommerce-account main .woocommerce-orders-table tr {
		display: block;
		margin-block-end: var( --wp--preset--spacing--sm );
		padding: var( --wp--preset--spacing--xs );
		border: 1px solid var( --wp--preset--color--border );
		border-radius: var( --wp--custom--radius--md, 8px );
	}

	/*
	 * WooCommerce hides the row's <th> on mobile, which is where it keeps the
	 * order number — so the orders list arrives with no order numbers in it,
	 * on the device most people check an order from. It is restored as the
	 * card's heading, which is what it is.
	 *
	 * WooCommerce's rule is `.woocommerce table.shop_table_responsive tbody th`
	 * — an exact specificity tie with the obvious selector, which its later
	 * stylesheet then wins. This one is deliberately heavier.
	 */
	.woocommerce-account main table.shop_table_responsive tbody th.woocommerce-orders-table__cell {
		display: block;
		padding: 0 0 var( --wp--preset--spacing--xxs );
		border-block-end: 1px solid var( --wp--preset--color--border );
		margin-block-end: var( --wp--preset--spacing--xxs );
		color: var( --wp--preset--color--brown );
		font-size: var( --wp--preset--font-size--heading );
		font-weight: 600;
		letter-spacing: normal;
		text-transform: none;
		font-variant-numeric: tabular-nums;
	}
}

/* --- Row actions ----------------------------------------------------------
 *
 * "View" repeats once per order, so shipping it as the purple button would put
 * as many primary actions on the screen as the customer has orders — the state
 * section 5.3 exists to prevent. It is a link to a detail page, and it is
 * dressed as one: outlined, brown, same 44px target.
 */

.woocommerce-account main .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account main .woocommerce-orders-table__cell-order-actions .woocommerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: auto;
	background-color: transparent;
	border: 2px solid var( --wp--preset--color--brown );
	color: var( --wp--preset--color--brown );
}

.woocommerce-account main .woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-account main .woocommerce-orders-table__cell-order-actions .woocommerce-button:hover {
	background-color: var( --wp--preset--color--brown );
	color: var( --wp--preset--color--white );
}

/* --- Show-password toggle -------------------------------------------------
 *
 * WCAG 2.2 AA 2.5.8 again, and this time it really is only size: WooCommerce's
 * eye button measures 22x22 against a 24x24 floor, sitting on its own with
 * nothing near enough to obscure it. Two pixels.
 *
 * Taken to 32x32, which is a thumb rather than the minimum, and kept inside the
 * field by pulling the input's trailing padding out of the way so the toggle
 * never sits on top of what somebody is typing.
 */

.woocommerce-account main .password-input .show-password-input {
	inline-size: 32px;
	block-size: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	inset-inline-end: var( --wp--preset--spacing--xxs );
}

.woocommerce-account main .password-input input {
	padding-inline-end: calc( 32px + var( --wp--preset--spacing--xs ) );
}

/* --- Clearfix pseudo-elements become grid items ---------------------------
 *
 * WooCommerce clears its floats the old way: `.col2-set::before` and `::after`
 * with `content: " "; display: table`. That is invisible in a block container
 * and decisive in a grid one — a pseudo-element with content is a grid item, so
 * the ::before took cell one, pushed the sign-in column into cell two, and sent
 * the register column onto a second row. The page rendered as two boxes on a
 * diagonal with an empty quadrant, which is exactly what it looked like.
 *
 * The floats are gone in these containers, so the clearfix has nothing left to
 * clear and is removed rather than worked around.
 */

.woocommerce-account main .woocommerce:has( .woocommerce-MyAccount-navigation )::before,
.woocommerce-account main .woocommerce:has( .woocommerce-MyAccount-navigation )::after,
.woocommerce-account main .u-columns.col2-set::before,
.woocommerce-account main .u-columns.col2-set::after {
	content: none;
	display: none;
}

/* --- One primary action per screen ----------------------------------------
 *
 * The signed-out page carries two commit buttons, and section 5.3 allows one
 * purple per screen. Signing in is the primary action — almost everybody
 * reaching /my-account/ already has an account, and the people who do not
 * mostly create one at checkout instead (ADR-036). So Register takes the
 * outline treatment: same size, same target, second in the hierarchy.
 */

.woocommerce-account main .woocommerce-form-register button[type="submit"] {
	background-color: transparent;
	border: 2px solid var( --wp--preset--color--brown );
	color: var( --wp--preset--color--brown );
}

.woocommerce-account main .woocommerce-form-register button[type="submit"]:hover {
	background-color: var( --wp--preset--color--brown );
	color: var( --wp--preset--color--white );
}

/*
 * Links on the signed-out page follow the same rule as the rest of the account:
 * brown, not the site's purple. "Lost your password?" and the privacy-policy
 * link sit beside the one purple button, and three purple things on a screen
 * is the state section 5.3 exists to prevent.
 */
.woocommerce-account main .u-columns a:not( .button, .woocommerce-Button, .wp-element-button ),
.woocommerce-account main .woocommerce-privacy-policy-text a {
	color: var( --wp--preset--color--brown );
}

/* --- Dashboard ------------------------------------------------------------
 *
 * Two panels answering the two questions somebody opens an account for: where
 * is my last order, and where does a parcel go. See the template override for
 * why WooCommerce's own copy had to be replaced rather than filtered.
 */

.petpartners-dashboard {
	display: grid;
	gap: var( --wp--preset--spacing--sm );
	grid-template-columns: 1fr;
}

@media ( min-width: 1024px ) {

	.petpartners-dashboard {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		align-items: start;
	}
}

.petpartners-dashboard__panel {
	padding: var( --wp--preset--spacing--sm );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--md, 8px );
	background-color: var( --wp--preset--color--white );
}

.petpartners-dashboard__panel--empty {
	background-color: var( --wp--preset--color--surface );
}

.petpartners-dashboard__title {
	margin-block: 0 var( --wp--preset--spacing--xs );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--heading );
	font-weight: 600;
}

.petpartners-dashboard__meta {
	margin-block: 0 var( --wp--preset--spacing--xs );
	font-variant-numeric: tabular-nums;
}

.petpartners-dashboard__separator {
	margin-inline: var( --wp--preset--spacing--xxs );
	color: var( --wp--preset--color--text-muted );
}

/*
 * Status: the word carries it, the dot is decoration. Section 5.3 forbids state
 * on colour alone, and the template marks the dot aria-hidden for the same
 * reason — delete this rule and the sentence still says "Processing".
 */

.petpartners-dashboard__status {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--xxs );
	margin-block: 0 var( --wp--preset--spacing--sm );
	font-weight: 600;
	color: var( --wp--preset--color--brown );
}

.petpartners-dashboard__dot {
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-radius: var( --wp--custom--radius--pill, 999px );
	background-color: var( --wp--preset--color--text-muted );
	flex: 0 0 auto;
}

.petpartners-dashboard__status--completed .petpartners-dashboard__dot {
	background-color: var( --wp--preset--color--success );
}

.petpartners-dashboard__status--processing .petpartners-dashboard__dot,
.petpartners-dashboard__status--on-hold .petpartners-dashboard__dot {
	background-color: var( --wp--preset--color--warning );
}

.petpartners-dashboard__status--cancelled .petpartners-dashboard__dot,
.petpartners-dashboard__status--failed .petpartners-dashboard__dot,
.petpartners-dashboard__status--refunded .petpartners-dashboard__dot {
	background-color: var( --wp--preset--color--error );
}

.petpartners-dashboard__address {
	margin-block: 0 var( --wp--preset--spacing--xs );
	font-style: normal;
	line-height: 1.6;
}

.petpartners-dashboard__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--xxs );
	margin-block-end: 0;
}

/*
 * The one purple on the dashboard: reordering, or — when there is nothing to
 * reorder — going to the shop. Both are the same action in different words,
 * which is why they share the treatment.
 */
.petpartners-dashboard__button {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: var( --wp--preset--spacing--sm );
	border-radius: var( --wp--custom--radius--md, 8px );
	background-color: var( --wp--preset--color--purple );
	color: var( --wp--preset--color--white );
	font-weight: 600;
	text-decoration: none;
}

.petpartners-dashboard__button:hover,
.petpartners-dashboard__button:focus-visible {
	background-color: var( --wp--preset--color--purple-hover );
	color: var( --wp--preset--color--white );
}