/* ============================================================
   GREEN BADGER — MEMBER (My Account, signed-out: login / register)
   Design-locked approved prototype (2026-08-23). Split visual/auth layout,
   text tabs with a gold hairline underline, hairline inputs, sharp filled
   CTA. Consumes the same ratified tokens as SHOP/GUIDE (--dm-*, --gb-font-*)
   from sections.css. Green Badger scope only. Wraps WooCommerce's real
   myaccount/form-login.php markup — no field, nonce or handler here.
   ============================================================ */

body.dm-gb-member {
	--gb-mem-ease: cubic-bezier(.37, 0, .63, 1);
	background: var(--dm-bg, #0a0a0a);
	color: var(--dm-text, #f4f1e8);
}

/* -------------------------------------------------- 1. Astra neutralization */

body.dm-gb-member .site-content,
body.dm-gb-member #content,
body.dm-gb-member .content-area,
body.dm-gb-member main.site-main {
	background: var(--dm-bg, #0a0a0a);
}
body.dm-gb-member .site-content > .ast-container {
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
body.dm-gb-member #primary {
	width: 100%;
	margin: 0;
	margin-top: 0 !important;
	padding: 0;
	border: 0;
}
/* site-shell.css's `body.dm-site-shell-enabled.woocommerce #primary` (higher
   specificity: element+2 classes+id) pins #primary to --dm-shell-container
   (~1600px) on every Woo page; this member screen needs the full viewport,
   so win that fight with a width !important, same discipline as the
   margin-top !important above. */
body.dm-gb-member.woocommerce #primary,
body.dm-gb-member.woocommerce-page #primary {
	width: 100% !important;
	margin-inline: 0 !important;
	max-width: none !important;
}
body.dm-gb-member #secondary { display: none; }
body.dm-gb-member .entry-title,
body.dm-gb-member .page-title { display: none !important; }

/* The my-account page prints WooCommerce's own breadcrumb/notice wrappers;
   let the panel own its own edges instead of Astra's default article padding. */
body.dm-gb-member .woocommerce {
	margin: 0;
	padding: 0;
}
/* Astra's global block-content-width rule
   (`.entry-content[data-ast-blocks-layout] > *`) caps this div's direct
   children — including the WooCommerce account wrapper — at
   --wp--custom--ast-content-width-size (~1200px). Scoped override only;
   the theme setting itself is untouched, and every other page still gets it. */
body.dm-gb-member .entry-content > .woocommerce {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* -------------------------------------------------------------- 2. layout */

.gb-member-page {
	display: grid;
	grid-template-columns: minmax(440px, 41%) 1fr;
	min-height: calc(100vh - var(--dm-header-height, 92px));
}

.gb-member-visual {
	position: relative;
	min-height: calc(100vh - var(--dm-header-height, 92px));
	overflow: hidden;
	border-right: 1px solid rgba(184, 154, 91, .35);
	background: var(--dm-bg, #0a0a0a);
}

.gb-member-visual__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 62%;
	display: block;
}

.gb-member-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(7, 7, 6, .94) 0%, rgba(7, 7, 6, .78) 34%, rgba(7, 7, 6, .32) 58%, rgba(7, 7, 6, .05) 78%, transparent 92%);
}

.gb-member-visual__copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8%;
	z-index: 1;
	padding: 0 clamp(28px, 4vw, 52px);
}

.gb-member-visual__eyebrow {
	margin: 0 0 14px;
	color: var(--dm-primary, #b89a5b);
	font-family: var(--gb-font-ja, "Noto Sans JP", sans-serif);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .24em;
}

.gb-member-visual__title {
	margin: 0 0 18px;
	color: var(--dm-text, #f4f1e8);
	font-family: var(--gb-font-en, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(38px, 4.4vw, 60px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.01em;
}

.gb-member-visual__desc {
	max-width: 30em;
	margin: 0;
	color: rgba(244, 241, 232, .68);
	font-family: var(--gb-font-ja, "Noto Sans JP", sans-serif);
	font-size: 13px;
	line-height: 1.9;
}

.gb-member-auth {
	min-height: calc(100vh - var(--dm-header-height, 92px));
	display: grid;
	place-items: center;
	padding: clamp(48px, 7vw, 110px) clamp(24px, 5vw, 64px);
}

.gb-member-auth__inner { width: min(620px, 100%); }

/* --------------------------------------------------------------- 3. tabs */

.gb-member-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--dm-border, rgba(240, 234, 220, .14));
	margin: 0 0 64px;
}

.gb-member-tab {
	position: relative;
	border: 0;
	background: none;
	padding: 0 0 18px;
	color: rgba(244, 241, 232, .5);
	font-family: var(--gb-font-en, "Cormorant Garamond", Georgia, serif);
	font-size: 16px;
	font-weight: 500 !important;
	letter-spacing: .22em !important;
	cursor: pointer;
	transition: color 420ms var(--gb-mem-ease);
	-webkit-tap-highlight-color: transparent;
}
.gb-member-tab::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1px;
	background: var(--dm-primary, #b89a5b);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 560ms var(--gb-mem-ease);
}
.gb-member-tab.is-active { color: var(--dm-primary, #b89a5b); }
.gb-member-tab.is-active::after { transform: scaleX(1); }

/* Plain <button> UA default (background/tap-highlight) otherwise flashes
   through on tap/focus/active during the color transition above — same
   blue-leak class of bug as 5b's link fix, but on the browser's own button
   chrome rather than a theme color. Covered on every interactive state so
   no unstyled default ever paints behind the label. */
.gb-member-tab,
.gb-member-tab:hover,
.gb-member-tab:focus,
.gb-member-tab:active,
.gb-member-tab:focus-visible {
	background: transparent !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* ---------------------------------------------------------- 4. the stage */

.gb-member-stage { position: relative; }

/* When registration is enabled Woo wraps both forms in #customer_login and this
   stage overlays them; with registration off there is no wrapper and the login
   form is the stage's only, static child — the rules below only matter when
   .u-column2 exists (green-badger-member.js hides the REGISTER tab otherwise). */
.gb-member-stage #customer_login.u-columns {
	display: block;
	width: 100%;
}

.gb-member-stage .u-column1,
.gb-member-stage .u-column2 {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gb-member-stage #customer_login.u-columns .u-column1,
.gb-member-stage #customer_login.u-columns .u-column2 {
	position: absolute;
	inset: 0 0 auto 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(5px);
	transition: opacity 380ms var(--gb-mem-ease), transform 560ms var(--gb-mem-ease);
}
.gb-member-stage #customer_login.u-columns .u-column1.is-active,
.gb-member-stage #customer_login.u-columns .u-column2.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.gb-member-stage h2 { display: none; }

/* Astra/global-styles give WooCommerce's bare <form> a default card border +
   padding; the approved design has no card background behind the form. */
.gb-member-stage form.woocommerce-form-login,
.gb-member-stage form.woocommerce-form-register {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------- 5. fields */

.gb-member-stage .woocommerce-form-row,
.gb-member-stage .form-row {
	margin: 0 0 42px !important;
	padding: 0 !important;
}

.gb-member-stage label {
	display: block;
	margin: 0 0 13px;
	color: var(--dm-text, #f4f1e8);
	font-family: var(--gb-font-ja, "Noto Sans JP", sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
}
.gb-member-stage .required { color: rgba(184, 154, 91, .7) !important; }

.gb-member-stage input[type="text"],
.gb-member-stage input[type="email"],
.gb-member-stage input[type="password"],
.gb-member-stage .input-text {
	width: 100% !important;
	border: 0 !important;
	border-bottom: 1px solid var(--dm-border, rgba(240, 234, 220, .25)) !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	color: var(--dm-text, #f4f1e8) !important;
	padding: 13px 0 16px !important;
	font-family: var(--gb-font-ja, "Noto Sans JP", sans-serif);
	font-size: 16px !important;
	box-shadow: none !important;
	transition: border-color 480ms var(--gb-mem-ease);
}
.gb-member-stage input::placeholder { color: rgba(244, 241, 232, .3) !important; }
.gb-member-stage input:focus {
	border-bottom-color: var(--dm-primary, #b89a5b) !important;
	box-shadow: none !important;
}

.gb-member-stage .password-input,
.gb-member-stage span.password-input { display: block; width: 100%; position: relative; }
.gb-member-stage .show-password-input {
	color: var(--dm-primary, #b89a5b) !important;
	opacity: 1 !important;
}

.gb-member-stage .woocommerce-form-login__rememberme,
.gb-member-stage .woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	color: rgba(244, 241, 232, .6) !important;
	font-family: var(--gb-font-ja, "Noto Sans JP", sans-serif);
	font-size: 12px;
	white-space: nowrap;
}
.gb-member-stage input[type="checkbox"] {
	appearance: none;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	border: 1px solid var(--dm-border, rgba(240, 234, 220, .3)) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.gb-member-stage input[type="checkbox"]:checked {
	border-color: var(--dm-primary, #b89a5b) !important;
	background: var(--dm-primary, #b89a5b) !important;
}

.gb-member-stage .woocommerce-form-login__rememberme {
	display: inline-flex !important;
	margin: -6px 0 44px !important;
}

.gb-member-stage .woocommerce-LostPassword,
.gb-member-stage .lost_password {
	margin: -34px 0 44px !important;
	text-align: right;
}
.gb-member-stage .woocommerce-LostPassword a,
.gb-member-stage .lost_password a {
	color: var(--dm-primary, #b89a5b) !important;
	font-family: var(--gb-font-en, "Cormorant Garamond", Georgia, serif);
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px solid rgba(184, 154, 91, .55);
}

/* The login form lays rememberme + submit inside the same <p>; the button is
   forced onto its own full-width line below the checkbox via flex-wrap rather
   than reordering Woo's markup. The lost-password paragraph that follows is
   repositioned above it via negative margin. */
.gb-member-stage form.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 20px;
	row-gap: 20px;
	margin: -6px 0 44px !important;
}
.gb-member-stage form.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) button {
	flex: 1 1 100%;
	order: 2;
}
.gb-member-stage form.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) .woocommerce-LostPassword {
	margin: 0 !important;
}

.gb-member-stage button.woocommerce-button,
.gb-member-stage .woocommerce-form-login__submit,
.gb-member-stage .woocommerce-form-register__submit {
	width: 100% !important;
	min-height: 60px;
	border: 1px solid var(--dm-primary, #b89a5b) !important;
	border-radius: 0 !important;
	background: var(--dm-primary, #b89a5b) !important;
	color: var(--dm-on-primary, #10110f) !important;
	font-family: var(--gb-font-en, "Cormorant Garamond", Georgia, serif);
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: .2em;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 480ms var(--gb-mem-ease), color 480ms var(--gb-mem-ease);
}
.gb-member-stage button.woocommerce-button:hover {
	background: transparent !important;
	color: var(--dm-text, #f4f1e8) !important;
}

.gb-member-stage .woocommerce-privacy-policy-text,
.gb-member-stage .woocommerce-privacy-policy-text p {
	color: rgba(244, 241, 232, .5) !important;
	font-size: 12px;
	line-height: 1.7;
	margin: 0 0 32px !important;
}

/* -------------------------------------------------------- 5a. idle sweep */

/* A restrained gold sweep along the underline of an untouched field —
   after ~1s idle, a single low-opacity pass every 5.2s, well under a
   second of actual motion. Stops the instant the field is focused or has
   been typed into (even once blurred), so it never competes with input.
   Woo's login/register inputs carry no placeholder attribute, so
   :placeholder-shown never matches them — gating the "typed into" check on
   input[placeholder] keeps that rule inert instead of :not() being
   permanently true and killing the sweep outright (confirmed live: without
   this guard the sweep never once played). */
.gb-member-stage .woocommerce-form-row {
	position: relative;
	overflow: hidden;
}
.gb-member-stage .woocommerce-form-row::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dm-primary, #b89a5b), transparent);
	transform: translateX(-100%);
	opacity: .55;
	pointer-events: none;
	animation: gb-mem-idle-sweep 5.2s var(--gb-mem-ease) 1s infinite;
}
@keyframes gb-mem-idle-sweep {
	0% { transform: translateX(-100%); }
	26% { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}
.gb-member-stage .woocommerce-form-row:focus-within::after {
	animation: none;
	opacity: 0;
}
.gb-member-stage .woocommerce-form-row:has(input[placeholder]:not(:placeholder-shown))::after {
	animation: none;
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.gb-member-stage .woocommerce-form-row::after {
		animation: none;
		opacity: 0;
	}
}

/* -------------------------------------------- 5b. link + focus color leak */

.gb-member-auth a,
.gb-member-visual a {
	color: var(--dm-primary, #b89a5b);
}
.gb-member-auth a:hover,
.gb-member-auth a:focus-visible,
.gb-member-visual a:hover,
.gb-member-visual a:focus-visible {
	color: var(--dm-text, #f4f1e8);
}

.gb-member-page :is(button, a, input[type="checkbox"]):focus-visible {
	outline: 1px solid var(--dm-primary, #b89a5b) !important;
	outline-offset: 3px;
}
.gb-member-stage input[type="text"]:focus-visible,
.gb-member-stage input[type="email"]:focus-visible,
.gb-member-stage input[type="password"]:focus-visible {
	outline: 0 !important;
}

/* --------------------------------------------------------------- 6. notices */

body.dm-gb-member .woocommerce-error,
body.dm-gb-member .woocommerce-info,
body.dm-gb-member .woocommerce-message {
	margin: 0 0 32px !important;
	border-top: 0 !important;
	border-left: 2px solid var(--dm-primary, #b89a5b) !important;
	border-radius: 0 !important;
	background: var(--dm-surface, #121411) !important;
	color: var(--dm-text, #f4f1e8) !important;
	box-shadow: none !important;
	font-family: var(--gb-font-ja, "Noto Sans JP", sans-serif);
	font-size: 13px;
}
body.dm-gb-member .woocommerce-error a,
body.dm-gb-member .woocommerce-info a,
body.dm-gb-member .woocommerce-message a { color: var(--dm-primary, #b89a5b) !important; }

/* Woo's own ::before icon glyph (its "WooCommerce" icon font) renders red
   by default on every notice type — confirmed live on a failed login,
   clashing with the black/gold/cream system. Recolor only; the glyph,
   position and the notice's own message/logic are untouched. */
body.dm-gb-member .woocommerce-error::before,
body.dm-gb-member .woocommerce-info::before,
body.dm-gb-member .woocommerce-message::before {
	color: var(--dm-primary, #b89a5b) !important;
}

/* -------------------------------------------------------------- 8. mobile */

@media (max-width: 900px) {
	.gb-member-page { grid-template-columns: 1fr; }
	.gb-member-visual {
		min-height: 46vh;
		border-right: 0;
		border-bottom: 1px solid rgba(184, 154, 91, .35);
	}
	.gb-member-visual__copy { padding: 0 22px; bottom: 6%; }
	.gb-member-visual__title { font-size: clamp(28px, 7vw, 36px); }
	.gb-member-visual__desc { display: none; }
	.gb-member-auth { min-height: auto; padding: 48px 22px 72px; }
	.gb-member-tabs { margin-bottom: 44px; }
}

@media (max-width: 520px) {
	.gb-member-visual { min-height: 38vh; }
}

@media (prefers-reduced-motion: reduce) {
	.gb-member-stage #customer_login.u-columns .u-column1,
	.gb-member-stage #customer_login.u-columns .u-column2,
	.gb-member-tab::after { transition: none !important; }
}