/*
 * NN ACCOUNT - the buyer's side of the store (ticket 04).
 *
 * Everything here dresses the shop plugin's own account markup in the
 * house look: Manrope, charcoal on ivory, sand hairlines, the tracked
 * uppercase label tier, and one calm rhythm at phone, tablet and desktop.
 * No template is copied; every value reads the child theme's tokens.
 */

/* =========================================================================
   1. THE ACCOUNT PAGE FRAME
   The page title, the air under the header, and the two working columns
   (menu on the left, screens on the right).
   ========================================================================= */

.woocommerce-account .site-main {
	padding-bottom: var(--space-8);
}

.woocommerce-account .page-header {
	margin-bottom: var(--space-6);
}

.woocommerce-account .page-header .entry-title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--type-headline-lg-size);
	font-weight: var(--type-headline-lg-weight);
	line-height: var(--type-headline-lg-leading);
	letter-spacing: var(--type-headline-lg-tracking);
	color: var(--color-charcoal);
}

.woocommerce-account .page-content {
	padding-top: 0;
}

/* The shop plugin floats the menu; the house keeps both columns on the
   same baseline and lets the content breathe on the right. */
@media (min-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 15rem;
		margin-bottom: var(--space-6);
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
		margin-left: 17rem;
		min-height: 24rem;
	}
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
		margin-left: 0;
	}

	.woocommerce-account .page-header {
		margin-bottom: var(--space-5);
	}
}

/* =========================================================================
   2. THE ACCOUNT MENU
   A quiet list: sand hairline between rows, sand fill on the current and
   hovered row, tracked labels. On a phone it turns into a wrapped strip of
   chips so the screens start within one screen of the top.
   ========================================================================= */

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

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.95rem 0.75rem;
	font-family: var(--font-body);
	font-size: var(--type-label-md-size);
	font-weight: var(--type-label-md-weight);
	line-height: var(--type-label-md-leading);
	letter-spacing: var(--type-label-md-tracking);
	text-transform: var(--type-label-md-transform);
	color: var(--color-charcoal);
	text-decoration: none;
	transition: background-color 0.15s ease, opacity 0.1s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
	background-color: var(--color-sand);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:active {
	opacity: 0.55;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	outline: 2px solid var(--color-charcoal);
	outline-offset: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--color-sand);
	font-weight: 700;
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: var(--space-5);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		border-top: 0;
	}

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

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding: 0.6rem 0.85rem;
		border: 1px solid var(--color-border);
		border-radius: 2px;
		font-size: var(--type-label-sm-size);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		border-color: var(--color-charcoal);
	}
}

/* =========================================================================
   3. LINKS AND HEADINGS INSIDE THE SCREENS
   The theme's link colour is off-palette; inside the account it reads
   charcoal, underlined on hover, with a plain press and a focus ring.
   ========================================================================= */

/* Buttons and quiet label links keep their own treatment; this only
   dresses plain inline links inside the copy and inside the sign-in pair. */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.nn-button):not(.nn-link),
.woocommerce-account #customer_login a:not(.button):not(.nn-button):not(.nn-link) {
	color: var(--color-charcoal);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 0.1s ease;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.nn-button):not(.nn-link):hover,
.woocommerce-account #customer_login a:not(.button):not(.nn-button):not(.nn-link):hover {
	text-decoration-thickness: 2px;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.nn-button):not(.nn-link):active,
.woocommerce-account #customer_login a:not(.button):not(.nn-button):not(.nn-link):active {
	opacity: 0.55;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.nn-button):not(.nn-link):focus-visible,
.woocommerce-account #customer_login a:not(.button):not(.nn-button):not(.nn-link):focus-visible {
	outline: 2px solid var(--color-charcoal);
	outline-offset: 2px;
}
.woocommerce-account .woocommerce-MyAccount-content p {
	font-family: var(--font-body);
	font-size: var(--type-body-md-size);
	line-height: var(--type-body-md-leading);
	color: var(--color-charcoal);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content .nn-subhead {
	font-family: var(--font-body);
	font-size: var(--type-headline-sm-size);
	font-weight: var(--type-headline-sm-weight);
	line-height: var(--type-headline-sm-leading);
	letter-spacing: 0;
	color: var(--color-charcoal);
}

/* The shop plugin prints its own headline sizes; the account screens keep
   the house ladder: a screen heading, then quiet sub-headings. */
.woocommerce-account .woocommerce-MyAccount-content > h2 {
	font-size: var(--type-headline-md-size);
	font-weight: var(--type-headline-md-weight);
	line-height: var(--type-headline-md-leading);
	margin: 0 0 var(--space-5);
}

.woocommerce-account .woocommerce-MyAccount-content .nn-subhead {
	margin: var(--space-7) 0 var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.woocommerce-account .nn-account-intro,
.woocommerce-account .nn-account-note {
	max-width: 42rem;
	color: var(--color-charcoal);
}

.woocommerce-account .nn-account-intro {
	margin-bottom: var(--space-6);
}

.woocommerce-account .nn-account-note {
	margin: var(--space-4) 0 0;
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
}

/* =========================================================================
   4. FORMS
   Ivory field, sand hairline, 2px corners, 48px tall, a tracked label above
   and one calm column. The shop plugin paints its fields white with a dark
   border and floats the first / last pair side by side, so these rules carry
   the extra weight they need to win.
   ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-content form:not(.nn-address-form) {
	max-width: 42rem;
	font-family: var(--font-body);
}

/* One column, always: no floats, no paired fields. */
.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce form .form-row.form-row-first,
.woocommerce-account .woocommerce form .form-row.form-row-last,
.woocommerce-account .woocommerce form .form-row.form-row-wide,
.woocommerce-account .nn-field {
	float: none;
	display: block;
	width: 100%;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.woocommerce-account .woocommerce form .form-row label,
.woocommerce-account .nn-field label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--font-body);
	font-size: var(--type-label-sm-size);
	font-weight: var(--type-label-sm-weight);
	line-height: var(--type-label-sm-leading);
	letter-spacing: var(--type-label-sm-tracking);
	text-transform: var(--type-label-sm-transform);
	color: var(--color-charcoal);
}

.woocommerce-account .nn-field__req {
	margin-left: 0.25rem;
	color: var(--color-error);
}

.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row input[type="text"],
.woocommerce-account .woocommerce form .form-row input[type="email"],
.woocommerce-account .woocommerce form .form-row input[type="password"],
.woocommerce-account .woocommerce form .form-row input[type="tel"],
.woocommerce-account .woocommerce form .form-row input[type="number"],
.woocommerce-account .woocommerce form .form-row textarea,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .nn-field input,
.woocommerce-account .nn-field select {
	width: 100%;
	height: auto;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background-color: var(--color-ivory);
	color: var(--color-charcoal);
	font-family: var(--font-body);
	font-size: var(--type-body-md-size);
	line-height: var(--type-body-md-leading);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account .woocommerce form .form-row input[type="text"]:focus,
.woocommerce-account .woocommerce form .form-row input[type="email"]:focus,
.woocommerce-account .woocommerce form .form-row input[type="password"]:focus,
.woocommerce-account .woocommerce form .form-row input[type="tel"]:focus,
.woocommerce-account .woocommerce form .form-row textarea:focus,
.woocommerce-account .woocommerce form .form-row select:focus,
.woocommerce-account .nn-field input:focus,
.woocommerce-account .nn-field select:focus {
	border-color: var(--color-charcoal);
	outline: none;
	box-shadow: 0 0 0 2px var(--color-sand);
}

.woocommerce-account ::placeholder {
	color: var(--color-stone);
	opacity: 1;
}

/* The quiet line under a field ("This is how your name will be shown"). */
.woocommerce-account .woocommerce form .form-row small,
.woocommerce-account .woocommerce form .form-row span.description,
.woocommerce-account .woocommerce form .form-row .woocommerce-password-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
	color: var(--color-charcoal);
}

/* The password block is one sand box with a tracked heading. */
.woocommerce-account .woocommerce form fieldset {
	margin: var(--space-6) 0 0;
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background-color: transparent;
}

.woocommerce-account .woocommerce form legend {
	padding: 0 0.5rem;
	font-size: var(--type-label-md-size);
	font-weight: var(--type-label-md-weight);
	line-height: var(--type-label-md-leading);
	letter-spacing: var(--type-label-md-tracking);
	text-transform: var(--type-label-md-transform);
	color: var(--color-charcoal);
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--type-body-sm-size);
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce-account .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	min-height: 0;
	margin: 0;
	accent-color: var(--color-charcoal);
}

.woocommerce-account .required {
	color: var(--color-error);
	text-decoration: none;
}

.woocommerce-account .woocommerce-password-strength {
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
	text-align: left;
}

.woocommerce-account .woocommerce-password-strength.short,
.woocommerce-account .woocommerce-password-strength.bad {
	border-color: var(--color-error);
	color: var(--color-error);
}

.woocommerce-account .woocommerce-password-strength.good,
.woocommerce-account .woocommerce-password-strength.strong {
	border-color: var(--color-charcoal);
	color: var(--color-charcoal);
}
/* =========================================================================
   5. BUTTONS
   One primary shape: charcoal, ivory label, uppercase tracked. Quiet
   outline for the second action. Destructive links keep the error role.
   ========================================================================= */

.woocommerce-account button.button,
.woocommerce-account a.button,
.woocommerce-account .button,
.woocommerce-account input[type="submit"],
.woocommerce-account input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	border: 1px solid var(--color-charcoal);
	border-radius: 2px;
	background-color: var(--color-charcoal);
	color: var(--color-ivory);
	font-family: var(--font-body);
	font-size: var(--type-label-md-size);
	font-weight: var(--type-label-md-weight);
	line-height: var(--type-label-md-leading);
	letter-spacing: var(--type-label-md-tracking);
	text-transform: var(--type-label-md-transform);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.1s ease;
}

.woocommerce-account button.button:hover,
.woocommerce-account a.button:hover,
.woocommerce-account .button:hover,
.woocommerce-account input[type="submit"]:hover,
.woocommerce-account input[type="button"]:hover {
	background-color: var(--color-ivory);
	color: var(--color-charcoal);
}

.woocommerce-account button.button:active,
.woocommerce-account a.button:active,
.woocommerce-account .button:active,
.woocommerce-account input[type="submit"]:active,
.woocommerce-account input[type="button"]:active {
	opacity: 0.6;
}

.woocommerce-account button.button:focus-visible,
.woocommerce-account a.button:focus-visible,
.woocommerce-account .button:focus-visible,
.woocommerce-account input[type="submit"]:focus-visible {
	outline: 2px solid var(--color-charcoal);
	outline-offset: 3px;
}

.woocommerce-account .nn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	border: 1px solid var(--color-charcoal);
	border-radius: 2px;
	background-color: var(--color-charcoal);
	color: var(--color-ivory);
	font-family: var(--font-body);
	font-size: var(--type-label-md-size);
	font-weight: var(--type-label-md-weight);
	line-height: var(--type-label-md-leading);
	letter-spacing: var(--type-label-md-tracking);
	text-transform: var(--type-label-md-transform);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.1s ease;
}

.woocommerce-account .nn-button:hover {
	background-color: var(--color-ivory);
	color: var(--color-charcoal);
	text-decoration: none;
}

.woocommerce-account .nn-button:active {
	opacity: 0.6;
}

.woocommerce-account .nn-button:focus-visible {
	outline: 2px solid var(--color-charcoal);
	outline-offset: 3px;
}

.woocommerce-account .nn-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin: var(--space-5) 0 0;
}

.woocommerce-account .nn-form-actions .nn-link-quiet {
	font-size: var(--type-body-sm-size);
	color: var(--color-charcoal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================================
   6. NOTICES
   Calm panels: sand hairline, a thicker edge that says what happened.
   ========================================================================= */

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	position: relative;
	margin: 0 0 var(--space-5);
	padding: 1rem 1.25rem 1rem 1.25rem;
	border: 1px solid var(--color-border);
	border-left-width: 3px;
	border-radius: 2px;
	background-color: var(--color-ivory);
	color: var(--color-charcoal);
	font-family: var(--font-body);
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
	list-style: none;
}

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	border-left-color: var(--color-charcoal);
}

.woocommerce-account .woocommerce-error {
	border-left-color: var(--color-error);
}

.woocommerce-account .woocommerce-error li {
	margin: 0;
}

/* The shop plugin's own clear-fix pseudo-element inside a notice clears a
   floated mark that has no size of its own, which leaves a tall empty band
   under the words. The house notice is a plain panel with a coloured edge,
   so both pseudo-elements are switched off. */
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-error::after,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-info::after,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-message::after {
	content: none !important;
	display: none !important;
}

/* A notice can carry one action link ("view cart", "click here"); it sits on
   its own line under the words, never floating over them. */
.woocommerce-account .woocommerce-error .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button {
	float: none;
	margin-top: 0.75rem;
}

/* =========================================================================
   7. THE DASHBOARD LINE AND THE LOGIN / REGISTER PAIR
   ========================================================================= */

.woocommerce-account .nn-account-help {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
	max-width: 42rem;
}

.woocommerce-account .nn-account-help__text {
	margin: 0;
	font-size: var(--type-body-md-size);
	line-height: var(--type-body-md-leading);
}

.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-7);
	margin: 0;
}

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

.woocommerce-account #customer_login h2 {
	margin: 0 0 var(--space-4);
	font-size: var(--type-label-lg-size);
	font-weight: var(--type-label-lg-weight);
	letter-spacing: var(--type-label-lg-tracking);
	text-transform: var(--type-label-lg-transform);
	line-height: var(--type-label-lg-leading);
	color: var(--color-charcoal);
}

.woocommerce-account #customer_login .lost_password {
	margin: var(--space-4) 0 0;
}

.woocommerce-account #customer_login .woocommerce-privacy-policy-text {
	margin: 0 0 var(--space-4);
	max-width: 34rem;
}

.woocommerce-account #customer_login .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
	color: var(--color-charcoal);
}

@media (max-width: 767px) {
	.woocommerce-account #customer_login {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}
}

/* =========================================================================
   8. THE SHOP PLUGIN'S TWO ADDRESS SCREENS
   ========================================================================= */

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	margin: 0 0 var(--space-5);
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background-color: var(--color-ivory);
}

.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-Address-title h2 {
	margin: 0 0 var(--space-3);
	font-size: var(--type-label-md-size);
	font-weight: var(--type-label-md-weight);
	letter-spacing: var(--type-label-md-tracking);
	text-transform: var(--type-label-md-transform);
	line-height: var(--type-label-md-leading);
	color: var(--color-charcoal);
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: var(--type-body-md-size);
	line-height: var(--type-body-md-leading);
	color: var(--color-charcoal);
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   9. THE ADDRESS BOOK (ticket 04)
   The two shop slots and the saved addresses read as the same quiet card:
   a tracked label, plain lines, then the small actions.
   ========================================================================= */

.woocommerce-account .nn-address-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	margin: 0 0 var(--space-5);
}

.woocommerce-account .nn-address {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background-color: var(--color-ivory);
}

.woocommerce-account .nn-address__label {
	margin: 0;
	font-size: var(--type-label-md-size);
	font-weight: var(--type-label-md-weight);
	line-height: var(--type-label-md-leading);
	letter-spacing: var(--type-label-md-tracking);
	text-transform: var(--type-label-md-transform);
	color: var(--color-charcoal);
}

.woocommerce-account .nn-address__body {
	font-size: var(--type-body-md-size);
	line-height: var(--type-body-md-leading);
	color: var(--color-charcoal);
}

.woocommerce-account .nn-address__body p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.woocommerce-account .nn-address__line {
	display: block;
}

.woocommerce-account .nn-address__empty {
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
	color: var(--color-charcoal);
}

.woocommerce-account .nn-address__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	margin: auto 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.woocommerce-account .nn-link {
	font-size: var(--type-label-sm-size);
	font-weight: var(--type-label-sm-weight);
	line-height: var(--type-label-sm-leading);
	letter-spacing: var(--type-label-sm-tracking);
	text-transform: var(--type-label-sm-transform);
	color: var(--color-charcoal);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, opacity 0.1s ease;
}

.woocommerce-account .nn-link:hover,
.woocommerce-account .nn-link:focus {
	border-bottom-color: var(--color-charcoal);
}

.woocommerce-account .nn-link:active {
	opacity: 0.55;
}

.woocommerce-account .nn-link:focus-visible {
	outline: 2px solid var(--color-charcoal);
	outline-offset: 2px;
}

.woocommerce-account .nn-link--danger {
	color: var(--color-error);
}

.woocommerce-account .nn-link--danger:hover,
.woocommerce-account .nn-link--danger:focus {
	border-bottom-color: var(--color-error);
}

.woocommerce-account .nn-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-4);
	max-width: 42rem;
}

.woocommerce-account .nn-field--full {
	grid-column: 1 / -1;
}

.woocommerce-account .nn-address-form {
	margin-top: var(--space-5);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background-color: var(--color-ivory);
}

.woocommerce-account .nn-address-form .nn-subhead {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

@media (max-width: 767px) {
	.woocommerce-account .nn-address-list,
	.woocommerce-account .nn-field-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-account .nn-address-form {
		padding: var(--space-4);
	}
}

/* =========================================================================
   10. THE ORDERS AREA
   Picture, number, date, status, total, then the one action. No heavy
   borders: sand hairlines and tracked column labels.
   ========================================================================= */

.woocommerce-account table.shop_table {
	width: 100%;
	margin: 0 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-collapse: collapse;
	border-radius: 0;
	background-color: var(--color-ivory);
	font-family: var(--font-body);
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
	color: var(--color-charcoal);
}

.woocommerce-account table.shop_table th {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-ivory);
	font-size: var(--type-label-sm-size);
	font-weight: var(--type-label-sm-weight);
	line-height: var(--type-label-sm-leading);
	letter-spacing: var(--type-label-sm-tracking);
	text-transform: var(--type-label-sm-transform);
	text-align: left;
	color: var(--color-charcoal);
}

.woocommerce-account table.shop_table td {
	padding: 0.85rem 1rem;
	border-top: 1px solid var(--color-border);
	vertical-align: middle;
	color: var(--color-charcoal);
}

.woocommerce-account table.shop_table td a {
	color: var(--color-charcoal);
}

.woocommerce-account table.shop_table .order-status,
.woocommerce-account table.shop_table .wc-order-status,
.woocommerce-account table.shop_table mark {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background-color: transparent;
	font-size: var(--type-label-sm-size);
	font-weight: var(--type-label-sm-weight);
	letter-spacing: var(--type-label-sm-tracking);
	text-transform: var(--type-label-sm-transform);
	color: var(--color-charcoal);
}

.woocommerce-account table.shop_table .button {
	min-height: 0;
	padding: 0.5rem 1rem;
	font-size: var(--type-label-sm-size);
}

.woocommerce-account .woocommerce-pagination {
	margin-bottom: var(--space-5);
}

/* Phone: the order table keeps its columns but steps the type down and
   lets the numbers wrap under their labels. */
@media (max-width: 767px) {
	.woocommerce-account table.shop_table,
	.woocommerce-account table.shop_table thead,
	.woocommerce-account table.shop_table tbody,
	.woocommerce-account table.shop_table tr,
	.woocommerce-account table.shop_table th,
	.woocommerce-account table.shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce-account table.shop_table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.woocommerce-account table.shop_table tr {
		padding: var(--space-4);
		border-top: 1px solid var(--color-border);
	}

	.woocommerce-account table.shop_table tr:first-child {
		border-top: 0;
	}

	.woocommerce-account table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: var(--space-4);
		padding: 0.35rem 0;
		border-top: 0;
		text-align: right;
	}

	.woocommerce-account table.shop_table td::before {
		content: attr(data-title);
		font-size: var(--type-label-sm-size);
		font-weight: var(--type-label-sm-weight);
		letter-spacing: var(--type-label-sm-tracking);
		text-transform: var(--type-label-sm-transform);
		color: var(--color-charcoal);
		text-align: left;
	}

	.woocommerce-account table.shop_table td.order-actions::before {
		content: none;
	}
}

/* =========================================================================
   11. ONE ORDER PAGE
   ========================================================================= */

.woocommerce-account .woocommerce-order-mark,
.woocommerce-account .order_details {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.woocommerce-account .order_details li {
	border-right: 0;
	padding: 0.35rem 0;
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
}

.woocommerce-account .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0 0 var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	list-style: none;
}

.woocommerce-account ul.wc-item-meta {
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--type-body-sm-size);
}

.woocommerce-account .woocommerce-customer-details address {
	font-style: normal;
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: 2px;
}

/* =========================================================================
   12. MALAY: THE LABEL TIER STEPS DOWN ONE STEP
   Malay words run longer; the tracked labels drop one step so no account
   label wraps into two lines or clips.
   ========================================================================= */

html[lang^="ms"] .woocommerce-account .woocommerce-MyAccount-navigation li a,
html[lang^="ms"] .woocommerce-account #customer_login h2,
html[lang^="ms"] .woocommerce-account .nn-address__label,
html[lang^="ms"] .woocommerce-account .woocommerce-Address-title h3 {
	font-size: var(--type-label-sm-size);
}

html[lang^="ms"] .woocommerce-account label,
html[lang^="ms"] .woocommerce-account table.shop_table th,
html[lang^="ms"] .woocommerce-account .nn-link {
	font-size: var(--type-overline-size);
	letter-spacing: var(--type-overline-tracking);
}
/* =========================================================================
   13. THE DASHBOARD (ticket 04)
   One greeting, one line of orientation, three plain ways in. No running
   text with six links hidden inside it.
   ========================================================================= */

.woocommerce-account .nn-dashboard {
	max-width: 42rem;
}

.woocommerce-account .nn-dashboard__greeting {
	margin: 0 0 var(--space-3);
	font-size: var(--type-headline-md-size);
	font-weight: var(--type-headline-md-weight);
	line-height: var(--type-headline-md-leading);
	letter-spacing: var(--type-headline-md-tracking);
	color: var(--color-charcoal);
}

.woocommerce-account .nn-dashboard__intro {
	margin: 0 0 var(--space-5);
	font-size: var(--type-body-md-size);
	line-height: var(--type-body-md-leading);
	color: var(--color-charcoal);
}

.woocommerce-account .nn-dashboard__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.woocommerce-account .nn-dashboard__links a {
	font-size: var(--type-label-md-size);
	font-weight: var(--type-label-md-weight);
	line-height: var(--type-label-md-leading);
	letter-spacing: var(--type-label-md-tracking);
	text-transform: var(--type-label-md-transform);
	text-decoration: none;
	border-bottom: 1px solid var(--color-charcoal);
	padding-bottom: 2px;
}

.woocommerce-account .nn-dashboard__links a:hover,
.woocommerce-account .nn-dashboard__links a:focus {
	border-bottom-width: 2px;
}

.woocommerce-account .nn-dashboard__switch {
	margin: 0;
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
}

/* =========================================================================
   14. TABLE SURFACES
   The shop plugin tints its tables grey. The house table is ivory with sand
   hairlines, so the cells carry the surface colour themselves.
   ========================================================================= */

.woocommerce-account .woocommerce table.shop_table,
.woocommerce-account .woocommerce table.shop_table th,
.woocommerce-account .woocommerce table.shop_table td {
	background-color: var(--color-ivory);
	border-color: var(--color-border);
}
/* =========================================================================
   15. FORM ROWS: NO CLEAR-FIX PSEUDO-ELEMENTS
   The shop plugin ends every form row with a clear-fix pseudo-element. In
   this theme it clears a mark that has no size of its own and leaves a tall
   empty band under the field. Nothing here floats, so the clear-fix has no
   job; switching it off closes the band.
   ========================================================================= */

.woocommerce-account .woocommerce form .form-row::before,
.woocommerce-account .woocommerce form .form-row::after,
.woocommerce-account .nn-field::before,
.woocommerce-account .nn-field::after {
	content: none !important;
	display: none !important;
}
/* =========================================================================
   16. ONE EVEN COLUMN OF FIELDS
   The shop plugin separates its rows with clear-fix divs and loose
   whitespace, which leaves bands of empty air at some widths. The account
   forms become a single column with one gap, so every field sits the same
   distance from the next at every width.
   ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-content form,
.woocommerce-account #customer_login form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.woocommerce-account .woocommerce-MyAccount-content form .clear,
.woocommerce-account #customer_login form .clear {
	display: none;
}

.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce form .form-row.form-row-first,
.woocommerce-account .woocommerce form .form-row.form-row-last,
.woocommerce-account .woocommerce form .form-row.form-row-wide,
.woocommerce-account .nn-field {
	margin: 0;
}

.woocommerce-account .woocommerce form fieldset {
	margin-top: 0;
}

.woocommerce-account .woocommerce form .form-row + .form-row,
.woocommerce-account .woocommerce form fieldset + p,
.woocommerce-account .woocommerce form p + fieldset {
	margin-top: 0;
}
/* =========================================================================
   17. THE LOGIN / REGISTER PAIR AND THE ADDRESS PAIR
   The shop plugin opens and closes its two-column blocks with clear-fix
   pseudo-elements. Once the block is a grid those pseudo-elements become
   grid items of their own, which pushes the first column into the second
   cell and drops the second one a row. Switching them off puts the pair
   back side by side.
   ========================================================================= */

.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	content: none !important;
	display: none !important;
}
/* =========================================================================
   18. PHONE: THE ORDER NUMBER ROW
   The shop plugin puts the order number in a row header cell (<th
   scope="row">) and the rest in ordinary cells. The phone layout above
   only painted the ordinary cells, so the number fell out of the card.
   The header cell now takes the same shape as the others.
   ========================================================================= */

@media (max-width: 767px) {
	.woocommerce-account table.shop_table tbody th {
		display: flex;
		justify-content: space-between;
		gap: var(--space-4);
		padding: 0.35rem 0 0.5rem;
		border-top: 0;
		text-align: right;
		font-size: var(--type-body-md-size);
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}

	.woocommerce-account table.shop_table tbody th::before {
		content: attr(data-title);
		font-size: var(--type-label-sm-size);
		font-weight: var(--type-label-sm-weight);
		letter-spacing: var(--type-label-sm-tracking);
		text-transform: var(--type-label-sm-transform);
		color: var(--color-charcoal);
		text-align: left;
	}

	.woocommerce-account table.shop_table tbody th a {
		color: var(--color-charcoal);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}
/* =========================================================================
   19. PHONE TABLE LABELS WITHOUT A COLON
   The shop plugin labels every cell with its column name followed by a
   colon, except the row header it writes itself. The house labels are the
   same words without the mark, so the two kinds read alike.
   ========================================================================= */

@media (max-width: 767px) {
	.woocommerce-account .woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-account .woocommerce table.shop_table tr td::before {
		content: attr(data-title);
	}
}
/* =========================================================================
   20. PHONE GUTTER
   The theme leaves ten pixels at each side on a phone; the frame's own
   margins are wider, so the account screens line up with the header.
   ========================================================================= */

@media (max-width: 767px) {
	.woocommerce-account main#content.site-main {
		padding-inline: var(--space-4);
	}
}