/*!
 * FIRST-Network Store - Sign in / Create account
 * Loaded only on the account page for logged-out visitors.
 */

/* the page title duplicates the column headings */
.woocommerce-account .wp-block-post-title{display:none !important}

/* ---------- two columns ---------- */
.woocommerce-account #customer_login.u-columns{
	display:grid !important;
	grid-template-columns:1fr 1fr !important;
	gap:20px !important;
	max-width:1132px !important;
	margin:0 auto 60px !important;
	padding:0 22px !important;
	align-items:stretch !important;
}
/* WooCommerce floats col-1 left and col-2 right; inside a grid those floats
   are ignored but the columns still came out reversed, so pin them */
.woocommerce-account #customer_login .u-column1{grid-column:1 !important;grid-row:1 !important}
.woocommerce-account #customer_login .u-column2{grid-column:2 !important;grid-row:1 !important}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2{
	width:100% !important;float:none !important;margin:0 !important;
	background:#fff !important;
	border:1px solid rgba(22,37,58,.11) !important;
	border-radius:20px !important;
	padding:28px 26px !important;
	box-shadow:0 22px 55px -34px rgba(16,29,46,.5) !important;
	box-sizing:border-box !important;
}

/* ---------- headings ---------- */
.woocommerce-account #customer_login h2{
	font-family:'Playfair Display',serif !important;
	font-size:1.35rem !important;font-weight:700 !important;
	color:#16253A !important;margin:0 0 4px !important;padding:0 !important;
	text-align:left !important;border:0 !important;
}
.woocommerce-account .u-column1 h2::after,
.woocommerce-account .u-column2 h2::after{
	display:block;font-family:'Plus Jakarta Sans',sans-serif;
	font-size:.88rem;font-weight:400;color:#66707D;line-height:1.5;margin-top:4px;
}
.woocommerce-account .u-column1 h2::after{content:"Welcome back \2014 pick up where you left off."}
.woocommerce-account .u-column2 h2::after{content:"It takes a minute and makes checkout faster next time."}

/* ---------- forms ---------- */
.woocommerce-account #customer_login form{
	margin:20px 0 0 !important;padding:0 !important;border:0 !important;
	background:none !important;box-shadow:none !important;
}
.woocommerce-account #customer_login .form-row{margin:0 0 16px !important;padding:0 !important}
.woocommerce-account #customer_login label{
	display:block !important;font-family:'Plus Jakarta Sans',sans-serif !important;
	font-size:.74rem !important;font-weight:800 !important;letter-spacing:.06em !important;
	text-transform:uppercase !important;color:#16253A !important;margin:0 0 6px !important;
}
.woocommerce-account #customer_login label .required{color:#7D5F1E !important;border:0 !important;text-decoration:none !important}
.woocommerce-account #customer_login input.input-text,
.woocommerce-account #customer_login input[type=text],
.woocommerce-account #customer_login input[type=email],
.woocommerce-account #customer_login input[type=password]{
	width:100% !important;border:1px solid rgba(22,37,58,.11) !important;
	border-radius:12px !important;padding:13px 15px !important;
	font:inherit !important;font-size:.92rem !important;
	background:#FBF8F1 !important;color:#1B2836 !important;
	box-shadow:none !important;box-sizing:border-box !important;
}
.woocommerce-account #customer_login input:focus{
	outline:none !important;border-color:#D2A64A !important;background:#fff !important;
	box-shadow:0 0 0 3px rgba(210,166,74,.15) !important;
}
.woocommerce-account #customer_login .show-password-input{
	border:0 !important;background:none !important;box-shadow:none !important;right:10px !important;
}

/* ---------- buttons ---------- */
.woocommerce-account #customer_login button[name=login],
.woocommerce-account #customer_login button[name=register]{
	display:flex !important;align-items:center !important;justify-content:center !important;
	width:100% !important;float:none !important;margin:6px 0 0 !important;
	padding:15px 26px !important;border:2px solid transparent !important;
	border-radius:100px !important;font-family:'Plus Jakarta Sans',sans-serif !important;
	font-weight:700 !important;font-size:.93rem !important;letter-spacing:.2px !important;
	text-transform:none !important;cursor:pointer !important;
	transition:transform .25s cubic-bezier(.2,.8,0,1), filter .2s !important;
}
.woocommerce-account #customer_login button[name=login]{
	background:#D2A64A !important;color:#101D2E !important;
	box-shadow:0 14px 30px -16px rgba(210,166,74,.9) !important;
}
.woocommerce-account #customer_login button[name=register]{background:#16253A !important;color:#F5F2EB !important}
.woocommerce-account #customer_login button[name=login]:hover,
.woocommerce-account #customer_login button[name=register]:hover{transform:translateY(-2px) !important}

/* ---------- remember me ---------- */
.woocommerce-account .woocommerce-form-login__rememberme{
	display:flex !important;align-items:center !important;gap:9px !important;
	margin:0 0 6px !important;text-transform:none !important;letter-spacing:0 !important;
	font-size:.85rem !important;font-weight:600 !important;color:#1B2836 !important;cursor:pointer;
}
.woocommerce-account .woocommerce-form-login__rememberme input{
	width:18px !important;height:18px !important;accent-color:#3F5E54;margin:0 !important;
}

/* ---------- lost password ---------- */
.woocommerce-account .woocommerce-LostPassword{
	margin:16px 0 0 !important;padding-top:16px !important;
	border-top:1px solid rgba(22,37,58,.11) !important;
	text-align:center !important;font-size:.85rem !important;
}
.woocommerce-account .woocommerce-LostPassword a{color:#7D5F1E !important;font-weight:700 !important;text-decoration:none !important}
.woocommerce-account .woocommerce-LostPassword a:hover{color:#16253A !important}

/* ---------- helper copy ---------- */
.woocommerce-account #customer_login form > p:not(.form-row),
.woocommerce-account .woocommerce-privacy-policy-text p{
	font-size:.8rem !important;color:#66707D !important;line-height:1.55 !important;margin:0 0 14px !important;
}
.woocommerce-account .woocommerce-privacy-policy-text a{color:#7D5F1E !important;font-weight:700 !important;text-decoration:none !important}

/* ---------- stack on tablet and phone ---------- */
@media(max-width:820px){
	.woocommerce-account #customer_login.u-columns{
		grid-template-columns:1fr !important;gap:24px !important;margin-bottom:40px !important;
	}
	.woocommerce-account #customer_login .u-column1{grid-column:1 !important;grid-row:1 !important}
	.woocommerce-account #customer_login .u-column2{grid-column:1 !important;grid-row:2 !important}
	.woocommerce-account #customer_login .u-column1,
	.woocommerce-account #customer_login .u-column2{padding:22px 18px !important}
}
/* ================================================================
 * Spacing corrections, measured signed-out at 1440px.
 *
 *   nav bottom            118
 *   cards top             110   <- 8px UNDER the header
 *   card height mismatch   66px (Sign in taller than Create)
 *   remember -> button      6px  (too tight against a 59px button)
 *
 * Target: cards start at 152, matching the breadcrumb baseline used
 * on shop, category, product and cart.
 * ================================================================ */
.woocommerce-account main.site-content{padding-top:126px !important}

/* equal-height cards so the pair reads as one block */
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2{
	display:flex !important;
	flex-direction:column !important;
}
.woocommerce-account #customer_login form{flex:1 1 auto !important;display:flex !important;flex-direction:column !important}

/* push the primary action to the foot of each card */
.woocommerce-account #customer_login button[name=login]{margin-top:auto !important}
.woocommerce-account #customer_login button[name=register]{margin-top:auto !important}

/* breathing room above the button */
.woocommerce-account .woocommerce-form-login__rememberme{margin:2px 0 16px !important}

/* the privacy note should not crowd the register button */
.woocommerce-account .woocommerce-privacy-policy-text p{margin:0 0 18px !important}
.woocommerce-account #customer_login form > p:not(.form-row){margin:0 0 12px !important}

/* lost password sits closer to the button it belongs with */
.woocommerce-account .woocommerce-LostPassword{margin:18px 0 0 !important;padding-top:16px !important}

@media(max-width:820px){
	.woocommerce-account main.site-content{padding-top:128px !important}
	.woocommerce-account #customer_login .u-column1,
	.woocommerce-account #customer_login .u-column2{display:block !important}
	.woocommerce-account #customer_login form{display:block !important}
	.woocommerce-account #customer_login button[name=login],
	.woocommerce-account #customer_login button[name=register]{margin-top:6px !important}
}
/* ----------------------------------------------------------------
 * The field-label rule above uses an ID (#customer_login label), so it
 * outranks any plain-class rule for the remember-me row - which is also
 * a <label>. It was forcing display:block and the uppercase micro-caps
 * meant for field labels, and holding the gap at 6px.
 * Matching the ID plus the class to win cleanly.
 * ---------------------------------------------------------------- */
.woocommerce-account #customer_login label.woocommerce-form-login__rememberme{
	display:flex !important;
	align-items:center !important;
	gap:10px !important;
	margin:4px 0 18px !important;
	font-family:'Plus Jakarta Sans',sans-serif !important;
	font-size:.85rem !important;
	font-weight:600 !important;
	letter-spacing:0 !important;
	text-transform:none !important;
	color:#1B2836 !important;
	cursor:pointer !important;
}
.woocommerce-account #customer_login label.woocommerce-form-login__rememberme input{
	width:18px !important;height:18px !important;
	accent-color:#3F5E54;margin:0 !important;flex:none !important;
}
.woocommerce-account #customer_login label.woocommerce-form-login__rememberme span{
	text-transform:none !important;letter-spacing:0 !important;
	font-size:.85rem !important;font-weight:600 !important;
}
/* =================================================================
 * Solo auth cards - lost password / reset password
 * These pages have no #customer_login wrapper, so they get their own
 * scope. Values mirror the sign-in card exactly.
 * ================================================================= */
.woocommerce-account .fn-auth-solo{
	max-width:1132px !important;
	margin:0 auto 60px !important;
	padding:0 22px !important;
	box-sizing:border-box !important;
}
.woocommerce-account .fn-auth-card{
	max-width:520px !important;
	margin:0 auto !important;
	background:#fff !important;
	border:1px solid rgba(22,37,58,.11) !important;
	border-radius:20px !important;
	padding:28px 26px !important;
	box-shadow:0 22px 55px -34px rgba(16,29,46,.5) !important;
	box-sizing:border-box !important;
}
.woocommerce-account .fn-auth-title{
	font-family:'Playfair Display',serif !important;
	font-size:1.35rem !important;font-weight:700 !important;
	color:#16253A !important;margin:0 0 4px !important;padding:0 !important;
	text-align:left !important;border:0 !important;line-height:1.25 !important;
}
.woocommerce-account .fn-auth-sub{
	font-family:'Plus Jakarta Sans',sans-serif !important;
	font-size:.88rem !important;font-weight:400 !important;color:#66707D !important;
	line-height:1.5 !important;margin:0 !important;padding:0 !important;
}
.woocommerce-account .fn-auth-form{
	margin:20px 0 0 !important;padding:0 !important;border:0 !important;
	background:none !important;box-shadow:none !important;
}
.woocommerce-account .fn-auth-form .form-row{
	margin:0 0 16px !important;padding:0 !important;width:100% !important;float:none !important;
}
.woocommerce-account .fn-auth-form label{
	display:block !important;font-family:'Plus Jakarta Sans',sans-serif !important;
	font-size:.74rem !important;font-weight:800 !important;letter-spacing:.06em !important;
	text-transform:uppercase !important;color:#16253A !important;margin:0 0 6px !important;
}
.woocommerce-account .fn-auth-form label .required{
	color:#7D5F1E !important;border:0 !important;text-decoration:none !important;margin-left:3px !important;
}
.woocommerce-account .fn-auth-form input.input-text,
.woocommerce-account .fn-auth-form input[type=text],
.woocommerce-account .fn-auth-form input[type=password]{
	width:100% !important;border:1px solid rgba(22,37,58,.11) !important;
	border-radius:12px !important;padding:13px 15px !important;
	font:inherit !important;font-size:.92rem !important;
	background:#FBF8F1 !important;color:#1B2836 !important;
	box-shadow:none !important;box-sizing:border-box !important;
}
.woocommerce-account .fn-auth-form input:focus{
	outline:none !important;border-color:#D2A64A !important;background:#fff !important;
	box-shadow:0 0 0 3px rgba(210,166,74,.15) !important;
}
.woocommerce-account .fn-auth-form .show-password-input{
	border:0 !important;background:none !important;box-shadow:none !important;right:10px !important;
}
.woocommerce-account .fn-auth-form .fn-auth-actions{margin:4px 0 0 !important}
.woocommerce-account .fn-auth-form button.fn-auth-btn{
	display:flex !important;align-items:center !important;justify-content:center !important;
	width:100% !important;float:none !important;margin:0 !important;
	padding:15px 26px !important;border:2px solid transparent !important;
	border-radius:100px !important;font-family:'Plus Jakarta Sans',sans-serif !important;
	font-weight:700 !important;font-size:.93rem !important;letter-spacing:.01em !important;
	background:#C9A24D !important;color:#16253A !important;
	text-transform:none !important;cursor:pointer !important;
	box-shadow:none !important;line-height:1.2 !important;
	transition:background .18s ease,transform .18s ease !important;
}
.woocommerce-account .fn-auth-form button.fn-auth-btn:hover{
	background:#B8912F !important;transform:translateY(-1px) !important;
}
.woocommerce-account .fn-auth-back{
	margin:16px 0 0 !important;padding:16px 0 0 !important;
	border-top:1px solid rgba(22,37,58,.09) !important;
	text-align:center !important;
}
.woocommerce-account .fn-auth-back a{
	font-family:'Plus Jakarta Sans',sans-serif !important;
	font-size:.85rem !important;font-weight:700 !important;
	color:#7D5F1E !important;text-decoration:none !important;
}
.woocommerce-account .fn-auth-back a:hover{text-decoration:underline !important}

@media(max-width:820px){
	.woocommerce-account .fn-auth-card{max-width:none !important;padding:24px 20px !important}
}