/**
 * account.css — Agora My Account: login, registration, and the full password-reset
 * flow (lost password, set new password, confirmation).
 *
 * Everything is scoped under the `.gp-account-page` body class (added by
 * includes/woo-account.php) so it never bleeds into WoodMart-built pages. Reuses
 * the core.css design tokens and mirrors the wholesale/checkout form treatment.
 *
 * @package woodmart-child
 */

/* ============================================================ *
 * 1. Layout
 * ============================================================ */
.gp-account-page .gp-auth {
	max-width: 1000px;
	margin-inline: auto;
	padding-block: clamp(20px, 3vw, 40px);
}

.gp-account-page .gp-auth--narrow {
	max-width: 520px;
}

.gp-account-page .gp-auth__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 32px);
	align-items: stretch; /* both cards share the height of the taller one */
}

/* ── Card ──────────────────────────────────────────────────── */
.gp-account-page .gp-auth__col {
	position: relative;
	background: #fff;
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	box-shadow: 0 4px 32px rgba(19, 41, 61, .08);
	padding: clamp(26px, 3.5vw, 44px);
}

/* Warm the "new customer" card so the two columns read as distinct choices. */
.gp-account-page .gp-auth__col--register {
	background: var(--gp-cream);
}

/* ── Card heads ────────────────────────────────────────────── */
.gp-account-page .gp-auth__eyebrow {
	margin-bottom: 14px;
}

.gp-account-page .gp-auth__title {
	font-family: var(--gp-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.1;
	letter-spacing: -.012em;
	color: var(--gp-ink);
	margin: 0 0 6px;
}

.gp-account-page .gp-auth__title em {
	font-style: italic;
	color: var(--gp-sea);
}

.gp-account-page .gp-auth__sub,
.gp-account-page .gp-auth__lead {
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	line-height: 1.6;
	color: var(--gp-ink-soft);
	margin: 0 0 22px;
}

.gp-account-page .gp-auth__lead {
	font-size: var(--gp-body);
}

/* ============================================================ *
 * 2. Form fields (scoped WooCommerce markup)
 * ============================================================ */
.gp-account-page .woocommerce-form .form-row,
.gp-account-page .woocommerce-ResetPassword .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 16px;
	padding: 0;
    width: 100%
}

/* Two fields side by side (first / last name). Each grid cell owns its width,
   so neutralise WooCommerce's .form-row-first/last float + 47% width. */
.gp-account-page .gp-auth__row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.gp-account-page .gp-auth__row-2 .form-row {
	width: 100%;
	float: none;
	margin: 0 0 16px;
}

.gp-account-page .woocommerce-form label,
.gp-account-page .woocommerce-ResetPassword label {
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--gp-ink);
	margin-bottom: 6px;
}

.gp-auth .required {
	color: var(--gp-sea);
	border: 0;
	text-decoration: none;
}

/* Input styling is scoped to .gp-auth (login/register/reset only) so it never
   touches the logged-in dashboard forms (edit-account, addresses), which also
   live under the .gp-account-page body class. */
.gp-auth .input-text,
.gp-auth input[type="text"],
.gp-auth input[type="email"],
.gp-auth input[type="password"] {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font-family: var(--gp-sans);
	font-size: var(--gp-body);
	color: var(--gp-ink);
	background: var(--gp-paper);
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	outline: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	transition: border-color .18s var(--gp-ease), box-shadow .18s var(--gp-ease);
}

/* On the cream register card, keep inputs white for contrast. */
.gp-auth .gp-auth__col--register .input-text {
	background: #fff;
}

.gp-auth .input-text:focus {
	border-color: var(--gp-sea);
	box-shadow: 0 0 0 3px rgba(0, 82, 160, .12);
}

/* WooCommerce validation states. */
.gp-auth .woocommerce-invalid .input-text {
	border-color: #b0443c;
	box-shadow: 0 0 0 3px rgba(176, 68, 60, .1);
}

.gp-auth .woocommerce-validated .input-text {
	border-color: #2a7a45;
}

/* ── Login footer: remember-me + lost password on one row ──── */
.gp-account-page .gp-auth__login-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 4px 0 18px;
}

.gp-account-page .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	font-weight: 400;
	color: var(--gp-ink-soft);
	cursor: pointer;
}

.gp-account-page .woocommerce-form-login__rememberme input {
	width: 16px;
	height: 16px;
	accent-color: var(--gp-sea);
}

.gp-account-page .woocommerce-LostPassword {
	margin: 0;
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
}

.gp-account-page .woocommerce-LostPassword a,
.gp-account-page .gp-auth__link {
	color: var(--gp-sea);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gp-account-page .woocommerce-LostPassword a:hover,
.gp-account-page .gp-auth__link:hover {
	color: var(--gp-sea-deep);
}

/* ── Password show/hide toggle ─────────────────────────────── *
 * WooCommerce's frontend JS wraps each password field in
 * `.password-input` and appends `.show-password-input` (adding
 * `.display-password` while the value is revealed). WooCommerce's own icon
 * uses the "WooCommerce" webfont, which isn't loaded in this theme, so we
 * draw our own eye via a masked SVG. The three-class selector out-specifies
 * WooCommerce's `.woocommerce form .show-password-input::after`.
 */
.gp-auth .password-input {
	position: relative;
	display: block;
}

.gp-auth .password-input .input-text {
	padding-right: 46px;
}

.gp-auth .password-input .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 46px;
	height: 48px;
	cursor: pointer;
	background-color: var(--gp-ink-soft);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	transition: background-color .15s var(--gp-ease);
}

.gp-auth .password-input .show-password-input:hover {
	background-color: var(--gp-ink);
}

.gp-auth .password-input .show-password-input.display-password {
	background-color: var(--gp-sea);
}

/* Neutralise WooCommerce's own glyph pseudo (uses the WooCommerce webfont,
   which isn't loaded here, so it renders as tofu). */
.gp-auth .password-input .show-password-input::after {
	content: none;
}

/* Honeypot — removed from layout, still present for bots. */
.gp-account-page .gp-auth__trap {
	position: absolute !important;
	left: -9999px !important;
	visibility: hidden;
}

/* ============================================================ *
 * 3. Submit button (self-contained so it beats WoodMart's .button)
 *
 * The `button.` qualifier lifts specificity to 0,2,1 so it wins over
 * WoodMart's inline `.lost_reset_password .button` (0,2,0) rule, which is
 * printed after this sheet on the lost/reset-password endpoints.
 * ============================================================ */
.gp-account-page button.gp-auth__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0 24px;
	font-family: var(--gp-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	background: var(--gp-ink);
	border: 1px solid transparent;
	border-radius: var(--gp-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background .18s var(--gp-ease), color .18s var(--gp-ease);
}

.gp-account-page button.gp-auth__submit:hover,
.gp-account-page button.gp-auth__submit:focus {
	background: var(--gp-sea-deep);
	color: #fff;
}

/* ============================================================ *
 * 4. WooCommerce notices within the account scope
 * ============================================================ */
.gp-account-page .woocommerce-error,
.gp-account-page .woocommerce-message,
.gp-account-page .woocommerce-info {
	list-style: none;
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 8px;
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	line-height: 1.5;
}

.gp-account-page .woocommerce-error {
	background: #fef2f2;
	border: 1px solid #f87171;
	color: #b91c1c;
}

.gp-account-page .woocommerce-message {
	background: #f0fdf4;
	border: 1px solid #86efac;
	color: #15803d;
}

.gp-account-page .woocommerce-info {
	background: #eff6ff;
	border: 1px solid #93c5fd;
	color: #1e40af;
}

.gp-account-page .woocommerce-error a,
.gp-account-page .woocommerce-message a,
.gp-account-page .woocommerce-info a {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}

/* ============================================================ *
 * 5. Responsive
 * ============================================================ */
@media (max-width: 880px) {
	.gp-account-page .gp-auth__cols {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.gp-account-page .gp-auth__row-2 {
		grid-template-columns: 1fr;
	}
}

/* ============================================================ *
 * 6. Logged-in dashboard — layout, sidebar card & navigation
 * ============================================================ */

/* WoodMart renders the two-column grid (.wd-my-account-wrapper.wd-grid-g →
   .wd-my-account-sidebar + .woocommerce-MyAccount-content). We restyle those
   columns; we do not rebuild the grid. */

/* Sidebar becomes the Agora card; hide WoodMart's default page-title <h3>. */
.gp-account-page .wd-my-account-sidebar {
	background: #fff;
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	box-shadow: 0 4px 32px rgba(19, 41, 61, .08);
	padding: 22px;
	align-self: start;
}

.gp-account-page .wd-my-account-sidebar .woocommerce-MyAccount-title {
	display: none;
}

/* Content panel — white card to the right of the sidebar. */
.gp-account-page .woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	box-shadow: 0 4px 32px rgba(19, 41, 61, .08);
	padding: clamp(20px, 3vw, 36px);
}

/* ── Greeting block ────────────────────────────────────────── */
.gp-account-page .gp-acct-greet {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 18px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--gp-line);
}

.gp-account-page .gp-acct-greet__glyph {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--gp-cream);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a3f52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

.gp-account-page .gp-acct-greet__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.gp-account-page .gp-acct-greet__hi {
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	color: var(--gp-ink-soft);
}

.gp-account-page .gp-acct-greet__name {
	font-family: var(--gp-serif);
	font-size: 19px;
	color: var(--gp-ink);
}

/* ── Menu ──────────────────────────────────────────────────── */
.gp-account-page .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-account-page .woocommerce-MyAccount-navigation li {
	margin: 0;
	border: 0;
}

/* The `.wd-my-account-sidebar` qualifier (the nav's always-present ancestor)
   lifts these to 0,4,x so they beat WoodMart's `.wd-builder-off
   .woocommerce-MyAccount-navigation ul>li>a` rules (0,2–3,3). */
.gp-account-page .wd-my-account-sidebar .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 0;
	padding: 11px 12px;
	border-radius: 8px;
	font-family: var(--gp-sans);
	font-size: var(--gp-body);
	font-weight: 500;
	color: var(--gp-ink-soft);
	text-decoration: none;
	transition: background .15s var(--gp-ease), color .15s var(--gp-ease);
}

.gp-account-page .wd-my-account-sidebar .woocommerce-MyAccount-navigation li a:hover {
	background: var(--gp-cream);
	color: var(--gp-ink);
}

.gp-account-page .wd-my-account-sidebar .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--gp-ink);
	color: #fff;
}

/* Menu icons — masked SVG, keyed on WooCommerce's --{endpoint} modifier class.
   Default glyph first, then per-endpoint overrides so WoodMart extras degrade. */
.gp-account-page .woocommerce-MyAccount-navigation li a::before {
	content: "";
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gp-account-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

.gp-account-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

.gp-account-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.gp-account-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.gp-account-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--wishlist a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.49 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.49 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

.gp-account-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
}

/* Logout set slightly apart. */
.gp-account-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--gp-line);
}

/* ============================================================ *
 * 7. Dashboard landing — welcome + quick-action cards
 * ============================================================ */
.gp-account-page .gp-acct-dash__head {
	position: relative;
	margin-bottom: 24px;
}

.gp-account-page .gp-acct-dash__title {
	font-family: var(--gp-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.1;
	color: var(--gp-ink);
	margin: 0 0 6px;
}

.gp-account-page .gp-acct-dash__title em {
	font-style: italic;
	color: var(--gp-sea);
}

.gp-account-page .gp-acct-dash__sub {
	font-family: var(--gp-sans);
	font-size: var(--gp-body);
	color: var(--gp-ink-soft);
	margin: 0;
}

.gp-account-page .gp-acct-dash__logout {
	position: absolute;
	top: 2px;
	right: 0;
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	color: var(--gp-sea);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gp-account-page .gp-acct-dash__logout:hover {
	color: var(--gp-sea-deep);
}

.gp-account-page .gp-acct-dash__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.gp-account-page .gp-acct-dash__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 20px;
	background: var(--gp-cream);
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	text-decoration: none;
	transition: transform .15s var(--gp-ease), box-shadow .15s var(--gp-ease), border-color .15s var(--gp-ease);
}

.gp-account-page .gp-acct-dash__card:hover {
	transform: translateY(-2px);
	border-color: var(--gp-sea);
	box-shadow: 0 8px 24px rgba(19, 41, 61, .1);
}

.gp-account-page .gp-acct-dash__icon {
	width: 26px;
	height: 26px;
	margin-bottom: 6px;
	background-color: var(--gp-sea);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.gp-account-page .gp-acct-dash__card--orders .gp-acct-dash__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

.gp-account-page .gp-acct-dash__card--address .gp-acct-dash__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.gp-account-page .gp-acct-dash__card--account .gp-acct-dash__icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.gp-account-page .gp-acct-dash__label {
	font-family: var(--gp-sans);
	font-size: var(--gp-body);
	font-weight: 600;
	color: var(--gp-ink);
}

.gp-account-page .gp-acct-dash__caption {
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	color: var(--gp-ink-soft);
}

@media (max-width: 680px) {
	.gp-account-page .gp-acct-dash__grid {
		grid-template-columns: 1fr;
	}
	.gp-account-page .gp-acct-dash__logout {
		position: static;
		display: inline-block;
		margin-top: 8px;
	}
}

/* ============================================================ *
 * 8. Orders table + order detail
 * ============================================================ */
.gp-account-page .woocommerce-orders-table,
.gp-account-page .woocommerce-table--order-details,
.gp-account-page .shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	overflow: hidden;
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
}

.gp-account-page .woocommerce-orders-table thead th,
.gp-account-page .woocommerce-table--order-details thead th {
	background: var(--gp-cream);
	color: var(--gp-ink);
	font-weight: 600;
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--gp-line);
}

.gp-account-page .woocommerce-orders-table td,
.gp-account-page .woocommerce-orders-table th,
.gp-account-page .woocommerce-table--order-details td,
.gp-account-page .woocommerce-table--order-details th {
	padding: 12px 14px;
	border-bottom: 1px solid var(--gp-line);
	color: var(--gp-ink-soft);
	vertical-align: middle;
}

.gp-account-page .woocommerce-orders-table tbody tr:last-child td,
.gp-account-page .woocommerce-orders-table tbody tr:last-child th {
	border-bottom: 0;
}

.gp-account-page .woocommerce-orders-table a,
.gp-account-page .woocommerce-table--order-details a {
	color: var(--gp-sea);
	text-decoration: none;
}

.gp-account-page .woocommerce-orders-table a:hover {
	text-decoration: underline;
}

/* Status pill (order-status cell). */
.gp-account-page .woocommerce-orders-table__cell-order-status {
	color: var(--gp-ink);
	font-weight: 600;
}

/* Action buttons in the orders table + pagination + order detail. */
.gp-account-page .woocommerce-MyAccount-content .woocommerce-button.button,
.gp-account-page .woocommerce-MyAccount-content a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 18px;
	margin: 2px 4px 2px 0;
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	font-weight: 500;
	color: #fff;
	background: var(--gp-ink);
	border: 1px solid transparent;
	border-radius: var(--gp-radius);
	text-decoration: none;
	transition: background .18s var(--gp-ease);
}

.gp-account-page .woocommerce-MyAccount-content .woocommerce-button.button:hover,
.gp-account-page .woocommerce-MyAccount-content a.button:hover {
	background: var(--gp-sea-deep);
	color: #fff;
}

/* Secondary look for the "cancel" action. */
.gp-account-page .woocommerce-MyAccount-content .woocommerce-button.cancel {
	background: #fff;
	color: var(--gp-ink);
	border-color: var(--gp-line);
}

.gp-account-page .woocommerce-MyAccount-content .woocommerce-button.cancel:hover {
	background: var(--gp-cream);
	color: var(--gp-ink);
}

/* Order detail — customer address columns. */
.gp-account-page .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 18px;
}

.gp-account-page .woocommerce-customer-details .col-1,
.gp-account-page .woocommerce-customer-details .col-2,
.gp-account-page .woocommerce-customer-details address {
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	line-height: 1.6;
	color: var(--gp-ink-soft);
}

.gp-account-page .woocommerce-column__title {
	font-family: var(--gp-serif);
	font-size: 18px;
	color: var(--gp-ink);
	margin: 0 0 8px;
}

/* Responsive stacked rows — WooCommerce emits data-title on each cell. */
@media (max-width: 680px) {
	.gp-account-page .woocommerce-orders-table thead {
		display: none;
	}
	.gp-account-page .woocommerce-orders-table tr {
		display: block;
		border-bottom: 1px solid var(--gp-line);
		padding: 8px 0;
	}
	.gp-account-page .woocommerce-orders-table td,
	.gp-account-page .woocommerce-orders-table th {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		border: 0;
		padding: 7px 14px;
		text-align: right;
	}
	.gp-account-page .woocommerce-orders-table td::before,
	.gp-account-page .woocommerce-orders-table th::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--gp-ink);
		text-align: left;
	}
	.gp-account-page .woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
	}
}

/* ============================================================ *
 * 9. Addresses + account-details / edit-address forms
 *
 * Inputs are scoped to the dashboard form classes (NOT .gp-auth) so they never
 * collide with the login/register/reset inputs.
 * ============================================================ */

/* ── Address cards (my-address.php) ────────────────────────── */
.gp-account-page .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 18px;
}

.gp-account-page .woocommerce-Address {
	background: var(--gp-cream);
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	padding: 22px;
}

.gp-account-page .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.gp-account-page .woocommerce-Address-title h2,
.gp-account-page .woocommerce-Address-title h3 {
	font-family: var(--gp-serif);
	font-weight: 400;
	font-size: 20px;
	color: var(--gp-ink);
	margin: 0;
}

.gp-account-page .woocommerce-Address-title .edit {
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	font-weight: 500;
	color: var(--gp-sea);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gp-account-page .woocommerce-Address address {
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	font-style: normal;
	line-height: 1.7;
	color: var(--gp-ink-soft);
}

/* ── Form fields (edit-account + edit-address) ─────────────── */
.gp-account-page .woocommerce-EditAccountForm .form-row,
.gp-account-page .woocommerce-address-fields .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 16px;
	padding: 0;
}

.gp-account-page .woocommerce-EditAccountForm label,
.gp-account-page .woocommerce-address-fields label {
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--gp-ink);
	margin-bottom: 6px;
}

.gp-account-page .woocommerce-EditAccountForm .input-text,
.gp-account-page .woocommerce-EditAccountForm input[type="text"],
.gp-account-page .woocommerce-EditAccountForm input[type="email"],
.gp-account-page .woocommerce-EditAccountForm input[type="password"],
.gp-account-page .woocommerce-address-fields .input-text,
.gp-account-page .woocommerce-address-fields input[type="text"],
.gp-account-page .woocommerce-address-fields input[type="email"],
.gp-account-page .woocommerce-address-fields input[type="tel"],
.gp-account-page .woocommerce-address-fields select {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font-family: var(--gp-sans);
	font-size: var(--gp-body);
	color: var(--gp-ink);
	background: var(--gp-paper);
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	outline: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	transition: border-color .18s var(--gp-ease), box-shadow .18s var(--gp-ease);
}

.gp-account-page .woocommerce-EditAccountForm .input-text:focus,
.gp-account-page .woocommerce-EditAccountForm input:focus,
.gp-account-page .woocommerce-address-fields .input-text:focus,
.gp-account-page .woocommerce-address-fields input:focus,
.gp-account-page .woocommerce-address-fields select:focus {
	border-color: var(--gp-sea);
	box-shadow: 0 0 0 3px rgba(0, 82, 160, .12);
}

.gp-account-page .woocommerce-EditAccountForm .required,
.gp-account-page .woocommerce-address-fields .required {
	color: var(--gp-sea);
	border: 0;
	text-decoration: none;
}

/* Password-change fieldset. */
.gp-account-page .woocommerce-EditAccountForm fieldset {
	margin: 8px 0 16px;
	padding: 20px;
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	background: var(--gp-paper);
}

.gp-account-page .woocommerce-EditAccountForm fieldset legend {
	padding: 0 8px;
	font-family: var(--gp-serif);
	font-size: 18px;
	color: var(--gp-ink);
}

.gp-account-page .woocommerce-EditAccountForm span em {
	font-family: var(--gp-sans);
	font-size: var(--gp-small);
	font-style: normal;
	color: var(--gp-ink-soft);
}

/* Save button — reuse the ink pill treatment (element+class qualifier beats
   WoodMart inline .button per the woodmart-inline-style-override memory). */
.gp-account-page .woocommerce-EditAccountForm button.button,
.gp-account-page .woocommerce-address-fields button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 28px;
	font-family: var(--gp-sans);
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	background: var(--gp-ink);
	border: 1px solid transparent;
	border-radius: var(--gp-radius);
	cursor: pointer;
	transition: background .18s var(--gp-ease);
}

.gp-account-page .woocommerce-EditAccountForm button.button:hover,
.gp-account-page .woocommerce-address-fields button.button:hover {
	background: var(--gp-sea-deep);
	color: #fff;
}

@media (max-width: 680px) {
	.gp-account-page .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

/* ============================================================ *
 * 10. Wishlist page
 *
 * The wishlist is a standalone page that reuses the account layout (sidebar +
 * .woocommerce-MyAccount-content), so sections 6–9 already style its chrome once
 * account.css is enqueued there (see includes/woo-account.php ::greekpro_is_wishlist_page).
 * This section covers the wishlist-specific content: the empty-state block and
 * the products grid.
 * ============================================================ */
.gp-account-page .wd-wishlist-content {
	margin: 0;
}

/* Empty state (also used by other WoodMart empty blocks within the account scope). */
.gp-account-page .wd-empty-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: clamp(28px, 5vw, 56px) 20px;
}

.gp-account-page .wd-empty-block-title {
	font-family: var(--gp-serif);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 28px);
	color: var(--gp-ink);
	margin: 0;
}

.gp-account-page .wd-empty-block-text {
	font-family: var(--gp-sans);
	font-size: var(--gp-body);
	line-height: 1.6;
	color: var(--gp-ink-soft);
	margin: 0;
	max-width: 460px;
}

.gp-account-page .wd-empty-block-btn.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	margin-top: 6px;
	padding: 0 28px;
	font-family: var(--gp-sans);
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	background: var(--gp-ink);
	border: 1px solid transparent;
	border-radius: var(--gp-radius);
	text-decoration: none;
	transition: background .18s var(--gp-ease);
}

.gp-account-page .wd-empty-block-btn.button:hover {
	background: var(--gp-sea-deep);
	color: #fff;
}

/* Populated wishlist grid — WoodMart product cards; give them a tidy Agora
   frame (basic pass; the deep PLP card treatment lives in plp.css and keys on
   different markup). */
.gp-account-page .wd-wishlist-content .products {
	margin: 0;
}

.gp-account-page .wd-wishlist-content .product {
	border: 1px solid var(--gp-line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s var(--gp-ease), box-shadow .15s var(--gp-ease);
}

.gp-account-page .wd-wishlist-content .product:hover {
	border-color: var(--gp-sea);
	box-shadow: 0 8px 24px rgba(19, 41, 61, .1);
}