/*
 * Customer account — My Account, its navigation and every endpoint under it.
 *
 * Sections:
 *   1. Page frame and the two-column layout
 *   2. Account navigation
 *   3. Dashboard
 *   4. Login and registration
 *   5. Password fields
 *   6. Forms inside the account
 *   7. Order list
 *   8. Order detail
 *   9. Addresses
 *  10. Notices and empty states
 *
 * Values come from theme.json through the aliases in base.css; nothing here defines
 * a colour, a size or a spacing step of its own.
 *
 * WHAT THIS FILE IS UP AGAINST, and why it is easier than the cart was.
 *
 * My Account is the `[woocommerce_my_account]` shortcode and it renders WooCommerce's
 * own PHP templates on the server — not the React blocks the cart and checkout are
 * built from. Every element is in the HTML before a script runs, the class vocabulary
 * is stable across releases, and the hook surface is wide. So the theme can style it
 * without a single template override, which is what ARCHITECTURE.md §2 asks for.
 *
 * Three of WooCommerce's stylesheets are on the page, and two of them lay the account
 * out in ways this theme does not want:
 *
 *   woocommerce-layout.css      floats the navigation left at 30% and the content
 *                               right at 68%, and floats address columns at 48%
 *   woocommerce-smallscreen.css turns the orders table into stacked blocks below
 *                               768 px — and hides `tbody th`, which is the cell
 *                               holding the order number and its link
 *   woocommerce.css             borders and radii that predate this design
 *
 * The rule from ARCHITECTURE.md §15 applies: where the plugin declares the same
 * property on the same element, match its selector shape rather than reaching for
 * `!important`. Every rule below that answers a plugin declaration names it.
 */

/* ==========================================================================
   1. Page frame and the two-column layout
   ========================================================================== */

/*
 * The account is one page with many faces, and the frame has to work for all of
 * them. `logged-in` is the discriminator rather than `:has()`: WooCommerce renders
 * the navigation only for somebody who is logged in — a logged-out visitor gets the
 * login and registration forms with no navigation at all — so the body class already
 * says which of the two layouts applies, on the server, before any element exists.
 */
.woocommerce-account .zu-entry__content > .woocommerce {
	margin-block-start: var(--zu-space-4);
}

/*
 * THE CLEARFIXES, and they are the reason this section is the longest comment in the
 * file. Answering `woocommerce.css` and `woocommerce-layout.css`:
 *
 *   .woocommerce-account .woocommerce::after, …::before   { content: " "; display: table }
 *   .woocommerce .col2-set::after, …::before              { content: " "; display: table }
 *   .woocommerce-account .addresses .title::after, …      { content: " "; display: table }
 *
 * Each is WooCommerce's clearfix for floats this stylesheet removes, and each is
 * invisible right up to the moment the same element becomes a grid or flex
 * container: a pseudo-element with content is a grid item and a flex item, so the
 * two of them take the first and last cells and move every real child along by one.
 *
 * It was measured three times before it was understood, once per layout. The
 * navigation rendered 896 px wide in the content column with the content 240 px wide
 * underneath it; the billing address landed in the second column and the delivery
 * address on the row below; and the login form appeared on the right with
 * registration below it on the left. All three look like a broken grid definition
 * and none of them is one.
 *
 * Suppressed unconditionally rather than only inside the grids, because the floats
 * they were clearing are gone at every width.
 */
.woocommerce-account .zu-entry__content > .woocommerce::before,
.woocommerce-account .zu-entry__content > .woocommerce::after,
.woocommerce-account .woocommerce .col2-set::before,
.woocommerce-account .woocommerce .col2-set::after,
.woocommerce-account .addresses .woocommerce-Address-title::before,
.woocommerce-account .addresses .woocommerce-Address-title::after {
	content: none;
}

@media (min-width: 62rem) {
	.woocommerce-account.logged-in .zu-entry__content > .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		gap: var(--zu-space-5);
		align-items: start;
	}
}

/*
 * Answering `woocommerce-layout.css`:
 *   .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 30% }
 *   .woocommerce-account .woocommerce-MyAccount-content    { float: right; width: 68% }
 * Same selector shape, later stylesheet. A grid ignores the float but keeps the
 * width, which is the trap stage 4 fell into with the confirmation page's address
 * columns — so both properties are reset, not just the float.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/*
 * The content column carries the whole of every endpoint, so it owns the rhythm
 * between the parts WooCommerce prints one after another.
 */
.woocommerce-account .woocommerce-MyAccount-content > * + * {
	margin-block-start: var(--zu-space-3);
}

.woocommerce-account .woocommerce-MyAccount-content > h2 {
	margin-block-end: var(--zu-space-2);
	font-family: var(--zu-font-display);
	font-size: var(--zu-text-h2);
	font-weight: 400;
}

/* ==========================================================================
   2. Account navigation
   ========================================================================== */

/*
 * `.zu-prose :is(ul, ol)` in base.css gives every list in page content a bullet and
 * an indent, which is right for prose and wrong for a menu. (0,2,1) against its
 * (0,2,0), so the list below wins without a new wrapper class.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zu-space-1);
	margin: 0 0 var(--zu-space-4);
	padding: 0;
	list-style: none;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius-pill);
	background-color: var(--zu-surface);
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
	text-decoration: none;
	transition: border-color var(--zu-transition), color var(--zu-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	border-color: var(--zu-gold-decor);
	color: var(--zu-accent-deep);
}

/*
 * The current section. Three signals, because colour may not be the only one
 * (ARCHITECTURE.md §13): a filled background, a heavier weight, and `aria-current`
 * on the link itself, which is what a screen reader announces. The attribute is
 * WooCommerce's — `wc_is_current_account_menu_item()` — and it is also what this
 * rule keys on, so the visual state cannot drift from the announced one.
 */
.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current='page'] {
	border-color: var(--zu-accent-deep);
	background-color: var(--zu-accent-deep);
	color: var(--zu-surface);
	font-weight: 500;
}

/*
 * The focus ring on the FILLED pill, which is the one place in the account where the
 * theme's burgundy ring lands against a burgundy fill. It stays legible because of
 * the 2 px offset over the cream page — measured — but it is the weakest-reading
 * indicator here, and `base.css` already has the same answer for the dark footer:
 * on a surface the ring cannot contrast with, draw it in the surface colour instead.
 *
 * Bounded to the pill layout on purpose. From 62 rem the current item is burgundy
 * text on the surface colour, where a surface-coloured ring would be the invisible
 * one.
 */
@media (max-width: 61.99rem) {
	.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current='page']:focus-visible {
		outline-color: var(--zu-surface);
		outline-offset: -5px;
	}
}

/*
 * From the wide breakpoint the menu becomes the column it was always meant to be.
 * Below it the pills wrap, which is what makes long Polish labels safe: "Szczegóły
 * konta" and "Wyloguj się" beside each other need 320 px and get two rows instead of
 * an overflow.
 */
@media (min-width: 62rem) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: block;
		margin-block-end: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li + li {
		margin-block-start: 2px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation a {
		border-color: transparent;
		border-radius: var(--zu-radius-sm);
		background-color: transparent;
		padding-inline-start: calc(1rem - 3px);
		border-inline-start: 3px solid transparent;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current='page'] {
		border-color: transparent;
		border-inline-start-color: var(--zu-accent-deep);
		background-color: var(--zu-surface);
		color: var(--zu-accent-deep);
	}
}

/* ==========================================================================
   3. Dashboard
   ========================================================================== */

/*
 * WooCommerce's dashboard is two sentences: who you are with a way to log out, and
 * where the three sections are. Both are true, both link to the right places, and
 * the account navigation is beside them — so nothing is added here beyond making the
 * greeting read as a greeting rather than as body copy. The stage brief rules out a
 * statistics panel, and there is nothing else a shop this size owes the customer on
 * this screen.
 */
.woocommerce-account .woocommerce-MyAccount-content > p {
	color: var(--zu-ink-soft);
}

/*
 * The first paragraph is the lead — on the two endpoints where it actually is one.
 *
 * WooCommerce marks the current endpoint on the body (`woocommerce-dashboard`,
 * `woocommerce-view-order`, `woocommerce-edit-address`, …), which is what makes this
 * possible to say precisely. Written without that scope, the same rule enlarged the
 * address page's instruction — "Następujące adresy zostaną domyślnie użyte na stronie
 * zamówienia" — into the loudest sentence on a page whose content is two address
 * cards.
 */
.woocommerce-dashboard .woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-view-order .woocommerce-MyAccount-content > p:first-of-type {
	font-size: var(--zu-text-lead);
	color: var(--zu-ink);
}

/* ==========================================================================
   4. Login and registration
   ========================================================================== */

/*
 * Answering `woocommerce.css`:
 *   .woocommerce form.login, .woocommerce form.register
 *     { border: 1px solid …; padding: 20px; margin: 2em 0; border-radius: 5px }
 * (0,2,1) there, (0,3,1) here.
 */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	margin: 0;
	padding: var(--zu-space-4);
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius);
	background-color: var(--zu-surface);
}

/*
 * Answering `woocommerce-layout.css`:
 *   .woocommerce .col2-set .col-1 { float: left; width: 48% }
 *   .woocommerce .col2-set .col-2 { float: right; width: 48% }
 * (0,3,0) there, (0,4,0) here. Both properties reset before the grid is applied.
 */
.woocommerce-account .woocommerce #customer_login > .col-1,
.woocommerce-account .woocommerce #customer_login > .col-2 {
	float: none;
	width: auto;
}

.woocommerce-account #customer_login {
	display: grid;
	gap: var(--zu-space-4);
}

@media (min-width: 48rem) {
	.woocommerce-account #customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--zu-space-5);
	}
}

.woocommerce-account #customer_login h2 {
	margin-block-end: var(--zu-space-3);
	font-family: var(--zu-font-display);
	font-size: var(--zu-text-h2);
	font-weight: 400;
}

.woocommerce-account .woocommerce form.login .form-row + .form-row,
.woocommerce-account .woocommerce form.register .form-row + .form-row {
	margin-block-start: var(--zu-space-3);
}

/*
 * Answering `woocommerce.css`:
 *   .woocommerce .woocommerce-form-login .woocommerce-form-login__submit
 *     { float: left; margin-right: 1em }
 *   .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme
 *     { display: inline-block }
 * (0,3,0) each, (0,4,0) here. Floated, the button sat to the left of "remember me"
 * on one line, which reads as a caption on the button rather than as its own choice.
 */
.woocommerce-account .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	margin: 0;
}

.woocommerce-account .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--zu-space-1);

	/*
	 * The label is the target, not the 18 px box inside it, so the height belongs
	 * here. WCAG 2.5.8 was met either way; the theme's own 44 px convention was not.
	 */
	min-height: 44px;
	margin-block-end: var(--zu-space-2);
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-sm);
	font-weight: 400;
}

.woocommerce-account .woocommerce-form-login__rememberme input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--zu-accent-deep);
}

.woocommerce-account .woocommerce-LostPassword {
	margin-block-start: var(--zu-space-3);
	margin-block-end: 0;
	font-size: var(--zu-text-sm);
}

/*
 * The privacy notice WooCommerce prints inside the registration form. It is the one
 * piece of prose in a column of controls, so it reads as a note rather than as a
 * paragraph of the page.
 */
.woocommerce-account .woocommerce-privacy-policy-text {
	margin-block: var(--zu-space-3);
	color: var(--zu-ink-muted);
	font-size: var(--zu-text-sm);
}

.woocommerce-account .woocommerce-privacy-policy-text p {
	margin: 0;
}

/* ==========================================================================
   5. Password fields
   ========================================================================== */

/*
 * WooCommerce's show/hide password control. Answering `woocommerce.css`:
 *   .woocommerce form .show-password-input
 *     { position: absolute; right: .7em; top: 50%; transform: translateY(-50%);
 *       padding: 0; border: 0; background: transparent }
 * (0,2,1) there, (0,3,1) here.
 *
 * The plugin's version is a 22 px icon with no padding — 22 × 22 as a touch target,
 * on the control that decides whether somebody can see what they are typing into a
 * password field. It keeps the plugin's absolute position and its icon, and grows to
 * 44 px the way every other pointer target in this theme does.
 */
.woocommerce-account .woocommerce form .show-password-input {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	right: 0.25rem;
	color: var(--zu-ink-soft);
	border-radius: var(--zu-radius-sm);
}

/*
 * Answering `woocommerce.css`:
 *   .woocommerce form .password-input input[type=password] { padding-right: 2.5rem }
 * The control is now wider than the room the plugin reserved for it, so the text
 * would run under the icon.
 */
.woocommerce-account .woocommerce form .password-input input[type='password'] {
	padding-right: 3rem;
}

/* ==========================================================================
   6. Forms inside the account
   ========================================================================== */

/*
 * Answering `woocommerce.css`:
 *   .woocommerce form .form-row-first, .woocommerce form .form-row-last
 *     { width: 47%; overflow: visible }
 *   .woocommerce form .form-row-first { float: left }
 *   .woocommerce form .form-row-last  { float: right }
 * (0,2,1) each, (0,3,1) here. The two halves become grid columns, which is the same
 * two-column result without a clearing element between every pair of rows.
 */
.woocommerce-account .woocommerce form .form-row-first,
.woocommerce-account .woocommerce form .form-row-last {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	gap: var(--zu-space-3);
}

@media (min-width: 48rem) {
	.woocommerce-account .woocommerce-EditAccountForm,
	.woocommerce-account .woocommerce-address-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--zu-space-4);
	}

	.woocommerce-account .woocommerce form .form-row-wide,
	.woocommerce-account .woocommerce-EditAccountForm > fieldset,
	.woocommerce-account .woocommerce-EditAccountForm > p:last-child {
		grid-column: 1 / -1;
	}
}

/*
 * `.clear` is WooCommerce's float-clearing spacer. With the floats gone it is an
 * empty grid cell that pushes the next field into the wrong column.
 */
.woocommerce-account .woocommerce-EditAccountForm > .clear,
.woocommerce-account .woocommerce-address-fields__field-wrapper > .clear {
	display: none;
}

.woocommerce-account .woocommerce form .form-row {
	margin: 0;
	padding: 0;
}

/*
 * The save button sits outside the field grid — it is a sibling of the wrapper, not
 * a cell in it — so it inherits none of the grid's row gap and landed against the
 * last field.
 */
.woocommerce-account .woocommerce-address-fields > p,
.woocommerce-account .woocommerce-EditAccountForm > p {
	margin-block: var(--zu-space-4) 0;
}

.woocommerce-account .woocommerce form .form-row label {
	margin-block-end: var(--zu-space-1);
}

/*
 * The required marker. WooCommerce hides the asterisk from assistive technology
 * (`aria-hidden`) and marks the field `aria-required` instead, so the colour here is
 * decoration over a state that is already announced — never the only carrier.
 */
.woocommerce-account .woocommerce form .required {
	color: var(--zu-accent-deep);
	text-decoration: none;
}

/*
 * THE COUNTRY CONTROL.
 *
 * WooCommerce enhances the country select with select2 and ships `select2.css` with
 * it. Stage 4's checkout is a block and never rendered one, so this is the first
 * surface in the shop where select2 appears — and an independent review measured it
 * beside the fields above and below it:
 *
 *   field                     height  border                  radius
 *   #billing_last_name        44 px   1px rgb(236,217,209)    8 px
 *   .select2-selection        38 px   1px rgba(32,7,7,0.8)    4 px
 *
 * and an open panel with square corners, no theme border, and a highlighted option
 * in `rgb(0,124,186)` — WordPress-admin blue, a value that exists nowhere in
 * `theme.json`. One control in the middle of the form on which a customer hands the
 * shop her delivery address, belonging visibly to a different product.
 *
 * Styled here rather than by dequeuing `select2.css`: the plugin's stylesheet also
 * carries the search field, the accessibility affordances and the open/close states,
 * and removing it to avoid writing a dozen rules would mean writing far more.
 * Selectors are scoped to the account so the storefront's ordering select, which
 * uses the same library, is left as stage 2 left it.
 */
.woocommerce-account .select2-container .select2-selection--single {
	height: auto;
	min-height: 44px;
	padding: 0.7rem 1rem;
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius-sm);
	background-color: var(--zu-surface);
	transition: border-color var(--zu-transition);
}

.woocommerce-account .select2-container .select2-selection--single:hover {
	border-color: var(--zu-gold-decor);
}

.woocommerce-account .select2-container--open .select2-selection--single {
	border-color: var(--zu-accent-deep);
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: inherit;
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--zu-ink-muted);
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 0.75rem;
	height: auto;
	transform: translateY(-50%);
}

/*
 * The panel. It is appended to `body`, outside `.woocommerce-account`, so these
 * selectors key on the container class WooCommerce gives it instead — which is why
 * they are the one place in this file that is not scoped to the account page.
 */
.select2-container--default .select2-dropdown {
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius-sm);
	background-color: var(--zu-surface);
	overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius-sm);
	background-color: var(--zu-surface);
	color: var(--zu-ink);
	font-size: var(--zu-text-base);
}

.select2-container--default .select2-results__option {
	padding: 0.6rem 1rem;
	color: var(--zu-ink);
	font-size: var(--zu-text-sm);
}

/*
 * Answering `select2.css`:
 *   .select2-container--default .select2-results__option--highlighted[aria-selected]
 *     { background-color: #5897fb; color: white }
 * WooCommerce overrides it to `#007cba` — the WordPress admin blue. Same selector
 * shape, later stylesheet.
 */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--zu-accent-deep);
	color: var(--zu-surface);
}

.select2-container--default .select2-results__option[aria-selected='true'],
.select2-container--default .select2-results__option[data-selected='true'] {
	background-color: var(--zu-blush);
	color: var(--zu-ink);
}

/*
 * The hint under "display name", which WooCommerce renders as an italic <em> in a
 * <span> the field points at with `aria-describedby`.
 */
.woocommerce-account #account_display_name_description {
	display: block;
	margin-block-start: var(--zu-space-1);
	color: var(--zu-ink-muted);
	font-size: var(--zu-text-sm);
}

.woocommerce-account #account_display_name_description em {
	font-style: normal;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin: 0;
	padding: var(--zu-space-3);
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius);
	background-color: var(--zu-surface);
}

.woocommerce-account .woocommerce-EditAccountForm legend {
	padding-inline: var(--zu-space-1);
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-label);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset .form-row + .form-row {
	margin-block-start: var(--zu-space-3);
}

/* ==========================================================================
   7. Order list
   ========================================================================== */

/*
 * Answering `woocommerce.css`:
 *   .woocommerce table.shop_table
 *     { border: 1px solid …; margin: 0 -1px 24px 0; border-radius: 5px }
 *   .woocommerce table.my_account_orders { font-size: .85em }
 * (0,1,2) each, (0,2,2) here. The negative right margin is the plugin's own
 * workaround for a collapsed border it no longer uses.
 */
.woocommerce-account .woocommerce table.my_account_orders {
	width: 100%;
	margin: 0;
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background-color: var(--zu-surface);
	font-size: var(--zu-text-sm);
}

/*
 * Answering `woocommerce.css`:
 *   .woocommerce table.my_account_orders td, .woocommerce table.my_account_orders th
 *     { padding: 4px 8px; vertical-align: middle }
 * (0,1,3) there, (0,2,3) here.
 */
.woocommerce-account .woocommerce table.my_account_orders th,
.woocommerce-account .woocommerce table.my_account_orders td {
	padding: var(--zu-space-2) var(--zu-space-3);
	border: 0;
	border-block-end: 1px solid var(--zu-line);
	text-align: start;
	vertical-align: middle;
}

.woocommerce-account .woocommerce table.my_account_orders thead th {
	color: var(--zu-ink-soft);
	font-size: var(--zu-text-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce table.my_account_orders tbody tr:last-child th,
.woocommerce-account .woocommerce table.my_account_orders tbody tr:last-child td {
	border-block-end: 0;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	font-weight: 500;
}

/*
 * The order actions are secondary here and the order number beside them is the
 * primary link to the same place. A filled button per row turned a list of three
 * orders into a column of three calls to action.
 */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button {
	background-color: transparent;
	border-color: var(--zu-accent-deep);
	color: var(--zu-accent-deep);

	/*
	 * Quieter padding, but not a smaller target. The first version set only the
	 * padding and produced a 35 px button under a fine pointer — measured by an
	 * independent review — on a page where this file restores 44 px by hand for the
	 * order-number link and the show/hide password control.
	 */
	min-height: 44px;
	padding: 0.5rem 1rem;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover {
	background-color: var(--zu-accent-deep);
	color: var(--zu-surface);
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button + a.button {
	margin-inline-start: var(--zu-space-1);
}

/*
 * Below 768 px WooCommerce's `woocommerce-smallscreen.css` turns the table into
 * stacked blocks. Three of its rules need answering, and the first is a defect
 * rather than a preference.
 */
@media (max-width: 48rem) {
	/*
	 * Answering `woocommerce-smallscreen.css`:
	 *   .woocommerce table.shop_table_responsive tbody th { display: none }
	 * (0,2,3) there, (0,4,3) here.
	 *
	 * In `myaccount/orders.php` the order number is a `<th scope="row">`, so on every
	 * screen narrower than 768 px the plugin hides the one cell that identifies the
	 * row — the number and the link to the order both disappear. Measured: three
	 * orders rendered as twelve anonymous rows of date, status, total and a button.
	 */
	.woocommerce-account .woocommerce table.shop_table_responsive tbody th {
		display: block;
	}

	/*
	 * Each order becomes a card. Answering `woocommerce-smallscreen.css`:
	 *   .woocommerce table.shop_table_responsive tr { display: block }
	 * and the striping that stood in for a boundary:
	 *   .woocommerce table.shop_table_responsive tr:nth-child(2n) td
	 *     { background-color: rgba(0,0,0,.025) }
	 * (0,3,3) there, (0,4,3) here. A 2.5% grey between rows is not a boundary a
	 * customer can see, which is why three orders read as one list.
	 */
	.woocommerce-account .woocommerce table.my_account_orders {
		border: 0;
		background-color: transparent;
	}

	.woocommerce-account .woocommerce table.my_account_orders tbody tr {
		display: block;
		margin-block-end: var(--zu-space-2);
		padding: var(--zu-space-2) var(--zu-space-3);
		border: 1px solid var(--zu-line);
		border-radius: var(--zu-radius);
		background-color: var(--zu-surface);
	}

	.woocommerce-account .woocommerce table.my_account_orders tbody tr:last-child {
		margin-block-end: 0;
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td,
	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr:nth-child(2n) td {
		background-color: transparent;
	}

	/*
	 * The stacked row is left as WooCommerce lays it out — a floated label from
	 * `td::before { content: attr(data-title) ": "; float: left }` and a value pushed
	 * right by `text-align: right !important`. That reads the way the cart's totals
	 * already do, so there is nothing to gain from fighting an `!important` that no
	 * selector can answer and no template override is allowed to replace.
	 *
	 * What changes is the weight: the plugin sets the label to 700, which on four
	 * rows per card makes the labels louder than the values they introduce.
	 */
	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td {
		padding: var(--zu-space-1) 0;
		border: 0;
	}

	/*
	 * The gutter is not decoration. The label is floated and the value is a right
	 * aligned block beside it, so when the value is long enough to fill the line the
	 * two meet with nothing in between — measured at 320 px, where the longest status
	 * this shop has renders as "Status:Wstrzymane (oczekujące na płatność)".
	 */
	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td::before {
		padding-inline-end: var(--zu-space-2);
		color: var(--zu-ink-soft);
		font-weight: 400;
	}

	/* The order number is the card's heading, and needs no label in front of it. */
	.woocommerce-account .woocommerce table.my_account_orders tbody th {
		padding: 0 0 var(--zu-space-1);
		border: 0;
		border-block-end: 1px solid var(--zu-line);
		margin-block-end: var(--zu-space-1);
		font-size: var(--zu-text-base);
	}

	/*
	 * And it is the card's primary target, so it is sized like one. Measured at 390 px
	 * under a coarse pointer: an inline link 20 px tall, on the control that opens the
	 * order. Every other pointer target in this theme is at least 44.
	 */
	.woocommerce-account .woocommerce table.my_account_orders tbody th a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.woocommerce-account .woocommerce table.my_account_orders tbody td.woocommerce-orders-table__cell-order-actions {
		padding-block-start: var(--zu-space-2);
	}
}

/*
 * The previous/next pair WooCommerce prints when the history runs past one page.
 * It renders no numbers, so the two buttons are the whole control.
 */
.woocommerce-account .woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zu-space-2);
	margin-block-start: var(--zu-space-4);
}

/* ==========================================================================
   8. Order detail
   ========================================================================== */

/*
 * The order table, its headings and the address panels are styled in commerce.css.
 * Stage 4 wrote them for the order confirmation, and the account's order detail is
 * the same template — `order/order-details.php` and the customer details under it —
 * so this stage widened those rules and loads that stylesheet here rather than
 * keeping a second copy of them. The same order, shown to the same customer, should
 * not be shown two different ways.
 *
 * What is left is the sentence WooCommerce prints above the table, which the
 * confirmation page does not have. It marks the number, the date and the status with
 * `<mark>`; `woocommerce-layout.css` already strips the browser's yellow highlight,
 * and this makes the three values read as values.
 */
.woocommerce-account .woocommerce-MyAccount-content > p mark {
	background-color: transparent;
	color: var(--zu-ink);
	font-weight: 500;
}

/* ==========================================================================
   9. Addresses
   ========================================================================== */

/*
 * Answering `woocommerce-layout.css`:
 *   .woocommerce .col2-set .col-1 { float: left; width: 48% }
 *   .woocommerce .col2-set .col-2 { float: right; width: 48% }
 * (0,3,0) there, (0,4,0) here, and both properties reset before the grid.
 */
.woocommerce-account .woocommerce .woocommerce-Addresses > .col-1,
.woocommerce-account .woocommerce .woocommerce-Addresses > .col-2 {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	gap: var(--zu-space-3);
}

@media (min-width: 48rem) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--zu-space-4);
	}
}

.woocommerce-account .woocommerce-Address {
	display: flex;
	flex-direction: column;
	gap: var(--zu-space-2);
	padding: var(--zu-space-3);
	border: 1px solid var(--zu-line);
	border-radius: var(--zu-radius);
	background-color: var(--zu-surface);
}

/*
 * Heading above its action rather than beside it. Side by side, the pair fits in one
 * card and wraps in the other — "Adres rozliczeniowy" with "Edytuj Adres
 * rozliczeniowy" needs more than half of a 1440 px content column, "Adres do
 * wysyłki" does not — so two cards that hold the same thing were laid out
 * differently. Stacking is the same at every width and for any label the
 * translation gives these two.
 */
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--zu-space-1);
}

.woocommerce-account .woocommerce-Address-title h2 {
	margin: 0;
	font-family: var(--zu-font-display);
	font-size: var(--zu-text-lead);
	font-weight: 400;
}

.woocommerce-account .woocommerce-Address-title .edit {
	float: none;
	font-size: var(--zu-text-sm);
}

.woocommerce-account .woocommerce-Address address {
	margin: 0;
	color: var(--zu-ink-soft);
	font-style: normal;
	line-height: 1.7;
}

/* ==========================================================================
   10. Notices and empty states
   ========================================================================== */

/*
 * `.woocommerce-info` is styled in base.css and arrives here already looking like
 * this shop. Two things are specific to the account.
 *
 * The button inside a notice is a secondary action. Both notices that appear on the
 * orders page — "confirm your e-mail address" and "no orders yet" — carry one, and a
 * filled burgundy pill made each of them read as the most important thing on a page
 * whose actual content is the customer's order history, or the absence of it. The
 * stage brief asks for an empty state with a way to the shop and without an
 * aggressive call to action; this is that, and it leaves WooCommerce's own wording
 * and markup alone.
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button {
	background-color: transparent;
	border-color: var(--zu-accent-deep);
	color: var(--zu-accent-deep);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button:hover {
	background-color: var(--zu-accent-deep);
	color: var(--zu-surface);
}

/*
 * The call to action comes after the sentence that explains it, at every width.
 *
 * WooCommerce puts the button first in the DOM — "Potwierdź adres email" before
 * "Potwierdź swój adres email, żeby sprawdzić poprzednie zamówienia" — so a reader
 * and a screen reader both got the instruction before the reason. The first version
 * of this file corrected it below the tablet breakpoint only, which meant the two
 * widths with the most room were the two that read worst. Found by an independent
 * review.
 *
 * `order` rather than a template override, and the trade it makes is worth naming:
 * the visual order now differs from the DOM order. That is a real cost when several
 * controls are involved and a negligible one here, where the button is the notice's
 * only focusable element — the customer reaches it in the same single Tab either way.
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button {
	order: 2;
}

/*
 * Answering base.css:
 *   .woocommerce-info .button { margin-inline-start: auto; flex: none }
 * That puts the button at the far end of the notice, which is right when there is
 * room and is 23 px of document overflow at 320 px: the notice is a flex row, the
 * button will not shrink, and the sentence beside it is squeezed into a column too
 * narrow for the longest word. Below the tablet breakpoint the notice stacks.
 */
@media (max-width: 47.99rem) {
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button {
		margin-inline-start: 0;
	}
}