/* wg-account.css · My Account login (logged out) and lost/reset password forms — site-wide, rules scoped to .wg-login
   and .woocommerce-ResetPassword. Site-wide for the same Barba reason as wg-products.
   Follows /contact/: Quanta heading with an accent second line, Sandstone form card, underline inputs, orange required
   stars and chip links with an arrow. The button is a pill with a round icon that turns orange on hover, like the
   /products/ buttons. Zeyna's dark mode (body.layout--switched) gets a #191919 card and Gold accents, as the header
   does. Markup: woocommerce/myaccount/form-login.php in this theme. 2026-10-26 */

.wg-login,
.woocommerce-ResetPassword {
	--wga-accent: #FC4521;
	--wga-hover: var(--wg-header-orange, #FC3D19);
	--wga-on-accent: #FFFFFF;
	--wga-ink: #191919;
	--wga-body: #3A3A3A;
	--wga-muted: #6E645F;
	--wga-card: #E8DFD0;
	--wga-line: rgba(25, 25, 25, .18);
	--wga-line-strong: rgba(25, 25, 25, .45);
	--wga-chip: #FFFFFF;
	--wga-chip-ink: #21201C;
	--wga-chip-ring: transparent;
	--wga-chip-support: #FFDFD9;
	--wga-btn: #191919;
	--wga-btn-ink: #FFFFFF;
	--wga-btn-hover: var(--wg-header-orange, #FC3D19);
	--wga-btn-hover-ink: #FFFFFF;
	--wga-icon: #FC4521;
	--wga-icon-ink: #FFFFFF;
	--wga-icon-hover: #FFFFFF;
	--wga-icon-hover-ink: var(--wg-header-orange, #FC3D19);
	--wga-glow: rgba(252, 61, 25, .28);
	--wga-error-bg: #FFDFD9;
	--wga-error-ink: #9A2410;
	--wga-ok-bg: rgba(10, 135, 84, .12);
	--wga-ok-ink: #0A6B43;
}

body.layout--switched .wg-login,
body.layout--switched .woocommerce-ResetPassword {
	--wga-accent: #F1C36D;
	--wga-hover: #F1C36D;
	--wga-on-accent: #191919;
	--wga-ink: #F1F1F1;
	--wga-body: rgba(241, 241, 241, .72);
	--wga-muted: #B5A898;
	--wga-card: #191919;
	--wga-line: rgba(241, 241, 241, .16);
	--wga-line-strong: rgba(241, 241, 241, .4);
	--wga-chip: #191919;
	--wga-chip-ink: #F1F1F1;
	--wga-chip-ring: rgba(241, 241, 241, .16);
	--wga-chip-support: rgba(252, 69, 33, .16);
	--wga-btn: #F1C36D;
	--wga-btn-ink: #191919;
	--wga-btn-hover: #FFF0D9;
	--wga-btn-hover-ink: #191919;
	--wga-icon: #191919;
	--wga-icon-ink: #F1C36D;
	--wga-icon-hover: #191919;
	--wga-icon-hover-ink: #F1C36D;
	--wga-glow: rgba(241, 195, 109, .22);
	--wga-error-bg: rgba(220, 38, 38, .16);
	--wga-error-ink: #FFB7A9;
	--wga-ok-bg: rgba(10, 135, 84, .2);
	--wga-ok-ink: #8FD9B6;
}

/* ── Login page layout: heading + help on the left, form card on the right; stacked below 1025px ── */
.wg-login {
	padding: clamp(40px, 8vh, 96px) 0 clamp(64px, 10vh, 120px);
	font-family: 'DM Sans', sans-serif;
	color: var(--wga-ink);
}

.wg-login *,
.wg-login *::before,
.wg-login *::after {
	box-sizing: border-box;
}

.wg-login__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	grid-template-areas: "head card" "help card";
	column-gap: clamp(48px, 7vw, 120px);
	row-gap: 48px;
	max-width: 1180px;
	margin: 0 auto;
}

.wg-login__head { grid-area: head; align-self: end; }
.wg-login__card { grid-area: card; align-self: center; }
.wg-login__help {
	grid-area: help;
	align-self: start;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

/* Heading block (type from the /contact/ hero) */
.wg-login .wg-login__eyebrow {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wga-muted);
}

.wg-login h1.wg-login__title {
	margin: 0 0 24px;
	font-family: 'QuantaGroteskPro-Medium-BF6459a54ca605a', 'DM Sans', sans-serif;
	font-size: clamp(40px, 4.4vw, 64px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--wga-ink);
}

.wg-login h1.wg-login__title span { color: var(--wga-accent); }

.wg-login .wg-login__lede {
	max-width: 28ch;
	margin: 0;
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.45;
	color: var(--wga-body);
}

/* Help blocks and chip links (as "Business support" on /contact/) */
.wg-login .wg-login__help-title {
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 19.6px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wga-ink);
}

.wg-login .wg-login__help-text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wga-body);
}

.wg-login .wg-login__chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	border-radius: 5px;
	background: var(--wga-chip);
	box-shadow: inset 0 0 0 1px var(--wga-chip-ring);
	font-size: 14px;
	line-height: 18px;
	color: var(--wga-chip-ink);
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.wg-login .wg-login__chip--support { background: var(--wga-chip-support); }

.wg-login .wg-login__chip svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform .3s ease;
}

.wg-login .wg-login__chip:hover,
.wg-login .wg-login__chip:focus-visible {
	background: var(--wga-hover);
	box-shadow: none;
	color: var(--wga-on-accent);
}

.wg-login .wg-login__chip:hover svg,
.wg-login .wg-login__chip:focus-visible svg { transform: translateX(3px); }

/* Form card (the /contact/ form card) */
.wg-login .wg-login__card {
	padding: clamp(28px, 3vw, 40px);
	border-radius: 10px;
	background: var(--wga-card);
}

.wg-login h2.wg-login__card-title {
	margin: 0 0 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wga-ink);
}

.wg-login .wg-login__card-sub {
	margin: 0 0 32px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wga-body);
}

/* ── Fields: login card and the lost/reset password forms ── */
.wg-login .wg-login__form .form-row,
.woocommerce-account form.woocommerce-ResetPassword .form-row {
	position: relative;
	float: none;
	width: 100%;
	margin: 0 0 24px;
	padding: 0;
}

.wg-login .wg-login__form label,
.woocommerce-account form.woocommerce-ResetPassword .form-row label {
	position: static;
	display: block;
	margin: 0 0 4px;
	transform: none;
	font-size: 14px;
	line-height: 19.6px;
	font-weight: 400;
	text-transform: none;
	white-space: normal;
	color: var(--wga-ink);
}

.wg-login .wg-login__form .form-row .required,
.woocommerce-account form.woocommerce-ResetPassword .form-row .required {
	border: 0;
	font-size: 10.5px;
	vertical-align: top;
	text-decoration: none;
	color: var(--wga-accent);
}

.wg-login .wg-login__form input.input-text,
.woocommerce-account form.woocommerce-ResetPassword input.input-text {
	display: block;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 10px 0 12px;
	border: 0;
	border-bottom: 1px solid var(--wga-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wga-ink);
	transition: border-color .25s ease, box-shadow .25s ease;
}

.wg-login .wg-login__form input.input-text::placeholder,
.woocommerce-account form.woocommerce-ResetPassword input.input-text::placeholder {
	color: var(--wga-muted);
	opacity: 1;
}

.wg-login .wg-login__form input.input-text:hover,
.woocommerce-account form.woocommerce-ResetPassword input.input-text:hover { border-bottom-color: var(--wga-line-strong); }

.wg-login .wg-login__form input.input-text:focus,
.woocommerce-account form.woocommerce-ResetPassword input.input-text:focus {
	border-bottom-color: var(--wga-accent);
	box-shadow: 0 1px 0 0 var(--wga-accent);
}

.wg-login .wg-login__form input.input-text:-webkit-autofill,
.woocommerce-account form.woocommerce-ResetPassword input.input-text:-webkit-autofill {
	-webkit-text-fill-color: var(--wga-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--wga-card) inset;
	caret-color: var(--wga-ink);
}

/* WooCommerce's show-password button (its script adds it on a full page load) */
.wg-login .wg-login__form .password-input,
.woocommerce-account form.woocommerce-ResetPassword .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.wg-login .wg-login__form .password-input input.input-text,
.woocommerce-account form.woocommerce-ResetPassword .password-input input.input-text { padding-right: 40px; }

.wg-login .wg-login__form .show-password-input,
.woocommerce-account form.woocommerce-ResetPassword .show-password-input {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	margin: 0;
	padding: 6px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wga-ink);
	opacity: .7;
	cursor: pointer;
	transition: opacity .25s ease;
}

.wg-login .wg-login__form .show-password-input:hover,
.woocommerce-account form.woocommerce-ResetPassword .show-password-input:hover { opacity: 1; }

body.layout--switched .wg-login .show-password-input::before,
body.layout--switched .woocommerce-ResetPassword .show-password-input::before { filter: invert(1); }

/* Remember me + forgot password row */
.wg-login .wg-login__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 4px 0 32px;
}

.wg-login .wg-login__form label.wg-login__remember {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	color: var(--wga-body);
	cursor: pointer;
}

.wg-login .wg-login__remember input[type="checkbox"] {
	position: static;
	display: grid;
	place-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wga-line-strong);
	border-radius: 4px;
	background: transparent;
	clip: auto;
	clip-path: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.wg-login .wg-login__remember input[type="checkbox"]::before,
.wg-login .wg-login__remember input[type="checkbox"]::after { display: none; }

.wg-login .wg-login__remember input[type="checkbox"]:checked {
	border: 1px solid var(--wga-accent);
	background: var(--wga-accent) no-repeat center / 12px 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.2 4.6 9.2 10.5 2.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.layout--switched .wg-login .wg-login__remember input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.2 4.6 9.2 10.5 2.8' fill='none' stroke='%23191919' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wg-login .wg-login__remember input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wga-accent);
	outline-offset: 2px;
}

.wg-login .wg-login__lost {
	font-size: 14px;
	color: var(--wga-ink);
	text-decoration: underline;
	text-decoration-color: var(--wga-line-strong);
	text-underline-offset: 4px;
	transition: color .25s ease, text-decoration-color .25s ease;
}

.wg-login .wg-login__lost:hover,
.wg-login .wg-login__lost:focus-visible {
	color: var(--wga-hover);
	text-decoration-color: currentColor;
}

/* ── Buttons: pill with a round icon, orange on hover (the /products/ buttons) ── */
.wg-login .wg-login__form button.wg-login__submit,
.woocommerce-account form.woocommerce-ResetPassword button.button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	margin: 0;
	padding: 5px 28px 5px 5px;
	border: 0;
	border-radius: 50px;
	background: var(--wga-btn);
	box-shadow: none;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	color: var(--wga-btn-ink);
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.woocommerce-account form.woocommerce-ResetPassword button.button { padding: 5px 28px; }

.wg-login .wg-login__submit-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wga-icon);
	transition: background-color .3s ease;
}

.wg-login .wg-login__submit-icon svg {
	width: 20px;
	height: 20px;
	fill: var(--wga-icon-ink);
	transition: fill .3s ease, transform .3s ease;
}

.wg-login .wg-login__form button.wg-login__submit:hover,
.wg-login .wg-login__form button.wg-login__submit:focus-visible,
.woocommerce-account form.woocommerce-ResetPassword button.button:hover,
.woocommerce-account form.woocommerce-ResetPassword button.button:focus-visible {
	background: var(--wga-btn-hover);
	box-shadow: 0 6px 16px var(--wga-glow);
	color: var(--wga-btn-hover-ink);
	transform: translateY(-2px);
}

.wg-login .wg-login__submit:hover .wg-login__submit-icon,
.wg-login .wg-login__submit:focus-visible .wg-login__submit-icon { background: var(--wga-icon-hover); }

.wg-login .wg-login__submit:hover .wg-login__submit-icon svg,
.wg-login .wg-login__submit:focus-visible .wg-login__submit-icon svg {
	fill: var(--wga-icon-hover-ink);
	transform: translateX(2px);
}

.wg-login .wg-login__form button.wg-login__submit:focus-visible,
.woocommerce-account form.woocommerce-ResetPassword button.button:focus-visible {
	outline: 2px solid var(--wga-accent);
	outline-offset: 3px;
}

/* ── Notices (wrong password, password reset done): inline in the card. Zeyna's woo-styles.css makes every notice
   a fixed toast at the bottom of the screen with !important position, colours and border, so those are undone here. ── */
.wg-login .wg-login__card .woocommerce-notices-wrapper {
	position: static;
	left: auto;
	bottom: auto;
	width: auto;
	z-index: auto;
}

.wg-login .woocommerce-notices-wrapper:empty { display: none; }

.wg-login .wg-login__card .woocommerce-error,
.wg-login .wg-login__card .woocommerce-message,
.wg-login .wg-login__card .woocommerce-info {
	position: static !important;
	left: auto !important;
	bottom: auto !important;
	z-index: auto !important;
	max-width: none !important;
	transform: none !important;
	margin: 0 0 24px;
	padding: 12px 16px;
	border: 0 !important;
	border-radius: 8px;
	background: var(--wga-error-bg) !important;
	list-style: none;
	white-space: normal;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wga-error-ink) !important;
}

.wg-login .wg-login__card .woocommerce-message,
.wg-login .wg-login__card .woocommerce-info {
	background: var(--wga-ok-bg) !important;
	color: var(--wga-ok-ink) !important;
}

.wg-login .woocommerce-error::before,
.wg-login .woocommerce-message::before,
.wg-login .woocommerce-info::before { display: none; }

.wg-login .woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wg-login .woocommerce-error a,
.wg-login .woocommerce-message a,
.wg-login .woocommerce-info a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Lost/reset password forms: the same card, centred ── */
.woocommerce-account form.woocommerce-ResetPassword {
	max-width: 560px;
	margin: clamp(40px, 8vh, 96px) auto clamp(64px, 10vh, 120px);
	padding: clamp(28px, 3vw, 40px);
	border-radius: 10px;
	background: var(--wga-card);
	font-family: 'DM Sans', sans-serif;
	color: var(--wga-ink);
}

.woocommerce-account form.woocommerce-ResetPassword > p:first-of-type {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wga-body);
}

.woocommerce-account form.woocommerce-ResetPassword .clear { display: none; }

.woocommerce-account form.woocommerce-ResetPassword .form-row:last-of-type { margin-bottom: 0; }

/* ── Narrower screens ── */
@media (max-width: 1024px) {
	.wg-login__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "card" "help";
		row-gap: 40px;
		max-width: 600px;
	}

	.wg-login__head { align-self: start; }
}

@media (max-width: 560px) {
	.wg-login__help {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.wg-login .wg-login__card { padding: 28px 20px; }

	.wg-login h2.wg-login__card-title { font-size: 22px; }

	.wg-login .wg-login__form button.wg-login__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.wg-login *,
	.woocommerce-account form.woocommerce-ResetPassword * { transition: none !important; }

	.wg-login .wg-login__form button.wg-login__submit:hover,
	.woocommerce-account form.woocommerce-ResetPassword button.button:hover { transform: none; }
}