/*
 * Natural Archive customer account experience.
 *
 * This file is enqueued only on WooCommerce's My Account page. It augments
 * the untouched WooCommerce templates through the plugin's narrow body
 * classes, so other account, checkout, and store forms are unaffected.
 */

.na-account-experience .woocommerce {
	max-width: 1180px;
}

.na-account-entry__intro {
	width: min(100%, 490px);
	margin: 0 auto 42px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line, #d9d3ca);
}

.na-account-entry__eyebrow {
	margin: 0 0 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #6c6670;
}

.na-account-entry__intro h1,
.na-account-dashboard__intro h2 {
	margin: 0;
	font-size: clamp(36px, 4.3vw, 62px);
	font-weight: 600;
	letter-spacing: -0.06em;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--ink, #211e1c);
}

.na-account-entry__intro > p:last-child,
.na-account-dashboard__intro > p:last-child {
	max-width: 390px;
	margin: 17px 0 0;
	font-size: 14px;
	line-height: 1.65;
	color: #655f5a;
}

/* The native WooCommerce form markup remains in place; the body class picks
 * which of its two columns the customer is currently meant to see. */
.na-account-entry-login .woocommerce #customer_login,
.na-account-entry-create .woocommerce #customer_login {
	width: min(100%, 490px);
	margin: 0 auto;
}

/* WooCommerce 9+ renders the same forms as direct children rather than inside
 * #customer_login. Keep the selectors above for older stores and these ones
 * for current WooCommerce without taking over its template. */
.na-account-entry-login .woocommerce > .woocommerce-notices-wrapper,
.na-account-entry-create .woocommerce > .woocommerce-notices-wrapper,
.na-account-entry-login .woocommerce > form.woocommerce-form-login,
.na-account-entry-create .woocommerce > form.woocommerce-form-register {
	width: min(100%, 490px);
	margin-right: auto;
	margin-left: auto;
}

.na-account-entry-login .woocommerce > h2,
.na-account-entry-create .woocommerce > h2 {
	display: none;
}

.na-account-entry-login .woocommerce > form.woocommerce-form-register,
.na-account-entry-create .woocommerce > form.woocommerce-form-login {
	display: none !important;
}

.na-account-entry-login .woocommerce #customer_login .u-column1,
.na-account-entry-login .woocommerce #customer_login .u-column2,
.na-account-entry-create .woocommerce #customer_login .u-column1,
.na-account-entry-create .woocommerce #customer_login .u-column2 {
	float: none;
	width: 100%;
}

.na-account-entry-login .woocommerce #customer_login .u-column2,
.na-account-entry-create .woocommerce #customer_login .u-column1 {
	display: none !important;
}

.na-account-entry-login .woocommerce #customer_login .u-column1 > h2,
.na-account-entry-create .woocommerce #customer_login .u-column2 > h2 {
	display: none;
}

.na-account-entry-login .woocommerce form.login,
.na-account-entry-create .woocommerce form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.na-account-entry-login .woocommerce form.login .form-row,
.na-account-entry-create .woocommerce form.register .form-row {
	margin-bottom: 19px;
}

.na-account-entry-login .woocommerce .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	margin: 0 16px 0 0;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4e4844;
}

.na-account-entry-login .woocommerce .woocommerce-form-login__rememberme input {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--ink, #211e1c);
}

.na-account-entry-login .woocommerce .lost_password {
	margin: 18px 0 0;
	font-size: 12px;
	line-height: 1.4;
}

.na-account-entry-login .woocommerce .lost_password a,
.na-account-entry__switch a {
	border-bottom: 1px solid currentColor;
	font-weight: 600;
	text-decoration: none;
}

.na-account-entry__switch {
	margin: 27px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--line, #d9d3ca);
	font-size: 12px;
	line-height: 1.5;
	color: #625d58;
}

/* WooCommerce renders two generic dashboard paragraphs before its action. The
 * card below replaces that generic introduction only on the dashboard view. */
.na-account-dashboard .woocommerce-MyAccount-content > p:not(.woocommerce-info):not(.woocommerce-error):not(.woocommerce-message) {
	display: none;
}

.na-account-dashboard__panel {
	border-top: 1px solid var(--ink, #211e1c);
}

.na-account-dashboard__intro {
	padding: 25px 0 31px;
}

.na-account-dashboard__intro h2 {
	font-size: clamp(32px, 3.4vw, 50px);
}

.na-account-dashboard__status {
	min-height: 164px;
	padding: 25px 28px;
	border: 1px solid #e2ddd6;
	background: #f5f2ee;
}

.na-account-dashboard__label {
	margin: 0 0 11px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #69625d;
}

.na-account-dashboard__status h3,
.na-account-dashboard__order-link {
	display: inline-block;
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.1;
	color: var(--ink, #211e1c);
}

.na-account-dashboard__status > p:last-child {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #655f5a;
}

.na-account-dashboard__shop-link {
	display: inline-flex;
	align-items: center;
	min-height: 39px;
	margin-top: 18px;
	padding: 0 16px;
	background: var(--ink, #211e1c);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-decoration: none;
	text-transform: uppercase;
}

.na-account-dashboard__shop-link:hover,
.na-account-dashboard__shop-link:focus {
	color: #fff;
	background: #4e4844;
}

.na-account-dashboard__links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 27px;
	border: 1px solid #e2ddd6;
	background: #e2ddd6;
}

.na-account-dashboard__links a {
	display: flex;
	min-height: 111px;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	background: #fff;
	color: var(--ink, #211e1c);
	text-decoration: none;
}

.na-account-dashboard__links a:hover,
.na-account-dashboard__links a:focus {
	background: #faf8f5;
}

.na-account-dashboard__links span {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.na-account-dashboard__links small {
	font-size: 11px;
	line-height: 1.35;
	color: #726b65;
}

@media (max-width: 767px) {
	.na-account-entry__intro {
		margin-bottom: 32px;
	}

	.na-account-entry__intro h1,
	.na-account-dashboard__intro h2 {
		font-size: clamp(34px, 12vw, 48px);
	}

	.na-account-dashboard__status {
		padding: 22px;
	}

	.na-account-dashboard__links {
		grid-template-columns: 1fr;
	}

	.na-account-dashboard__links a {
		min-height: 90px;
	}
}