/* ==========================================================================
   ERAS® Society – My Account
   ========================================================================== */

.eras-account {
	--account-blue: #064487;
	--account-blue-dark: #043565;
	--account-navy: #10294b;

	--account-text: #40596b;
	--account-muted: #718696;

	--account-border: #dce7ed;
	--account-border-soft: #e9f0f4;

	--account-light: #f7fafc;
	--account-light-blue: #edf6fa;

	background: #fff;
	color: var(--account-text);
}


/* ==========================================================================
   Hero
   ========================================================================== */

.eras-account__hero {
	position: relative;
	overflow: hidden;

	padding: 86px 0 92px;

	background:
		linear-gradient(
			135deg,
			#f8fbfd 0%,
			#edf6fa 100%
		);
}


.eras-account__hero::before,
.eras-account__hero::after {
	content: "";

	position: absolute;

	border:
		1px solid rgba(6,68,135,.06);

	border-radius: 50%;

	pointer-events: none;
}


.eras-account__hero::before {
	top: -380px;
	right: -210px;

	width: 700px;
	height: 700px;
}


.eras-account__hero::after {
	bottom: -470px;
	left: -340px;

	width: 680px;
	height: 680px;
}


.eras-account__hero-grid {
	position: relative;
	z-index: 2;

	display: flex;

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

	gap: 60px;
}


.eras-account__kicker,
.eras-account__section-kicker {
	display: flex;
	align-items: center;
	gap: 11px;

	color: var(--account-blue);

	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .11em;

	text-transform: uppercase;
}


.eras-account__kicker {
	margin-bottom: 17px;
}


.eras-account__kicker > span,
.eras-account__section-kicker > span {
	width: 28px;
	height: 2px;

	background: var(--account-blue);
}


.eras-account__hero h1 {
	margin: 0;

	color: var(--account-blue);

	font-size: clamp(
		50px,
		5vw,
		68px
	);

	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -.04em;
}


/* ==========================================================================
   Hero user
   ========================================================================== */

.eras-account__hero-user {
	display: flex;
	align-items: center;
	gap: 16px;

	min-width: 300px;

	padding: 14px 18px;

	border:
		1px solid var(--account-border);

	border-radius: 12px;

	background: rgba(255,255,255,.8);

	box-shadow:
		0 10px 30px rgba(25,55,80,.06);
}


.eras-account__avatar {
	width: 54px;
	height: 54px;

	flex: 0 0 54px;

	overflow: hidden;

	border-radius: 50%;

	background: var(--account-light-blue);
}


.eras-account__avatar img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


.eras-account__hero-user span,
.eras-account__hero-user small,
.eras-account__hero-user strong {
	display: block;
}


.eras-account__hero-user span {
	margin-bottom: 2px;

	color: var(--account-muted);

	font-size: 9px;
	font-weight: 600;

	text-transform: uppercase;
	letter-spacing: .08em;
}


.eras-account__hero-user strong {
	color: var(--account-blue);

	font-size: 14px;
	font-weight: 650;
}


.eras-account__hero-user small {
	margin-top: 3px;

	color: var(--account-muted);

	font-size: 10px;
}


/* ==========================================================================
   Body
   ========================================================================== */

.eras-account__body {
	padding: 82px 0 110px;
}


.eras-account__intro {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, .75fr);

	gap: 70px;

	align-items: end;

	margin-bottom: 42px;
}


.eras-account__section-kicker {
	margin-bottom: 11px;
}


.eras-account__intro h2 {
	margin: 0;

	color: var(--account-blue);

	font-size: clamp(
		32px,
		3vw,
		44px
	);

	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.035em;
}


.eras-account__intro > p {
	max-width: 470px;

	margin: 0;

	color: var(--account-muted);

	font-size: 14px;
	line-height: 1.7;
}


/* ==========================================================================
   WooCommerce account wrapper
   ========================================================================== */

.eras-account__woocommerce .woocommerce {
	display: grid;

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

	gap: 30px;

	align-items: start;
}


/* ==========================================================================
   Navigation
   ========================================================================== */

.eras-account__woocommerce
.woocommerce-MyAccount-navigation {
	width: auto;
	float: none;

	padding: 8px;

	border:
		1px solid var(--account-border);

	border-radius: 13px;

	background: #fff;

	box-shadow:
		0 12px 36px rgba(25,55,80,.06);
}


.eras-account__woocommerce
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;

	gap: 3px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.eras-account__woocommerce
.woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;

	list-style: none;
}


.eras-account__woocommerce
.woocommerce-MyAccount-navigation li::before {
	display: none;
}


.eras-account__woocommerce
.woocommerce-MyAccount-navigation a {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 48px;

	padding: 0 14px;

	border-radius: 7px;

	color: #536d7e;

	font-size: 12px;
	font-weight: 600;

	text-decoration: none;

	transition:
		background-color .16s ease,
		color .16s ease,
		padding-left .16s ease;
}


.eras-account__woocommerce
.woocommerce-MyAccount-navigation a:hover {
	padding-left: 17px;

	background: var(--account-light-blue);
	color: var(--account-blue);
}


.eras-account__woocommerce
.woocommerce-MyAccount-navigation
.is-active > a {
	background: var(--account-blue);
	color: #fff;

	box-shadow:
		0 5px 15px rgba(6,68,135,.14);
}


/* ==========================================================================
   Add icons to common Woo endpoints
   ========================================================================== */

.eras-account__woocommerce
.woocommerce-MyAccount-navigation a::before {
	width: 22px;

	margin-right: 9px;

	flex: 0 0 22px;

	color: currentColor;

	font-family: "Font Awesome 5 Pro";
	font-size: 13px;
	font-weight: 300;

	text-align: center;
}


.woocommerce-MyAccount-navigation-link--dashboard a::before {
	content: "\f3fd";
}


.woocommerce-MyAccount-navigation-link--orders a::before {
	content: "\f291";
}


.woocommerce-MyAccount-navigation-link--subscriptions a::before {
	content: "\f021";
}


.woocommerce-MyAccount-navigation-link--downloads a::before {
	content: "\f019";
}


.woocommerce-MyAccount-navigation-link--edit-address a::before {
	content: "\f3c5";
}


.woocommerce-MyAccount-navigation-link--payment-methods a::before {
	content: "\f09d";
}


.woocommerce-MyAccount-navigation-link--edit-account a::before {
	content: "\f007";
}


.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	content: "\f2f5";
}


/* ==========================================================================
   Account content
   ========================================================================== */

.eras-account__woocommerce
.woocommerce-MyAccount-content {
	width: auto;
	float: none;

	min-width: 0;

	padding: 34px;

	border:
		1px solid var(--account-border);

	border-radius: 13px;

	background: #fff;

	box-shadow:
		0 12px 36px rgba(25,55,80,.05);
}


.eras-account__woocommerce
.woocommerce-MyAccount-content > *:first-child {
	margin-top: 0;
}


.eras-account__woocommerce
.woocommerce-MyAccount-content > *:last-child {
	margin-bottom: 0;
}


.eras-account__woocommerce
.woocommerce-MyAccount-content p {
	color: var(--account-text);

	font-size: 14px;
	line-height: 1.75;
}


.eras-account__woocommerce
.woocommerce-MyAccount-content a {
	color: var(--account-blue);

	font-weight: 600;

	text-underline-offset: 3px;
}


/* ==========================================================================
   Headings
   ========================================================================== */

.eras-account__woocommerce
.woocommerce-MyAccount-content h2,
.eras-account__woocommerce
.woocommerce-MyAccount-content h3 {
	color: var(--account-blue);

	font-weight: 550;
	letter-spacing: -.025em;
}


.eras-account__woocommerce
.woocommerce-MyAccount-content h2 {
	margin: 0 0 22px;

	font-size: 28px;
}


.eras-account__woocommerce
.woocommerce-MyAccount-content h3 {
	font-size: 20px;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.eras-account__woocommerce
.woocommerce a.button,
.eras-account__woocommerce
.woocommerce button.button,
.eras-account__woocommerce
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;

	padding: 0 16px;

	border: 1px solid var(--account-blue);
	border-radius: 6px;

	background: var(--account-blue);
	color: #fff;

	font-size: 11px;
	font-weight: 650;

	text-decoration: none;

	box-shadow: none;

	transition:
		background-color .16s ease,
		border-color .16s ease,
		transform .16s ease;
}


.eras-account__woocommerce
.woocommerce a.button:hover,
.eras-account__woocommerce
.woocommerce button.button:hover,
.eras-account__woocommerce
.woocommerce input.button:hover {
	background: var(--account-blue-dark);
	color: #fff;

	transform: translateY(-1px);
}


/* ==========================================================================
   Forms
   ========================================================================== */

.eras-account__woocommerce
.woocommerce form .form-row {
	margin-bottom: 18px;
}


.eras-account__woocommerce
.woocommerce form label {
	display: block;

	margin-bottom: 6px;

	color: var(--account-blue);

	font-size: 11px;
	font-weight: 650;
}


.eras-account__woocommerce
.woocommerce input.input-text,
.eras-account__woocommerce
.woocommerce textarea,
.eras-account__woocommerce
.woocommerce select {
	width: 100%;

	min-height: 46px;

	padding: 10px 13px;

	border:
		1px solid #cedde6;

	border-radius: 7px;

	background: #fff;
	color: var(--account-text);

	font: inherit;
	font-size: 13px;

	outline: none;
}


.eras-account__woocommerce
.woocommerce textarea {
	min-height: 120px;
}


.eras-account__woocommerce
.woocommerce input.input-text:focus,
.eras-account__woocommerce
.woocommerce textarea:focus,
.eras-account__woocommerce
.woocommerce select:focus {
	border-color: rgba(6,68,135,.42);

	box-shadow:
		0 0 0 3px rgba(6,68,135,.07);
}


/* ==========================================================================
   Tables
   ========================================================================== */

.eras-account__woocommerce
.woocommerce table.shop_table {
	overflow: hidden;

	width: 100%;

	margin: 0;

	border:
		1px solid var(--account-border);

	border-radius: 9px;

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


.eras-account__woocommerce
.woocommerce table.shop_table th {
	padding: 13px 14px;

	background: var(--account-light);

	color: var(--account-blue);

	font-size: 10px;
	font-weight: 700;

	text-transform: uppercase;
	letter-spacing: .05em;
}


.eras-account__woocommerce
.woocommerce table.shop_table td {
	padding: 14px;

	border-top:
		1px solid var(--account-border-soft);

	color: var(--account-text);

	font-size: 12px;
}


/* ==========================================================================
   Addresses
   ========================================================================== */

.eras-account__woocommerce
.woocommerce-Addresses {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 16px;
}


.eras-account__woocommerce
.woocommerce-Address {
	width: auto;
	float: none;

	padding: 21px;

	border:
		1px solid var(--account-border);

	border-radius: 9px;

	background: var(--account-light);
}


.eras-account__woocommerce
.woocommerce-Address address {
	color: var(--account-text);

	font-size: 13px;
	line-height: 1.7;
}


/* ==========================================================================
   Notices
   ========================================================================== */

.eras-account__woocommerce
.woocommerce-message,
.eras-account__woocommerce
.woocommerce-info,
.eras-account__woocommerce
.woocommerce-error {
	margin-bottom: 22px;

	padding: 16px 18px;

	border: 1px solid var(--account-border);
	border-radius: 8px;

	background: var(--account-light-blue);
	color: var(--account-text);

	font-size: 12px;
	line-height: 1.6;
}


.eras-account__woocommerce
.woocommerce-message::before,
.eras-account__woocommerce
.woocommerce-info::before {
	color: var(--account-blue);
}


/* ==========================================================================
   Logged-out login
   ========================================================================== */

.eras-account__woocommerce
.woocommerce-form-login {
	max-width: 520px;

	margin: 0 auto !important;

	padding: 34px !important;

	border:
		1px solid var(--account-border) !important;

	border-radius: 13px !important;

	background: #fff;

	box-shadow:
		0 12px 38px rgba(25,55,80,.06);
}


/* ==========================================================================
   WooCommerce default clearfix/floats
   ========================================================================== */

.eras-account__woocommerce
.woocommerce-MyAccount-navigation,
.eras-account__woocommerce
.woocommerce-MyAccount-content {
	float: none !important;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {

	.eras-account__woocommerce .woocommerce {
		grid-template-columns:
			220px
			minmax(0, 1fr);

		gap: 20px;
	}


	.eras-account__hero-grid {
		gap: 35px;
	}


	.eras-account__hero-user {
		min-width: 0;
	}

}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 700px) {

	.eras-account__hero {
		padding: 60px 0 68px;
	}


	.eras-account__hero-grid {
		display: grid;

		grid-template-columns: 1fr;
	}


	.eras-account__hero-user {
		max-width: 420px;
	}


	.eras-account__body {
		padding: 65px 0 85px;
	}


	.eras-account__intro {
		grid-template-columns: 1fr;

		gap: 16px;
	}


	.eras-account__woocommerce .woocommerce {
		display: block;
	}


	.eras-account__woocommerce
	.woocommerce-MyAccount-navigation {
		margin-bottom: 20px;
	}


	.eras-account__woocommerce
	.woocommerce-MyAccount-navigation ul {
		display: grid;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.eras-account__woocommerce
	.woocommerce-MyAccount-content {
		padding: 25px;
	}


	.eras-account__woocommerce
	.woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

}


@media (max-width: 480px) {

	.eras-account__hero h1 {
		font-size: 42px;
	}


	.eras-account__woocommerce
	.woocommerce-MyAccount-navigation ul {
		grid-template-columns: 1fr;
	}


	.eras-account__woocommerce
	.woocommerce-MyAccount-content {
		padding: 20px;
	}

}

/* ==========================================================================
   WooCommerce My Account – hard layout reset
   ========================================================================== */

.eras-account__woocommerce .woocommerce {
	display: grid !important;

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

	grid-template-areas:
		"navigation content";

	gap: 32px;

	align-items: start;

	width: 100%;
}


/*
 * WooCommerce använder dessa för clearfix.
 * De får INTE bli grid-items.
 */
.eras-account__woocommerce .woocommerce::before,
.eras-account__woocommerce .woocommerce::after {
	display: none !important;
	content: none !important;
}


/* Navigation */

.eras-account__woocommerce
.woocommerce-MyAccount-navigation {
	grid-area: navigation;

	float: none !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
}


/* Content */

.eras-account__woocommerce
.woocommerce-MyAccount-content {
	grid-area: content;

	float: none !important;

	width: 100% !important;
	max-width: none !important;

	min-width: 0;

	margin: 0 !important;
}


/* Dashboard text should use the available width */

.eras-account__woocommerce
.woocommerce-MyAccount-content > p {
	max-width: 760px;

	margin:
		0
		0
		18px;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 800px) {

	.eras-account__woocommerce .woocommerce {
		display: block !important;
	}


	.eras-account__woocommerce
	.woocommerce-MyAccount-navigation {
		margin-bottom: 25px !important;
	}

}

/* WooCommerce notices/messages inside My Account */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	width: 100%;
	margin: 0 0 20px;
	padding: 18px 20px;

	border: 1px solid #d7e5f0;
	border-radius: 10px;
	background: #eef7fc;

	color: #16395c;
	font-size: 15px;
	line-height: 1.5;

	box-sizing: border-box;
}

/* Remove WooCommerce default top border / icon positioning */
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-error::before {
	position: static;
	flex: 0 0 auto;
	margin: 0;
}

/* Keep text from being crushed */
.woocommerce-MyAccount-content .woocommerce-message > *:not(.button),
.woocommerce-MyAccount-content .woocommerce-info > *:not(.button),
.woocommerce-MyAccount-content .woocommerce-error > *:not(.button) {
	min-width: 0;
}

/* Buttons inside notices */
.woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-MyAccount-content .woocommerce-error .button {
	flex: 0 0 auto;
	float: none;

	margin: 0 0 0 auto;
	padding: 12px 18px;

	border: 0;
	border-radius: 6px;

	white-space: nowrap;
}

/* Lists, e.g. WooCommerce errors */
.woocommerce-MyAccount-content ul.woocommerce-error {
	list-style: none;
}

/* Mobile */
@media (max-width: 700px) {
	.woocommerce-MyAccount-content .woocommerce-message,
	.woocommerce-MyAccount-content .woocommerce-info,
	.woocommerce-MyAccount-content .woocommerce-error {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.woocommerce-MyAccount-content .woocommerce-message .button,
	.woocommerce-MyAccount-content .woocommerce-info .button,
	.woocommerce-MyAccount-content .woocommerce-error .button {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
}

/* ==========================================================================
   Logged out – My Account login
   ========================================================================== */

/*
 * Viktigt:
 * den vanliga My Account-layouten använder grid för navigation + content.
 * När användaren är utloggad finns ingen navigation och login-sidan
 * ska därför vara ett vanligt block.
 */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce .woocommerce {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* Login container */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce {
	width: 100%;
}


/* Login heading */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce .woocommerce > h2 {
	width: 100%;
	max-width: 620px;

	margin: 0 auto 32px !important;

	color: var(--account-blue);

	font-size: 36px;
	font-weight: 500;
	line-height: 1.2;

	text-align: center;
}


/* Login form */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login {
	float: none !important;
	display: block !important;

	width: 100% !important;
	max-width: 620px !important;

	margin: 0 auto !important;
	padding: 44px 48px !important;

	border: 1px solid var(--account-border) !important;
	border-radius: 13px !important;

	background: #fff;

	box-shadow:
		0 14px 40px rgba(25,55,80,.07);

	box-sizing: border-box;
}


/* Rows */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login .form-row {
	float: none !important;

	width: 100% !important;

	margin: 0 0 22px !important;
	padding: 0 !important;
}


/* Labels */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login label {
	display: block;

	margin: 0 0 8px;

	color: var(--account-blue);

	font-size: 13px;
	font-weight: 650;
}


/* Inputs */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login input.input-text {
	display: block;

	width: 100% !important;
	max-width: none !important;
	height: 52px;

	margin: 0 !important;
	padding: 0 15px !important;

	border: 1px solid #cedde6;
	border-radius: 7px;

	background: #fff;
	color: var(--account-text);

	font-size: 15px;

	box-sizing: border-box;
}


/* Focus */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login input.input-text:focus {
	outline: none;

	border-color: rgba(6,68,135,.5);

	box-shadow:
		0 0 0 3px rgba(6,68,135,.07);
}


/* Password wrapper */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login .password-input {
	display: block;

	width: 100%;
}


/* Password eye */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login .show-password-input {
	top: 50%;
	transform: translateY(-50%);
}


/* Remember me */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login
.woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center;

	gap: 8px;

	width: 100%;

	margin: 0 0 20px !important;
}


body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login
.woocommerce-form-login__rememberme input {
	margin: 0 !important;
}


/* Login button */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login
.woocommerce-form-login__submit {
	float: none !important;

	display: flex !important;
	align-items: center;
	justify-content: center;

	width: 100% !important;
	height: 50px;

	margin: 0 !important;
	padding: 0 20px !important;

	border: 1px solid var(--account-blue) !important;
	border-radius: 7px !important;

	background: var(--account-blue) !important;
	color: #fff !important;

	font-size: 13px;
	font-weight: 650;

	cursor: pointer;
}


body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
form.woocommerce-form-login
.woocommerce-form-login__submit:hover {
	background: var(--account-blue-dark) !important;
	border-color: var(--account-blue-dark) !important;
}


/* Lost password */
body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
.woocommerce-LostPassword {
	margin: 22px 0 0 !important;
}


body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
.woocommerce-LostPassword a {
	color: var(--account-blue);
	font-size: 13px;
	font-weight: 500;

	text-decoration: none;
}


body.woocommerce-account:not(.logged-in)
.eras-account__woocommerce
.woocommerce-LostPassword a:hover {
	text-decoration: underline;
}


/* Mobile */
@media (max-width: 700px) {

	body.woocommerce-account:not(.logged-in)
	.eras-account__woocommerce .woocommerce > h2 {
		margin-bottom: 24px !important;
		font-size: 30px;
	}

	body.woocommerce-account:not(.logged-in)
	.eras-account__woocommerce
	form.woocommerce-form-login {
		max-width: 100% !important;
		padding: 30px 24px !important;
	}
}