/* My Account navigation — accordion on mobile, styled like the FacetWP sidebar widgets. */

.woocommerce-account .woocommerce-MyAccount-navigation.sp-myaccount-nav {
	margin-bottom: 1.5em;
}

/* Toggle button — hidden on desktop, shown on mobile. */
.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle {
	display: none;
}

.woocommerce-account .sp-myaccount-nav > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card styling — applies on all viewports. */
.woocommerce-account .sp-myaccount-nav {
	background: #fff;
	border: solid 1px #dfdfdf;
	border-radius: 5px;
	overflow: hidden;
}

.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li + li {
	border-top: solid 1px #dfdfdf;
}

/* Avada gives every nav link a 1px border-bottom; remove it so it doesn't
   double-up with our li + li border-top inside the card. */
.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li > a {
	display: block;
	padding: 10px 1em;
	color: #000;
	text-decoration: none;
	line-height: 1.2;
	border: 0 !important;
}

.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li > a:hover,
.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li > a:focus {
	background: var(--link_color);
	color: #fff;
}

.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li.is-active > a {
	font-weight: 700;
}

/* Hide the theme's awb-icons chevron on the active link inside our card;
   it's absolutely positioned so it leaks out when the panel is collapsed. */
.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li.is-active > a::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 782px) {
	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle {
		all: unset;
		box-sizing: border-box;
		display: block;
		width: 100%;
		cursor: pointer;
		font: inherit;
		color: inherit;
		text-align: left;
		position: relative;
		padding: 10px 2.75em 10px 1em;
		font-size: 18px;
		line-height: 1.2;
		background: #fff;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle .sp-myaccount-toggle-label {
		display: block;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle .sp-myaccount-toggle-current {
		display: block;
		font-size: 12px;
		line-height: 1.3;
		margin-top: 2px;
		opacity: 0.75;
		font-weight: 400;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle:focus-visible {
		outline: 2px solid var(--link_color);
		outline-offset: -2px;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 1em;
		width: 10px;
		height: 10px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		/* Collapsed (default mobile state) -> chevron points DOWN (can be expanded). */
		transform: translateY(-75%) rotate(45deg);
		transition: transform 0.2s ease;
		pointer-events: none;
		opacity: 0.7;
	}

	/* Expanded -> chevron points UP (can be closed). */
	.woocommerce-account .sp-myaccount-nav:not(.is-collapsed) > .sp-myaccount-toggle::after {
		transform: translateY(-25%) rotate(-135deg);
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle:hover::after {
		opacity: 1;
	}

	/* Animated open/close using grid rows trick (same as sidebar widgets). */
	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel {
		display: grid;
		grid-template-rows: 1fr;
		transition: grid-template-rows 0.25s ease;
		border-top: solid 1px #dfdfdf;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul {
		min-height: 0;
		overflow: hidden;
	}

	.woocommerce-account .sp-myaccount-nav.is-collapsed > .sp-myaccount-panel {
		grid-template-rows: 0fr;
		border-top-color: transparent;
	}

	@media (prefers-reduced-motion: reduce) {
		.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel,
		.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle::after {
			transition: none;
		}
	}
}

main#main {
    background: #f6f6f6 !important;
}

.woocommerce-MyAccount-content {
    background: #fff;
    min-height: 300px;
    margin-bottom: 60px;
}

/* My Account navigation — accordion on mobile, styled like the FacetWP sidebar widgets. */

.woocommerce-account .woocommerce-MyAccount-navigation.sp-myaccount-nav {
	margin-bottom: 1.5em;
}

/* Toggle button — hidden on desktop, shown on mobile. */
.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle {
	display: none;
}

.woocommerce-account .sp-myaccount-nav > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card styling — applies on all viewports. */
.woocommerce-account .sp-myaccount-nav {
	background: #fff;
	border: solid 1px #dfdfdf;
	border-radius: 5px;
	overflow: hidden;
}

.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li + li {
	/* border-top: solid 1px #dfdfdf; */
}

.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li > a {
	display: block;
	padding: 10px 1em;
	color: #000;
	text-decoration: none;
	line-height: 1.2;
}

.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li > a:hover,
.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li > a:focus {
	background: var(--link_color);
	color: #fff;
}

.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li.is-active > a {
	font-weight: 700;
}

/* Hide the theme's awb-icons chevron on the active link inside our card;
   it's absolutely positioned so it leaks out when the panel is collapsed. */
.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul > li.is-active > a::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 782px) {
	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle {
		all: unset;
		box-sizing: border-box;
		display: block;
		width: 100%;
		cursor: pointer;
		font: inherit;
		color: inherit;
		text-align: left;
		position: relative;
		padding: 10px 2.75em 10px 1em;
		font-size: 18px;
		line-height: 1.2;
		background: #fff;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle .sp-myaccount-toggle-label {
		display: block;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle .sp-myaccount-toggle-current {
		display: block;
		font-size: 12px;
		line-height: 1.3;
		margin-top: 2px;
		opacity: 0.75;
		font-weight: 400;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle:focus-visible {
		outline: 2px solid var(--link_color);
		outline-offset: -2px;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 1em;
		width: 10px;
		height: 10px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		/* Collapsed (default mobile state) -> chevron points DOWN (can be expanded). */
		transform: translateY(-75%) rotate(45deg);
		transition: transform 0.2s ease;
		pointer-events: none;
		opacity: 0.7;
	}

	/* Expanded -> chevron points UP (can be closed). */
	.woocommerce-account .sp-myaccount-nav:not(.is-collapsed) > .sp-myaccount-toggle::after {
		transform: translateY(-25%) rotate(-135deg);
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle:hover::after {
		opacity: 1;
	}

	/* Animated open/close using grid rows trick (same as sidebar widgets). */
	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel {
		display: grid;
		grid-template-rows: 1fr;
		transition: grid-template-rows 0.25s ease;
		border-top: solid 1px #dfdfdf;
	}

	.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel > ul {
		min-height: 0;
		overflow: hidden;
	}

	.woocommerce-account .sp-myaccount-nav.is-collapsed > .sp-myaccount-panel {
		grid-template-rows: 0fr;
		border-top-color: transparent;
	}

	@media (prefers-reduced-motion: reduce) {
		.woocommerce-account .sp-myaccount-nav > .sp-myaccount-panel,
		.woocommerce-account .sp-myaccount-nav > .sp-myaccount-toggle::after {
			transition: none;
		}
	}
}

main#main {
    background: #f6f6f6 !important;
}

.woocommerce-MyAccount-content {
    background: #fff;
    min-height: 300px;
    margin-bottom: 60px;
}
.woocommerce-MyAccount-navigation ul li:last-child a {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation ul a:hover {
    border-bottom: solid 1px var(--link_color) !important;
}