/*
 * /app/my-account — layout presets (body.wc-app-my-account-layout--1 … --5).
 * Base: app-shell.css (.wc-app-my-account). Layout 1 = shell defaults only.
 */

/*
 * Main is the scrollport (overflow-y: auto in app-shell.css). Inner wrappers must size to
 * content height — not flex-shrink with min-height:0 — or long pages (e.g. edit-account with
 * many fields or extra plugin rows) get clipped instead of scrolling.
 */
.wc-app--route-my-account .wc-app-main {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 auto;
	/* Bottom inset lives on .wc-app-my-account so layout preset shorthands do not stack with shell tab padding */
	padding-bottom: 0 !important;
}

.wc-app--route-my-account .wc-app-main > .wc-app-wc.wc-app-my-account {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	/* Scroll content clears fixed bottom nav (layout presets shorten .wc-app-main padding) */
	padding-bottom: 100px;
}

.wc-app--route-my-account .wc-app-my-account > .woocommerce {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
}

.wc-app--route-my-account .wc-app-my-account .woocommerce-MyAccount-content {
	min-width: 0;
	overflow-x: hidden;
}

/*
 * Dashboard /app/my-account/ only (not orders, edit-account, addresses, …): stretch the stack so
 * .wc-app-main’s background and layout fill the viewport above the tab bar. Sub-pages keep flex: 0 0 auto above.
 */
body.wc-app--route-my-account.wc-app--my-account-dashboard .wc-app-main > .wc-app-wc.wc-app-my-account {
	flex: 1 1 auto;
	min-height: 100%;
}

body.wc-app--route-my-account.wc-app--my-account-dashboard .wc-app-my-account > .woocommerce {
	flex: 1 1 auto;
	min-height: 100%;
}

/* =============================================================================
   Layout 2 — Dense utility (cool gray slab, one-piece nav list, uppercase micro type)
   ============================================================================= */
body.wc-app-body.wc-app-shell.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-device {
	/* Theme “Device bezel” token (--wc-app-color-chrome-bg); optional override below */
	background: var(--wc-app-my-account-layout-2-device-bg, var(--wc-app-color-chrome-bg, #e9f2fa));
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-main {
	padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce {
	gap: 14px;
}

/* Single “settings panel” nav — not floating white pills (standard). */
.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-MyAccount-navigation ul {
	gap: 0;
	border-radius: 6px;
	border: 1px solid #64748b;
	background: #f8fafc;
	overflow: hidden;
	box-shadow: none;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-MyAccount-navigation ul li a {
	padding: 11px 14px 11px 12px;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid #cbd5e1 !important;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #475569 !important;
	justify-content: flex-start;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-MyAccount-navigation ul li:last-child a {
	border-bottom: none !important;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-MyAccount-navigation ul li a::after {
	opacity: 0.35;
	border-color: #64748b;
	width: 5px;
	height: 5px;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: #fff !important;
	border-left: 3px solid #475569 !important;
	padding-left: 9px;
	color: #0f172a !important;
	box-shadow: none !important;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-MyAccount-content {
	border-radius: 6px !important;
	padding: 14px 14px 16px;
	box-shadow: none !important;
	border: 1px solid #64748b !important;
	background: #fff;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-MyAccount-content > p:first-child {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
	font-weight: 700;
}

.wc-app--route-my-account.wc-app-my-account-layout--2
	.wc-app-my-account
	.woocommerce-EditAccountForm.edit-account
	label:not(.woocommerce-form__label-for-checkbox) {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b !important;
	font-weight: 700;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-EditAccountForm.edit-account input.input-text,
.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-EditAccountForm.edit-account input[type="email"],
.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-EditAccountForm.edit-account input[type="password"],
.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-EditAccountForm.edit-account textarea,
.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-EditAccountForm.edit-account select {
	border-radius: 6px !important;
	background: #f8fafc !important;
	border-color: #94a3b8 !important;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account table.shop_table thead th,
.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account table.woocommerce-table thead th {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #64748b;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account table.shop_table,
.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account table.woocommerce-table {
	border-radius: 6px !important;
	box-shadow: none;
	border-color: #94a3b8 !important;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .wc-app-orders__card {
	border-radius: 6px;
	box-shadow: none;
	border: 1px solid #94a3b8;
	background: #fff;
}

.wc-app--route-my-account.wc-app-my-account-layout--2 .wc-app-my-account .woocommerce-MyAccount-content p:has(mark.order-number) {
	border-radius: 6px;
	box-shadow: none;
	border-color: #94a3b8;
}

/* =============================================================================
   Layout 3 — Top chips (nav first, horizontal pills)
   ============================================================================= */
.wc-app--route-my-account.wc-app-my-account-layout--3 .wc-app-main {
	padding-top: 10px;
}

.wc-app--route-my-account.wc-app-my-account-layout--3 .wc-app-my-account .woocommerce-MyAccount-navigation {
	order: 1;
	width: 100% !important;
}

.wc-app--route-my-account.wc-app-my-account-layout--3 .wc-app-my-account .woocommerce-MyAccount-content {
	order: 2;
}

.wc-app--route-my-account.wc-app-my-account-layout--3 .wc-app-my-account .woocommerce-MyAccount-navigation ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

.wc-app--route-my-account.wc-app-my-account-layout--3 .wc-app-my-account .woocommerce-MyAccount-navigation ul li {
	flex: 0 0 auto;
}

.wc-app--route-my-account.wc-app-my-account-layout--3 .wc-app-my-account .woocommerce-MyAccount-navigation ul li a {
	justify-content: center;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.wc-app--route-my-account.wc-app-my-account-layout--3 .wc-app-my-account .woocommerce-MyAccount-navigation ul li a::after {
	display: none;
}

.wc-app--route-my-account.wc-app-my-account-layout--3 .wc-app-my-account .woocommerce-MyAccount-content {
	border-radius: 18px;
	padding: 18px;
}

.wc-app--route-my-account.wc-app-my-account-layout--3 .wc-app-my-account .wc-app-orders__card {
	border-radius: 18px;
}

/* =============================================================================
   Layout 4 — Frosted studio (saturated wash + clearly translucent glass; aligns with checkout 4)
   ============================================================================= */
body.wc-app-body.wc-app-shell.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-device {
	/*
	 * Layout 4: keep the main band neutral (better contrast for frosted nav/content).
	 * Accent only as soft corner glows — replace entirely with --wc-app-my-account-layout-4-device-bg if needed.
	 */
	background: var(
		--wc-app-my-account-layout-4-device-bg,
		radial-gradient(
			ellipse 125% 95% at 100% -8%,
			color-mix(in srgb, var(--wc-app-color-accent, #2271b1) 11%, transparent),
			transparent 50%
		),
		radial-gradient(
			ellipse 110% 85% at -8% 108%,
			color-mix(in srgb, var(--wc-app-color-accent, #2271b1) 8%, transparent),
			transparent 46%
		),
		linear-gradient(
			168deg,
			var(--wc-app-color-chrome-bg, #e9f2fa) 0%,
			var(--wc-app-color-page-bg, #d8e6f2) 52%,
			var(--wc-app-color-well, #e9f2fa) 100%
		)
	);
}

.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-main {
	padding: 12px 12px calc(22px + env(safe-area-inset-bottom));
}

.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .woocommerce-MyAccount-navigation ul li a {
	background: rgba(255, 255, 255, 0.38);
	border: 1px solid rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-radius: 18px;
	box-shadow:
		0 10px 32px rgba(15, 23, 42, 0.1),
		0 1px 0 rgba(255, 255, 255, 0.55) inset;
	color: #0f172a !important;
}

.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: rgba(255, 255, 255, 0.78);
	border-color: rgba(255, 255, 255, 0.92);
	color: var(--wc-app-color-accent) !important;
	box-shadow:
		0 14px 36px rgba(var(--wc-app-color-accent-rgb, 34, 113, 177), 0.2),
		0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .woocommerce-MyAccount-content {
	background: rgba(255, 255, 255, 0.48);
	border: 1px solid rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border-radius: 24px;
	box-shadow:
		0 16px 44px rgba(15, 23, 42, 0.12),
		0 1px 0 rgba(255, 255, 255, 0.65) inset;
	padding: 18px 18px 20px;
}

body.woocommerce-orders.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .woocommerce-MyAccount-content {
	background: transparent;
	border: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}

.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .wc-app-orders__card {
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(14px) saturate(145%);
	-webkit-backdrop-filter: blur(14px) saturate(145%);
	border-radius: 22px;
	box-shadow:
		0 12px 36px rgba(15, 23, 42, 0.11),
		0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account table.shop_table,
.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account table.woocommerce-table {
	background: rgba(255, 255, 255, 0.42);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	border-color: rgba(255, 255, 255, 0.55) !important;
}

.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .woocommerce-EditAccountForm.edit-account input.input-text,
.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .woocommerce-EditAccountForm.edit-account input[type="email"],
.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .woocommerce-EditAccountForm.edit-account input[type="password"],
.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .woocommerce-EditAccountForm.edit-account textarea,
.wc-app--route-my-account.wc-app-my-account-layout--4 .wc-app-my-account .woocommerce-EditAccountForm.edit-account select {
	background: color-mix(in srgb, #fff 72%, var(--wc-app-color-accent-soft-bg, #e8f2fa)) !important;
	border-color: color-mix(in srgb, var(--wc-app-color-accent-mid, #2271b1) 30%, #cbd5e1) !important;
}

/* =============================================================================
   Layout 5 — Brand rail (accent wash, left stripe)
   ============================================================================= */
body.wc-app-body.wc-app-shell.wc-app--route-my-account.wc-app-my-account-layout--5 .wc-app-device {
	background: color-mix(in srgb, var(--wc-app-color-accent) 9%, #f8fafc);
}

.wc-app--route-my-account.wc-app-my-account-layout--5 .wc-app-main {
	padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
}

.wc-app--route-my-account.wc-app-my-account-layout--5 .wc-app-my-account .woocommerce-MyAccount-navigation ul li a {
	border-radius: 0 12px 12px 0;
	padding-left: 14px;
	border-left: 4px solid color-mix(in srgb, var(--wc-app-color-accent) 55%, #cbd5e1);
	box-shadow: 3px 4px 14px rgba(15, 23, 42, 0.05);
}

.wc-app--route-my-account.wc-app-my-account-layout--5 .wc-app-my-account .woocommerce-MyAccount-navigation ul li.is-active a {
	border-left-color: var(--wc-app-color-accent);
	background: color-mix(in srgb, var(--wc-app-color-accent) 12%, #fff);
}

.wc-app--route-my-account.wc-app-my-account-layout--5 .wc-app-my-account .woocommerce-MyAccount-content {
	border-radius: 0 16px 16px 0;
	border-left: 4px solid var(--wc-app-color-accent);
	box-shadow: 4px 8px 22px rgba(15, 23, 42, 0.07);
}

body.woocommerce-orders.wc-app--route-my-account.wc-app-my-account-layout--5 .wc-app-my-account .woocommerce-MyAccount-content {
	border: 0;
	border-left: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.wc-app--route-my-account.wc-app-my-account-layout--5 .wc-app-my-account .wc-app-orders__card {
	border-radius: 0 14px 14px 0;
	border-left: 4px solid var(--wc-app-color-accent);
	box-shadow: 3px 6px 18px rgba(15, 23, 42, 0.06);
}

.wc-app-my-account .woocommerce-form-login,
.wc-app-my-account .woocommerce-form-register {
	padding-bottom: 8px;
	margin-bottom: 2px;
}