/* ==========================================================================
   PAMI — WooCommerce My Account
   Build: account-final-v4
   Heading selectors expanded explicitly for cross-browser compatibility.
   --------------------------------------------------------------------------
   Premium, update-resistant styling for the classic WooCommerce My Account
   experience.

   Requires:
   - WooCommerce core frontend styles;
   - PAMI main.css design tokens;
   - PAMI woocommerce-base.css foundation.

   Architecture:
   - CSS enhancement layer only;
   - no WooCommerce template overrides;
   - no PHP changes;
   - no JavaScript DOM manipulation;
   - no assumptions about menu item count or endpoint order;
   - plugin-added navigation endpoints remain supported;
   - plugin-added table columns remain supported;
   - WooCommerce notices and hooked content remain in normal document flow;
   - intentionally avoids sticky navigation.

   Stable WooCommerce surfaces used:
   - .woocommerce-MyAccount-navigation;
   - .woocommerce-MyAccount-navigation-link;
   - .woocommerce-MyAccount-content;
   - #customer_login;
   - official account form classes;
   - .shop_table and official account table classes;
   - .woocommerce-Addresses and .woocommerce-Address;
   - official order, download and payment-method classes.

   Scope:
   - body.woocommerce-account only;
   - no effect on Cart, Checkout, Shop or Single Product pages.
   ========================================================================== */


/* ==========================
   LOCAL ACCOUNT TOKENS
========================== */

body.woocommerce-account {
	--pami-account-navigation-width:
		clamp(
			230px,
			22vw,
			280px
		);

	--pami-account-column-gap:
		clamp(
			var(--space-6, 28px),
			4vw,
			var(--space-9, 48px)
		);

	--pami-account-section-gap:
		clamp(
			var(--space-6, 28px),
			4vw,
			var(--space-9, 48px)
		);

	--pami-account-panel-padding:
		clamp(
			var(--space-5, 24px),
			3vw,
			var(--space-7, 32px)
		);

	--pami-account-table-cell-padding:
		clamp(
			var(--space-3, 12px),
			1.8vw,
			var(--space-4, 16px)
		);

	background-color:
		var(--color-background, #faf8f5);
}


/* ==========================
   PAGE ENVIRONMENT
========================== */

body.woocommerce-account .site-main {
	box-sizing: border-box;

	min-height: 68vh;

	background:
		linear-gradient(
			180deg,
			var(--color-background, #faf8f5) 0%,
			var(--color-surface-light, #fdfcfb) 100%
		);
}

body.woocommerce-account .page-content__body {
	box-sizing: border-box;

	width: 100%;
	max-width:
		var(--container-width, 1320px);

	margin-inline: auto;

	padding-top:
		clamp(
			var(--space-7, 32px),
			5vw,
			var(--space-10, 64px)
		);

	padding-right:
		var(--container-padding, 20px);

	padding-bottom:
		clamp(
			var(--space-10, 64px),
			8vw,
			120px
		);

	padding-left:
		var(--container-padding, 20px);
}

body.woocommerce-account
	.page-content__body
	> .woocommerce {
	width: 100%;
	min-width: 0;
}

/*
 * Float clearing is intentionally applied without converting the shared
 * WooCommerce wrapper into Grid or Flex. Notices and extension content
 * inserted before or after the official account components therefore keep
 * their natural document flow.
 */
body.woocommerce-account
	.page-content__body
	> .woocommerce::after {
	content: "";

	display: table;

	clear: both;
}


/* ==========================================================================
   LOGGED-IN ACCOUNT LAYOUT
   --------------------------------------------------------------------------
   The two official account components control their own columns. The shared
   parent remains layout-neutral for notice and extension compatibility.
   ========================================================================== */

body.woocommerce-account
	.woocommerce-MyAccount-navigation {
	float: left;

	box-sizing: border-box;

	width:
		var(--pami-account-navigation-width);

	min-width: 0;

	margin: 0;
}

body.woocommerce-account
	.woocommerce-MyAccount-content {
	float: right;

	box-sizing: border-box;

	width:
		calc(
			100% -
			var(--pami-account-navigation-width) -
			var(--pami-account-column-gap)
		);

	min-width: 0;

	margin: 0;
	padding:
		var(--pami-account-panel-padding);

	background:
		linear-gradient(
			160deg,
			rgba(255, 255, 255, 0.92) 0%,
			rgba(253, 252, 251, 0.82) 100%
		);

	border:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	border-radius:
		var(--radius-lg, 12px);

	box-shadow:
		0 18px 48px rgba(45, 42, 40, 0.05);
}


/* ==========================================================================
   ACCOUNT NAVIGATION
   ========================================================================== */

body.woocommerce-account
	.woocommerce-MyAccount-navigation {
	padding:
		var(--space-3, 12px);

	background:
		linear-gradient(
			160deg,
			rgba(255, 255, 255, 0.9) 0%,
			rgba(250, 248, 245, 0.82) 100%
		);

	border:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	border-radius:
		var(--radius-lg, 12px);

	box-shadow:
		0 18px 48px rgba(45, 42, 40, 0.045);
}

body.woocommerce-account
	.woocommerce-MyAccount-navigation
	ul {
	display: grid;

	gap:
		var(--space-1, 4px);

	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;
}

body.woocommerce-account
	.woocommerce-MyAccount-navigation
	li {
	float: none;

	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;

	border: 0;
}

body.woocommerce-account
	.woocommerce-MyAccount-navigation
	a {
	position: relative;

	display: flex;
	align-items: center;

	box-sizing: border-box;

	width: 100%;
	min-height:
		var(--touch-target-min, 44px);

	padding:
		12px
		14px
		12px
		17px;

	font-size:
		var(--font-size-small, 14px);

	font-weight:
		var(--font-weight-medium, 500);

	line-height: 1.4;
	letter-spacing: -0.005em;

	color:
		var(--color-text-light, #6a625c);

	background-color:
		transparent;

	border:
		1px solid
		transparent;

	border-radius:
		var(--radius-sm, 6px);

	text-decoration: none;

	transition:
		color
		var(--woocommerce-duration-fast, 180ms)
		var(
			--woocommerce-ease-standard,
			cubic-bezier(0.4, 0, 0.2, 1)
		),
		background-color
		var(--woocommerce-duration-base, 320ms)
		var(
			--woocommerce-ease-luxury,
			cubic-bezier(0.22, 1, 0.36, 1)
		),
		border-color
		var(--woocommerce-duration-base, 320ms)
		var(
			--woocommerce-ease-luxury,
			cubic-bezier(0.22, 1, 0.36, 1)
		);
}

body.woocommerce-account
	.woocommerce-MyAccount-navigation
	a::before {
	content: "";

	position: absolute;
	top: 50%;
	left: 7px;

	width: 2px;
	height: 0;

	background-color:
		var(--color-primary, #8f2727);

	border-radius:
		var(--radius-full, 999px);

	transform:
		translateY(-50%);

	transition:
		height
		var(--woocommerce-duration-base, 320ms)
		var(
			--woocommerce-ease-luxury,
			cubic-bezier(0.22, 1, 0.36, 1)
		);
}

body.woocommerce-account
	.woocommerce-MyAccount-navigation
	a:hover {
	color:
		var(--color-primary, #8f2727);

	background-color:
		rgba(143, 39, 39, 0.035);

	border-color:
		rgba(143, 39, 39, 0.1);

	text-decoration: none;
}

body.woocommerce-account
	.woocommerce-MyAccount-navigation
	li.is-active
	> a,
body.woocommerce-account
	.woocommerce-MyAccount-navigation
	a[aria-current="page"] {
	color:
		var(--color-primary, #8f2727);

	background-color:
		rgba(143, 39, 39, 0.055);

	border-color:
		rgba(143, 39, 39, 0.14);
}

body.woocommerce-account
	.woocommerce-MyAccount-navigation
	li.is-active
	> a::before,
body.woocommerce-account
	.woocommerce-MyAccount-navigation
	a[aria-current="page"]::before {
	height: 22px;
}


/* ==========================
   NAVIGATION FOCUS FALLBACK
========================== */

body.woocommerce-account
	.woocommerce-MyAccount-navigation
	a:focus {
	color:
		var(--color-primary, #8f2727);

	outline:
		var(--focus-ring-width, 3px)
		solid
		var(
			--focus-ring-color,
			rgba(143, 39, 39, 0.55)
		);

	outline-offset: 2px;

	text-decoration: none;
}

@supports selector(:focus-visible) {
	body.woocommerce-account
		.woocommerce-MyAccount-navigation
		a:focus:not(:focus-visible) {
		outline: none;
	}
}


/* ==========================================================================
   ACCOUNT CONTENT TYPOGRAPHY
   ========================================================================== */

body.woocommerce-account
	.woocommerce-MyAccount-content
	> p {
	margin:
		0
		0
		var(--space-5, 24px);

	line-height: 1.75;

	color:
		var(--color-text-light, #6a625c);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	> p
	a {
	font-weight:
		var(--font-weight-medium, 500);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	> h2,
body.woocommerce-account
	.woocommerce-MyAccount-content
	> h3,
body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-order-details__title,
body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-column__title,
body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Address-title
	h2 {
	position: relative;

	margin:
		0
		0
		var(--space-6, 28px);

	padding:
		0
		0
		var(--space-4, 16px);

	font-size:
		var(
			--font-size-section-title,
			clamp(1.5rem, 2.15vw, 2rem)
		);

	font-weight:
		var(--font-weight-semibold, 600);

	line-height:
		var(--line-height-section-title, 1.15);

	letter-spacing:
		var(
			--letter-spacing-section-title,
			-0.025em
		);

	color:
		var(--color-text, #2d2a28);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	> h2::after,
body.woocommerce-account
	.woocommerce-MyAccount-content
	> h3::after,
body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-order-details__title::after,
body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-column__title::after,
body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Address-title
	h2::after {
	content: "";

	position: absolute;
	bottom: 0;
	left: 0;

	width: 42px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			var(--color-primary, #8f2727) 0%,
			var(--color-brand-gold-soft, #d1b8a1) 100%
		);
}


/* ==========================================================================
   LOGIN AND REGISTRATION
   ========================================================================== */

body.woocommerce-account
	#customer_login {
	display: grid;

	grid-template-columns:
		repeat(
			auto-fit,
			minmax(
				min(100%, 360px),
				1fr
			)
		);

	gap:
		var(--pami-account-column-gap);

	width: 100%;

	margin: 0;
}

body.woocommerce-account
	#customer_login::before,
body.woocommerce-account
	#customer_login::after {
	content: none;

	display: none;
}

body.woocommerce-account
	#customer_login
	> :is(
		.u-column1,
		.u-column2,
		.col-1,
		.col-2
	) {
	float: none;

	box-sizing: border-box;

	width: 100%;
	min-width: 0;

	margin: 0;
	padding: 0;
}

body.woocommerce-account
	#customer_login
	h2,
body.woocommerce-account
	.woocommerce
	> h2 {
	margin:
		0
		0
		var(--space-5, 24px);

	font-size:
		var(
			--font-size-section-title,
			clamp(1.5rem, 2.15vw, 2rem)
		);

	font-weight:
		var(--font-weight-semibold, 600);

	line-height:
		var(--line-height-section-title, 1.15);

	letter-spacing:
		var(
			--letter-spacing-section-title,
			-0.025em
		);

	color:
		var(--color-text, #2d2a28);
}

body.woocommerce-account
	:is(
		.woocommerce-form-login,
		.woocommerce-form-register,
		.woocommerce-ResetPassword
	) {
	box-sizing: border-box;

	width: 100%;
	max-width: 100%;

	margin: 0;
	padding:
		var(--pami-account-panel-padding);

	background:
		linear-gradient(
			160deg,
			rgba(255, 255, 255, 0.92) 0%,
			rgba(253, 252, 251, 0.82) 100%
		);

	border:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	border-radius:
		var(--radius-lg, 12px);

	box-shadow:
		0 18px 48px rgba(45, 42, 40, 0.05);
}

body.woocommerce-account
	.woocommerce-ResetPassword {
	max-width:
		620px;

	margin-inline: auto;
}

body.woocommerce-account
	:is(
		.woocommerce-form-login,
		.woocommerce-form-register,
		.woocommerce-ResetPassword
	)
	.form-row {
	float: none;

	width: 100%;

	margin:
		0
		0
		var(--space-4, 16px);

	padding: 0;
}

@supports selector(p:has(input)) {
	body.woocommerce-account
		.woocommerce-form-login
		.form-row:has(
			.woocommerce-form-login__rememberme
		) {
		display: flex;
		flex-wrap: wrap;
		gap:
			var(--space-3, 12px);

		align-items: center;
		justify-content: space-between;
	}
}

body.woocommerce-account
	.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap:
		var(--space-2, 8px);

	margin: 0;
}

body.woocommerce-account
	.woocommerce-LostPassword {
	margin:
		var(--space-4, 16px)
		0
		0;

	font-size:
		var(--font-size-small, 14px);
}


/*
 * Browsers without :has() simply keep the native block flow. The login form
 * remains fully usable; only the optional inline alignment is omitted.
 */


/* ==========================================================================
   ACCOUNT FORMS
   --------------------------------------------------------------------------
   Base controls, labels, validation and buttons come from
   woocommerce-base.css. This layer only manages account-specific spacing.
   ========================================================================== */

body.woocommerce-account
	.woocommerce-MyAccount-content
	:is(
		.woocommerce-EditAccountForm,
		.woocommerce-address-fields
	) {
	width: 100%;
	min-width: 0;

	margin: 0;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	:is(
		.woocommerce-EditAccountForm,
		.woocommerce-address-fields
	)
	.form-row {
	box-sizing: border-box;

	margin-bottom:
		var(--space-5, 24px);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	:is(
		.woocommerce-EditAccountForm,
		.woocommerce-address-fields
	)
	.form-row-first {
	float: left;

	width:
		calc(
			50% -
			calc(
				var(--space-4, 16px) /
				2
			)
		);

	margin-right:
		var(--space-4, 16px);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	:is(
		.woocommerce-EditAccountForm,
		.woocommerce-address-fields
	)
	.form-row-last {
	float: right;

	width:
		calc(
			50% -
			calc(
				var(--space-4, 16px) /
				2
			)
		);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	:is(
		.woocommerce-EditAccountForm,
		.woocommerce-address-fields
	)
	.form-row-wide {
	float: none;

	clear: both;

	width: 100%;
}

body.woocommerce-account
	.woocommerce-EditAccountForm
	fieldset {
	clear: both;

	min-width: 0;

	margin:
		var(--space-7, 32px)
		0
		var(--space-6, 28px);

	padding:
		var(--space-6, 28px)
		0
		0;

	border: 0;
	border-top:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);
}

body.woocommerce-account
	.woocommerce-EditAccountForm
	fieldset
	legend {
	width: 100%;

	margin:
		0
		0
		var(--space-5, 24px);

	padding: 0;

	font-size:
		var(
			--font-size-subsection-title,
			clamp(1.25rem, 1.5vw, 1.5rem)
		);

	font-weight:
		var(--font-weight-semibold, 600);

	line-height:
		var(--line-height-subsection-title, 1.2);

	letter-spacing:
		var(
			--letter-spacing-subsection-title,
			-0.018em
		);

	color:
		var(--color-text, #2d2a28);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	:is(
		.woocommerce-EditAccountForm,
		.woocommerce-address-fields
	)::after {
	content: "";

	display: table;

	clear: both;
}


/* ==========================
   ACCOUNT FORM FOCUS FALLBACK
========================== */

body.woocommerce-account
	:is(
		.woocommerce-form-login,
		.woocommerce-form-register,
		.woocommerce-ResetPassword,
		.woocommerce-EditAccountForm,
		.woocommerce-address-fields
	)
	:is(
		input.input-text,
		input.qty,
		textarea,
		select
	):focus {
	color:
		var(--color-text, #2d2a28);

	background-color:
		var(--color-white, #ffffff);

	border-color:
		var(--color-primary, #8f2727);

	outline:
		var(--focus-ring-width, 3px)
		solid
		var(
			--focus-ring-color,
			rgba(143, 39, 39, 0.55)
		);

	outline-offset: 1px;

	box-shadow:
		0 0 0 1px
		var(--color-primary, #8f2727);
}

@supports selector(:focus-visible) {
	body.woocommerce-account
		:is(
			.woocommerce-form-login,
			.woocommerce-form-register,
			.woocommerce-ResetPassword,
			.woocommerce-EditAccountForm,
			.woocommerce-address-fields
		)
		:is(
			input.input-text,
			input.qty,
			textarea,
			select
		):focus:not(:focus-visible) {
		outline: none;

		box-shadow:
			inset 0 1px 1px
			rgba(45, 42, 40, 0.025);
	}
}


/* ==========================
   PASSWORD FEEDBACK
========================== */

body.woocommerce-account
	.woocommerce-password-strength {
	box-sizing: border-box;

	margin-top:
		var(--space-2, 8px);

	padding:
		var(--space-2, 8px)
		var(--space-3, 12px);

	font-size:
		var(--font-size-caption, 13px);

	font-weight:
		var(--font-weight-medium, 500);

	line-height: 1.45;

	color:
		var(--color-text, #2d2a28);

	background-color:
		var(--color-surface-muted, #f4f0eb);

	border:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	border-radius:
		var(--radius-sm, 6px);
}

body.woocommerce-account
	.woocommerce-password-strength.bad,
body.woocommerce-account
	.woocommerce-password-strength.short {
	color:
		var(--color-error, #b3261e);

	background-color:
		rgba(179, 38, 30, 0.055);

	border-color:
		rgba(179, 38, 30, 0.2);
}

body.woocommerce-account
	.woocommerce-password-strength.good {
	color:
		var(--color-primary-dark, #741818);

	background-color:
		rgba(143, 39, 39, 0.05);

	border-color:
		rgba(143, 39, 39, 0.18);
}

body.woocommerce-account
	.woocommerce-password-strength.strong {
	color:
		var(--color-success, #2f7d4f);

	background-color:
		rgba(47, 125, 79, 0.055);

	border-color:
		rgba(47, 125, 79, 0.2);
}

body.woocommerce-account
	.woocommerce-password-hint {
	display: block;

	margin-top:
		var(--space-2, 8px);

	font-size:
		var(--font-size-caption, 13px);

	line-height: 1.55;

	color:
		var(--color-text-muted, #8d8378);
}


/* ==========================================================================
   ACCOUNT TABLES
   --------------------------------------------------------------------------
   Column count and order remain controlled by WooCommerce and extensions.
   No nth-child selectors or fixed-column assumptions are used.
   ========================================================================== */

body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table {
	width: 100%;
	max-width: 100%;

	margin:
		0
		0
		var(--space-6, 28px);

	table-layout: auto;

	background:
		rgba(255, 255, 255, 0.48);

	border:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	border-collapse: separate;
	border-spacing: 0;

	border-radius:
		var(--radius-md, 8px);

	box-shadow: none;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table
	thead
	th {
	padding:
		var(--pami-account-table-cell-padding);

	font-size:
		0.6875rem;

	font-weight:
		var(--font-weight-semibold, 600);

	line-height: 1.3;
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;

	color:
		var(--color-text-muted, #8d8378);

	background:
		rgba(250, 248, 245, 0.72);

	border: 0;
	border-bottom:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	vertical-align: middle;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table
	tbody
	:is(
		th,
		td
	),
body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table
	tfoot
	:is(
		th,
		td
	) {
	padding:
		var(--pami-account-table-cell-padding);

	font-size:
		var(--font-size-small, 14px);

	line-height: 1.55;

	color:
		var(--color-text-light, #6a625c);

	background: transparent;

	border: 0;
	border-bottom:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	vertical-align: middle;

	overflow-wrap: break-word;
	word-break: normal;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table
	tbody
	th {
	font-weight:
		var(--font-weight-semibold, 600);

	text-align: left;

	color:
		var(--color-text, #2d2a28);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table
	:is(
		.woocommerce-orders-table__cell-order-number,
		.product-name,
		.download-product,
		.payment-method-method
	) {
	font-weight:
		var(--font-weight-medium, 500);

	color:
		var(--color-text, #2d2a28);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table
	:is(
		.woocommerce-orders-table__cell-order-total,
		.product-total,
		.download-remaining,
		.download-expires,
		.payment-method-expires
	) {
	font-variant-numeric:
		tabular-nums;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table
	:is(
		.woocommerce-orders-table__cell-order-actions,
		.download-file,
		.payment-method-actions,
		.order-actions
	) {
	text-align: right;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table
	:is(
		.woocommerce-orders-table__cell-order-actions,
		.download-file,
		.payment-method-actions,
		.order-actions
	)
	.button {
	margin:
		var(--space-1, 4px)
		0
		var(--space-1, 4px)
		var(--space-2, 8px);
}


/* ==========================
   RESPONSIVE TABLE LABELS
========================== */

body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table_responsive
	td[data-title]::before,
body.woocommerce-account
	.woocommerce-MyAccount-content
	table.shop_table_responsive
	th[data-title]::before {
	font-size:
		0.6875rem;

	font-weight:
		var(--font-weight-semibold, 600);

	letter-spacing: 0.08em;
	text-transform: uppercase;

	color:
		var(--color-text-muted, #8d8378);
}


/*
 * WooCommerce Orders mobile correction
 * ------------------------------------
 * Core orders.php renders the order number as a tbody <th>, while the
 * responsive WooCommerce table layer can hide tbody headings. Restore only
 * the official order-number cell. No column position or count is assumed.
 */
@media (max-width: 768px) {
	body.woocommerce-account
		.woocommerce-MyAccount-content
		table.woocommerce-orders-table.shop_table_responsive
		tbody
		th.woocommerce-orders-table__cell-order-number[data-title] {
		display: block;

		box-sizing: border-box;

		width: 100%;

		text-align: right;
	}

	body.woocommerce-account
		.woocommerce-MyAccount-content
		table.woocommerce-orders-table.shop_table_responsive
		tbody
		th.woocommerce-orders-table__cell-order-number[data-title]::before {
		content:
			attr(data-title)
			": ";

		float: left;

		margin-right:
			var(--space-3, 12px);
	}
}


/* ==========================
   ORDER PAGINATION
========================== */

body.woocommerce-account
	.woocommerce-Pagination,
body.woocommerce-account
	.woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	gap:
		var(--space-3, 12px);

	align-items: center;
	justify-content: space-between;

	width: 100%;

	margin:
		var(--space-6, 28px)
		0
		0;
}

body.woocommerce-account
	.woocommerce-Pagination
	.button,
body.woocommerce-account
	.woocommerce-pagination
	.button {
	margin: 0;
}


/* ==========================================================================
   ADDRESSES
   ========================================================================== */

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Addresses {
	display: grid;

	grid-template-columns:
		repeat(
			auto-fit,
			minmax(
				min(100%, 280px),
				1fr
			)
		);

	gap:
		var(--pami-account-column-gap);

	width: 100%;

	margin:
		var(--space-6, 28px)
		0
		0;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Addresses::before,
body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Addresses::after {
	content: none;

	display: none;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Address {
	float: none;

	box-sizing: border-box;

	width: 100%;
	min-width: 0;

	margin: 0;
	padding:
		var(--space-5, 24px);

	background:
		rgba(255, 255, 255, 0.54);

	border:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	border-radius:
		var(--radius-md, 8px);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	gap:
		var(--space-3, 12px);

	align-items: flex-start;
	justify-content: space-between;

	margin:
		0
		0
		var(--space-5, 24px);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Address-title
	h2 {
	flex:
		1 1 220px;

	margin: 0;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Address-title
	.edit {
	flex:
		0 0 auto;

	font-size:
		var(--font-size-caption, 13px);

	font-weight:
		var(--font-weight-semibold, 600);

	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-Address
	address {
	margin: 0;
	padding: 0;

	font-style: normal;

	line-height: 1.75;

	color:
		var(--color-text-light, #6a625c);

	background: transparent;

	border: 0;
	border-radius: 0;

	box-shadow: none;
}


/* ==========================================================================
   VIEW ORDER AND CUSTOMER DETAILS
   ========================================================================== */

body.woocommerce-account
	.woocommerce-MyAccount-content
	:is(
		.woocommerce-order-details,
		.woocommerce-customer-details,
		.woocommerce-order-downloads
	) {
	width: 100%;

	margin:
		0
		0
		var(--pami-account-section-gap);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-customer-details
	.woocommerce-columns--addresses {
	display: grid;

	grid-template-columns:
		repeat(
			auto-fit,
			minmax(
				min(100%, 280px),
				1fr
			)
		);

	gap:
		var(--pami-account-column-gap);

	width: 100%;

	margin: 0;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-customer-details
	.woocommerce-columns--addresses::before,
body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-customer-details
	.woocommerce-columns--addresses::after {
	content: none;

	display: none;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-customer-details
	.woocommerce-column {
	float: none;

	box-sizing: border-box;

	width: 100%;
	min-width: 0;

	margin: 0;
	padding:
		var(--space-5, 24px);

	background:
		rgba(255, 255, 255, 0.54);

	border:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	border-radius:
		var(--radius-md, 8px);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-customer-details
	address {
	margin: 0;
	padding: 0;

	font-style: normal;

	line-height: 1.75;

	color:
		var(--color-text-light, #6a625c);

	background: transparent;

	border: 0;
	border-radius: 0;

	box-shadow: none;
}


/* ==========================================================================
   PAYMENT METHODS
   ========================================================================== */

body.woocommerce-account
	.woocommerce-MyAccount-content
	.account-payment-methods-table
	tr.default-payment-method {
	background-color:
		rgba(47, 125, 79, 0.035);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	#add_payment_method {
	width: 100%;

	margin: 0;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	#add_payment_method
	#payment {
	margin: 0;
	padding: 0;

	background: transparent;

	border: 0;
	border-radius: 0;

	box-shadow: none;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-PaymentMethods {
	display: grid;

	gap:
		var(--space-3, 12px);

	margin:
		0
		0
		var(--space-6, 28px);

	padding: 0;

	list-style: none;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-PaymentMethods
	> .woocommerce-PaymentMethod {
	display: grid;

	grid-template-columns:
		18px
		minmax(0, 1fr);

	column-gap:
		var(--space-3, 12px);

	align-items: start;

	margin: 0;
	padding:
		var(--space-4, 16px);

	background-color:
		rgba(255, 255, 255, 0.54);

	border:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	border-radius:
		var(--radius-md, 8px);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-PaymentMethods
	> .woocommerce-PaymentMethod
	> input.input-radio {
	grid-column: 1;

	width: 17px;
	height: 17px;

	margin:
		3px
		0
		0;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-PaymentMethods
	> .woocommerce-PaymentMethod
	> label {
	display: flex;
	flex-wrap: wrap;
	gap:
		var(--space-2, 8px);

	grid-column: 2;

	align-items: flex-start;

	min-width: 0;

	margin: 0;

	font-size:
		var(--font-size-small, 14px);

	font-weight:
		var(--font-weight-semibold, 600);

	line-height: 1.5;

	color:
		var(--color-text, #2d2a28);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-PaymentMethods
	> .woocommerce-PaymentMethod
	> label
	img {
	float: none;

	width: auto;
	max-width: 108px;
	max-height: 28px;

	margin:
		-2px
		0
		0
		auto;
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-PaymentBox {
	grid-column:
		1 / -1;

	box-sizing: border-box;

	width: 100%;

	margin:
		var(--space-4, 16px)
		0
		0;

	padding:
		var(--space-4, 16px);

	font-size:
		var(--font-size-caption, 13px);

	line-height: 1.65;

	color:
		var(--color-text-light, #6a625c);

	background:
		rgba(250, 248, 245, 0.82);

	border:
		1px solid
		var(
			--color-border-soft,
			rgba(45, 42, 40, 0.11)
		);

	border-radius:
		var(--radius-sm, 6px);
}

body.woocommerce-account
	.woocommerce-MyAccount-content
	.woocommerce-PaymentBox::before {
	content: none;

	display: none;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
	body.woocommerce-account
		.woocommerce-MyAccount-navigation,
	body.woocommerce-account
		.woocommerce-MyAccount-content {
		float: none;

		width: 100%;
	}

	body.woocommerce-account
		.woocommerce-MyAccount-navigation {
		margin:
			0
			0
			var(--space-6, 28px);
	}

	body.woocommerce-account
		.woocommerce-MyAccount-navigation
		ul {
		grid-template-columns:
			repeat(
				auto-fit,
				minmax(
					min(100%, 180px),
					1fr
				)
			);
	}

	body.woocommerce-account
		.woocommerce-MyAccount-navigation
		a {
		height: 100%;
	}
}

@media (max-width: 760px) {
	body.woocommerce-account
		.woocommerce-MyAccount-content
		:is(
			.woocommerce-order-details,
			.woocommerce-order-downloads
		)
		table {
		display: block;

		max-width: 100%;

		overflow-x: auto;

		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 680px) {
	body.woocommerce-account
		.page-content__body {
		padding-top:
			var(--space-6, 28px);

		padding-right:
			var(--container-padding, 18px);

		padding-bottom:
			var(--space-9, 48px);

		padding-left:
			var(--container-padding, 18px);
	}

	body.woocommerce-account
		.woocommerce-MyAccount-content,
	body.woocommerce-account
		:is(
			.woocommerce-form-login,
			.woocommerce-form-register,
			.woocommerce-ResetPassword
		) {
		padding:
			var(--space-5, 24px);
	}

	body.woocommerce-account
		.woocommerce-MyAccount-navigation
		ul {
		grid-template-columns:
			minmax(0, 1fr);
	}

	body.woocommerce-account
		.woocommerce-MyAccount-content
		:is(
			.woocommerce-EditAccountForm,
			.woocommerce-address-fields
		)
		:is(
			.form-row-first,
			.form-row-last
		) {
		float: none;

		width: 100%;

		margin-right: 0;
	}

	body.woocommerce-account
		.woocommerce-MyAccount-content
		table.shop_table
		:is(
			.woocommerce-orders-table__cell-order-actions,
			.download-file,
			.payment-method-actions,
			.order-actions
		) {
		text-align: left;
	}

	body.woocommerce-account
		.woocommerce-MyAccount-content
		table.shop_table
		:is(
			.woocommerce-orders-table__cell-order-actions,
			.download-file,
			.payment-method-actions,
			.order-actions
		)
		.button {
		margin:
			var(--space-1, 4px)
			var(--space-2, 8px)
			var(--space-1, 4px)
			0;
	}
}

@media (max-width: 420px) {
	body.woocommerce-account
		.woocommerce-MyAccount-content,
	body.woocommerce-account
		:is(
			.woocommerce-form-login,
			.woocommerce-form-register,
			.woocommerce-ResetPassword
		) {
		padding:
			var(--space-4, 16px);
	}

	body.woocommerce-account
		.woocommerce-Pagination,
	body.woocommerce-account
		.woocommerce-pagination {
		align-items: stretch;
		flex-direction: column;
	}

	body.woocommerce-account
		.woocommerce-Pagination
		.button,
	body.woocommerce-account
		.woocommerce-pagination
		.button {
		width: 100%;
	}

	body.woocommerce-account
		.woocommerce-MyAccount-content
		.woocommerce-PaymentMethods
		> .woocommerce-PaymentMethod
		> label
		img {
		max-width: 92px;

		margin-left: 0;
	}
}


/* ==========================
   TOUCH DEVICES
========================== */

@media (hover: none) {
	body.woocommerce-account
		.woocommerce-MyAccount-navigation
		a:hover {
		color:
			var(--color-text-light, #6a625c);

		background-color:
			transparent;

		border-color:
			transparent;
	}

	body.woocommerce-account
		.woocommerce-MyAccount-navigation
		li.is-active
		> a,
	body.woocommerce-account
		.woocommerce-MyAccount-navigation
		a[aria-current="page"] {
		color:
			var(--color-primary, #8f2727);

		background-color:
			rgba(143, 39, 39, 0.055);

		border-color:
			rgba(143, 39, 39, 0.14);
	}
}


/* ==========================
   REDUCED MOTION
========================== */

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account
		.woocommerce-MyAccount-navigation
		a,
	body.woocommerce-account
		.woocommerce-MyAccount-navigation
		a::before {
		transition: none;
	}
}