/* WooCommerce account portal. Keeps WooCommerce markup and endpoints intact. */
.woocommerce-account {
	--fbs-account-navy: #061a30;
	--fbs-account-ink: #0e2035;
	--fbs-account-muted: #566678;
	--fbs-account-gold: #efb33d;
	--fbs-account-gold-dark: #a66a00;
	--fbs-account-paper: #f3f6f8;
	--fbs-account-line: #d9e1e8;
	--fbs-account-white: #fff;
	background: var(--fbs-account-paper);
	color: var(--fbs-account-ink);
	font-family: var(--fbs-body-font);
}

.woocommerce-account .site-content,
.woocommerce-account .site.grid-container,
.woocommerce-account #primary,
.woocommerce-account .site-main,
.woocommerce-account .inside-article {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account #primary { float: none; }
.woocommerce-account #right-sidebar,
.woocommerce-account #left-sidebar { display: none; }
.woocommerce-account .entry-header { display: none; }

/* Full-width page surface with the existing page content constrained as a shell. */
.woocommerce-account .entry-content {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	min-height: clamp(560px, 62vh, 780px);
	margin: 0 0 0 -50vw;
	padding: clamp(48px, 6vw, 84px) max(24px, calc((100vw - 1120px) / 2));
	background: linear-gradient(113deg, #edf5f9 0%, var(--fbs-account-white) 62%);
}

.woocommerce-account .fbs-account-portal-intro {
	max-width: 1120px;
	margin: 0 auto 32px;
}

.woocommerce-account .fbs-account-portal-intro__eyebrow {
	margin: 0 auto 11px;
	color: var(--fbs-account-gold-dark);
	font-family: var(--fbs-heading-font);
	font-size: var(--fbs-type-eyebrow);
	font-weight: 900;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.woocommerce-account .fbs-account-portal-intro h1 {
	margin: 0 auto 13px;
	color: var(--fbs-account-navy);
	font-family: var(--fbs-heading-font);
	font-size: var(--fbs-type-h1);
	font-weight: 650;
	letter-spacing: var(--fbs-type-h1-spacing);
	line-height: var(--fbs-type-h1-line);
}


.woocommerce-account .fbs-account-portal-intro > p:last-child {
	max-width: 660px;
	margin: 0;
	color: var(--fbs-account-muted);
	font-size: var(--fbs-type-lede);
	line-height: 1.58;
}

/* The existing account-page links become the portal navigation; no URLs are changed. */
.woocommerce-account .entry-content > nav[aria-label="Account pages"],
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	max-width: 1120px;
	margin: 0 auto 22px;
	padding: 12px;
	border: 1px solid var(--fbs-account-line);
	border-radius: 14px;
	background: var(--fbs-account-white);
	box-shadow: 0 14px 32px rgba(6, 26, 48, .07);
}

.woocommerce-account .entry-content > .woocommerce {
	max-width: 1120px;
	margin: 0 auto;
}

.woocommerce-account .entry-content > nav[aria-label="Account pages"] ul,
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .entry-content > nav[aria-label="Account pages"] li,
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

.woocommerce-account .entry-content > nav[aria-label="Account pages"] a,
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--fbs-account-navy);
	font-family: var(--fbs-heading-font);
	font-size: var(--fbs-type-text-small);
	font-weight: 750;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.woocommerce-account .entry-content > nav[aria-label="Account pages"] a:hover,
.woocommerce-account .entry-content > nav[aria-label="Account pages"] a:focus-visible,
.woocommerce-account .entry-content > nav[aria-label="Account pages"] a[aria-current="page"],
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
	border-color: var(--fbs-account-gold);
	background: #fff7e5;
	color: var(--fbs-account-navy);
	outline: none;
}

.woocommerce-account .entry-content > nav[aria-label="Account pages"] a:focus-visible,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible,
.woocommerce-account .entry-content a:focus-visible,
.woocommerce-account .entry-content button:focus-visible,
.woocommerce-account .entry-content input:focus-visible,
.woocommerce-account .entry-content select:focus-visible {
	outline: 3px solid var(--fbs-account-gold);
	outline-offset: 2px;
}

.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .entry-content > nav[aria-label="Account pages"] ~ p,
.woocommerce-account .entry-content > nav[aria-label="Account pages"] ~ .woocommerce,
.woocommerce-account .entry-content > nav[aria-label="Account pages"] ~ form {
	float: none;
	width: auto;
	max-width: 1120px;
	margin: 0 auto 12px;
	padding: clamp(24px, 3vw, 38px);
	border: 1px solid var(--fbs-account-line);
	border-radius: 14px;
	background: var(--fbs-account-white);
	color: var(--fbs-account-muted);
	box-shadow: 0 14px 32px rgba(6, 26, 48, .06);
	font-size: var(--fbs-type-body);
	line-height: 1.6;
}

.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .entry-content > nav[aria-label="Account pages"] ~ p { color: var(--fbs-account-muted); }
.woocommerce-account .woocommerce-MyAccount-content strong,
.woocommerce-account .entry-content > nav[aria-label="Account pages"] ~ strong { color: var(--fbs-account-ink); }
.woocommerce-account .woocommerce-MyAccount-content a,
.woocommerce-account .entry-content > nav[aria-label="Account pages"] ~ p a { color: #075d8b; font-weight: 750; }

.woocommerce-account .woocommerce form,
.woocommerce-account .woocommerce-MyAccount-content form,
.woocommerce-account .entry-content > .woocommerce form {
	max-width: 720px;
	margin: 0;
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--fbs-account-line);
	border-radius: 14px;
	background: var(--fbs-account-white);
	box-shadow: 0 14px 32px rgba(6, 26, 48, .06);
}

.woocommerce-account .woocommerce #customer_login {
	display: flex;
	gap: 22px;
	max-width: 100%;
	align-items: start;
	flex-wrap: nowrap;
}

.woocommerce-account .woocommerce #customer_login > .col-1,
.woocommerce-account .woocommerce #customer_login > .col-2,
.woocommerce-account .woocommerce #customer_login > .u-column1,
.woocommerce-account .woocommerce #customer_login > .u-column2 {
	display: block;
	min-width: 0;
	flex: 1 1 0;
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

.woocommerce-account .woocommerce #customer_login form { max-width: none; }

.woocommerce-account .woocommerce form .form-row { margin: 0 0 17px; }
.woocommerce-account .woocommerce form label { color: var(--fbs-account-ink); font-family: var(--fbs-heading-font); font-size: var(--fbs-type-text-small); font-weight: 750; }
.woocommerce-account .woocommerce form input.input-text,
.woocommerce-account .woocommerce form input[type="email"],
.woocommerce-account .woocommerce form input[type="password"],
.woocommerce-account .woocommerce form input[type="text"],
.woocommerce-account .woocommerce form select {
	min-height: 48px;
	border: 1px solid #cbd9e4;
	border-radius: 6px;
	background: var(--fbs-account-white);
	color: var(--fbs-account-ink);
	font: inherit;
}

.woocommerce-account .woocommerce .button,
.woocommerce-account .entry-content .woocommerce-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border: 1px solid var(--fbs-account-gold);
	border-radius: 5px;
	background: var(--fbs-account-gold);
	color: var(--fbs-account-navy);
	font-family: var(--fbs-heading-font);
	font-size: var(--fbs-type-button);
	font-weight: 900;
	line-height: 1.2;
	text-decoration: none;
}

.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce .button:focus-visible,
.woocommerce-account .entry-content .woocommerce-button:hover,
.woocommerce-account .entry-content .woocommerce-button:focus-visible { background: #f4c968; color: var(--fbs-account-navy); }

.woocommerce-account .woocommerce table.shop_table {
	margin: 0;
	border: 1px solid var(--fbs-account-line);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--fbs-type-text-small);
}

.woocommerce-account .woocommerce table.shop_table th { background: var(--fbs-account-paper); color: var(--fbs-account-navy); font-family: var(--fbs-heading-font); font-weight: 800; }
.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table th { padding: 14px; border-color: var(--fbs-account-line); }

@media (max-width: 820px) {
	.woocommerce-account .entry-content { min-height: 0; padding: 42px 20px 52px; }
	.woocommerce-account .entry-content > nav[aria-label="Account pages"] ul,
	.woocommerce-account .woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; }
	.woocommerce-account .woocommerce-MyAccount-content { width: auto; }
	.woocommerce-account .woocommerce #customer_login { flex-direction: column; }
	.woocommerce-account .woocommerce #customer_login > .col-1,
	.woocommerce-account .woocommerce #customer_login > .col-2,
	.woocommerce-account .woocommerce #customer_login > .u-column1,
	.woocommerce-account .woocommerce #customer_login > .u-column2 { width: 100%; }
}

@media (max-width: 520px) {
	.woocommerce-account .fbs-account-portal-intro h1 { font-size: var(--fbs-type-h1); }
	.woocommerce-account .entry-content > nav[aria-label="Account pages"] ul,
	.woocommerce-account .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; }
	.woocommerce-account .entry-content > nav[aria-label="Account pages"] a,
	.woocommerce-account .woocommerce-MyAccount-navigation a { justify-content: flex-start; padding: 14px 16px; text-align: left; }
	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-account .entry-content > nav[aria-label="Account pages"] ~ p,
	.woocommerce-account .entry-content > nav[aria-label="Account pages"] ~ .woocommerce,
	.woocommerce-account .entry-content > nav[aria-label="Account pages"] ~ form,
	.woocommerce-account .woocommerce form { padding: 22px; }
	.woocommerce-account .woocommerce table.shop_table { display: block; overflow-x: auto; }
}