/* stylelint-disable selector-id-pattern */

:root {

	/* ACCOUNT NAVIGATION */
	--account-nav-item-padding: var(--space-xsmall) var(--space-normal);
	--account-nav-active-surface: var(--gray-xlight);

	/* ACCOUNT SIDEBAR LAYOUT */
	--account-nav-width: 22.5%;
	--account-content-width: 77.5%; /* must sum to 100% with --account-nav-width */
	--account-content-padding-left: var(--space-xlarge);

	/* LOGIN PAGE */
	--account-login-form-max-width: 476px;
	--account-login-register-surface: var(--gray-xlight);
	--account-login-bg-bleed-top: -44px;
}

/* DO NOT EDIT BELOW THIS LINE — these are the actual styles using the above tokens. */

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

.account-navigation {
	margin-bottom: var(--space-large);

	@media (min-width: 64em) {
		width: var(--account-nav-width);
	}
}

.wc-account-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wc-account-nav li {
	padding: var(--account-nav-item-padding);
}

.wc-account-nav li.is-active {
	background-color: var(--account-nav-active-surface);
}

.wc-account-nav a {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-account .woocommerce {

	@media (min-width: 64em) {
		display: flex;
		flex-wrap: wrap;
	}
}

.woocommerce-MyAccount-content {
	
	@media (min-width: 64em) {
		padding-left: var(--account-content-padding-left);
		width: var(--account-content-width);
	}
}

/* Specificity must beat .button.accordion (0,2,0) from buttons.css, which sets
   display: flex; otherwise the toggle stays visible on desktop. */
button.button.wc-account-nav-toggle {

	@media (min-width: 64em) {
		display: none;
	}
}

.wc-account-nav.toggled-off {
	
	@media (min-width: 64em) {
		opacity: 1;
		position: static;
		transform: none;
		visibility: visible;
	}
}

/* ===== LOGIN PAGE: STRUCTURE ===== */

#customer_login.col2-set {
	display: block;

	@media (min-width: 64em) {
		display: flex;
		justify-content: space-between;
	}
}

#customer_login.col2-set .col-1,
#customer_login.col2-set .col-2 {
	width: auto;
}

#customer_login {
	margin: 0 auto;
	max-width: var(--max-width-wide);
	width: 100%;
}

/* Heading and form constrained to a readable column width */
#customer_login h2,
#customer_login form {
	margin: 0 auto;
	max-width: var(--account-login-form-max-width);
}

#customer_login button {
	width: 100%;
}

/* ===== LOGIN PAGE: COLUMN PADDING ===== */

#customer_login.col2-set .col-1 {
	padding: var(--space-large) var(--gutter-width);

	@media (min-width: 45em) {
		padding-bottom: var(--space-xxlarge);
		padding-top: var(--space-xlarge);
	}
	
	@media (min-width: 64em) {
		padding-left: 0;
	}
}

#customer_login.col2-set .col-2 {
	background-color: var(--account-login-register-surface);
	padding: var(--space-xlarge) var(--gutter-width) var(--space-large);

	@media (min-width: 45em) {
		padding-block: var(--space-xxlarge);
	}

	@media (min-width: 64em) {
		padding-right: 0;
		padding-top: var(--space-xlarge);
	}
}

/* ===== LOGIN PAGE: FORM CONTROLS ===== */

label.woocommerce-form-login__rememberme {
	display: inline-block;
	margin-bottom: var(--space-normal);
}

.woocommerce-LostPassword {
	text-align: center;
}

/* ===== LOGIN PAGE: LOGGED-OUT LAYOUT ===== */

.woocommerce-account.logged-out .entry-content {
	margin: 0;
	padding: 0;

	@media (min-width: 64em) {
		padding: 0 var(--gutter-width);
		position: relative;
	}
}

.woocommerce-account.logged-out .entry-content .woocommerce-notices-wrapper {
	padding: 0 var(--gutter-width);

	@media (min-width: 64em) {
		padding: 0;
	}
}

.woocommerce-account.logged-out .entry-content .woocommerce-notices-wrapper > * {
	margin: 0 auto;
	max-width: var(--max-width-wide);
}

.woocommerce-account.logged-out:not(.woocommerce-lost-password) .entry-content::after {

	@media (min-width: 64em) {
		background-color: var(--account-login-register-surface);
		bottom: 0;
		content: "";
		display: block;
		left: 50%;
		position: absolute;
		right: 0;
		top: var(--account-login-bg-bleed-top);
		z-index: -1;
	}
}

/* ===== ORDERS TABLE ===== */

/* Switch Subscription button alignment */
.shop_table.order_details .product-quantity {
	margin-right: 0.5em;
}

table.shop_table_responsive tr td.download-actions .button {
	display: block;
	text-align: center;
}

table.shop_table_responsive.my_account_orders .order-actions {
	text-align: right;
}

table.shop_table_responsive.my_account_orders .order-actions::before {
	display: none;
}