/* =========================================================================
   ACCOUNT — auth (sign in / register) + dashboard.
   Applies the UI/UX checklist: clear hierarchy, one primary CTA, ≥48px touch
   targets, visible labels, segmented tabs with ARIA, accessible focus, and a
   balanced split layout that uses the space instead of a lonely small box.
   Loaded on My Account pages; overrides the generic .auth-card/.dash styles.
   ========================================================================= */

/* ---------- auth split card ---------- */
.auth-wrap { display: flex; justify-content: center; padding-top: .5rem; }
.auth {
	width: 100%; max-width: 1000px;
	display: grid; grid-template-columns: 1fr;
	background: var(--bg); border: 1px solid var(--line);
	box-shadow: var(--shadow-card); overflow: hidden; border-radius: 12px;
}
@media (min-width: 860px) { .auth { grid-template-columns: 1.04fr .96fr; } }

.auth__aside {
	position: relative; isolation: isolate;
	padding: clamp(2rem, 4vw, 3.4rem);
	display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
	background: var(--hero-tint); border-bottom: 1px solid var(--line);
	overflow: hidden;
}
@media (min-width: 860px) { .auth__aside { border-bottom: 0; border-right: 1px solid var(--line); } }
.auth__aside::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: url('../img/favicon/android-chrome-512x512.png') no-repeat right -40px bottom -40px;
	background-size: 240px auto; opacity: .06; filter: var(--watermark-filter);
}
.auth__aside .eyebrow { color: var(--gold); }
.auth__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.05; }
.auth__lead { font-family: var(--f-accent); font-style: italic; font-size: 1.2rem; color: var(--ink-soft); line-height: 1.5; max-width: 32ch; }
.auth__perks { list-style: none; display: flex; flex-direction: column; gap: .9rem; margin-top: .4rem; }
.auth__perks li { display: flex; gap: .8rem; align-items: center; font-size: .9rem; color: var(--ink-soft); }
.auth__perks i { color: var(--gold); font-size: 19px; flex-shrink: 0; }

.auth__panel { padding: clamp(2rem, 4vw, 3rem); }

/* segmented tab control */
.auth-tabs {
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	background: var(--surface-2); border: 1px solid var(--line);
	border-radius: 999px; padding: 4px; margin-bottom: 2rem;
}
.auth-tab {
	border-radius: 999px; padding: .8rem 1rem; min-height: 44px;
	font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--ink-soft); transition: background .3s ease, color .3s ease;
	border: 0; cursor: pointer;
}
.auth-tab:hover { color: var(--gold); }
.auth-tab.active { background: var(--gold); color: #fff; }
.auth-tab.active:hover { color: #fff; }

.auth-form { display: none; }
.auth-form.active { display: block; animation: auth-fade .35s ease; }
@keyframes auth-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* fields: visible labels, ≥48px targets, clear focus */
.auth .field { margin-bottom: 1.2rem; }
.auth .field label { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45rem; }
.auth .field input {
	min-height: 50px; padding: .8rem 1rem;
	border: 1px solid var(--line); background: var(--bg);
	font-family: var(--f-body); font-size: .95rem; color: var(--ink);
	border-radius: 8px; transition: border-color .25s ease, box-shadow .25s ease;
}
.auth .field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(154,125,63,.16); }
.auth .field input:focus-visible { outline: none; }
.auth-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: .82rem; color: var(--ink-soft); margin-bottom: 1.6rem; }
.auth-meta label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.auth-meta input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); }
.auth-meta a { color: var(--gold); }
.auth-meta a:hover { text-decoration: underline; }
.auth .btn--block { min-height: 52px; }
.auth__switch { text-align: center; font-size: .84rem; color: var(--ink-faint); margin-top: 1.3rem; }
.auth__switch button { color: var(--gold); text-decoration: underline; font-size: inherit; }

@media (max-width: 859px) { .auth__perks { display: none; } .auth__aside { padding-block: 2rem; } }

/* ---------- dashboard refinements ---------- */
.dash__head { align-items: center; }
.dash__head .signout {
	display: inline-flex; align-items: center; gap: .45rem; min-height: 40px;
	padding: .5rem 1.1rem; border: 1px solid var(--line); border-radius: 999px;
	font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
	transition: all .3s ease;
}
.dash__head .signout:hover { border-color: var(--gold); color: var(--gold); }

.dash-cards { gap: 1.2rem; }
.dash-card { border-radius: 12px; padding: 2rem 1.6rem; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.dash-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.dash-card i { font-size: 30px; }
.dash-card h3 { margin-top: 1rem; }

.dash-orders { border-radius: 12px; overflow: hidden; }
.dash-order { gap: 1.2rem; padding: 1.2rem 1.4rem; align-items: center; }
.dash-order:hover { background: var(--surface-2); }
.dash-order .ostatus {
	justify-self: start; display: inline-flex; align-items: center; gap: .4rem;
	padding: .32rem .8rem; border-radius: 999px;
	background: rgba(154,125,63,.12); color: var(--gold-deep);
	font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.dash-order .oprice { font-family: var(--f-display); }

@media (prefers-reduced-motion: reduce) {
	.auth-form.active { animation: none; }
	.dash-card, .dash__head .signout { transition: none; }
}

/* ---------- dashboard account menu (replaces the generic cards) ---------- */
.acct-nav { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 2.8rem; }
.acct-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.5rem 1.4rem; border-right: 1px solid var(--line-soft); transition: background .3s ease; }
.acct-link:last-child { border-right: 0; }
.acct-link:hover { background: var(--surface-2); }
.acct-link__ic { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.acct-link__ic i { font-size: 20px; }
.acct-link:hover .acct-link__ic { background: var(--gold); color: #fff; border-color: var(--gold); }
.acct-link__tx { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.acct-link__tx strong { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; }
.acct-link__tx small { font-size: .76rem; color: var(--ink-faint); }
.acct-link__go { color: var(--ink-faint); font-size: 15px; transition: transform .3s ease, color .3s ease; }
.acct-link:hover .acct-link__go { color: var(--gold); transform: translateX(4px); }
@media (max-width: 720px) {
	.acct-nav { grid-template-columns: 1fr; }
	.acct-link { border-right: 0; border-bottom: 1px solid var(--line-soft); }
	.acct-link:last-child { border-bottom: 0; }
}

/* ---------- endpoint pages: orders / addresses / account details ---------- */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info { border-radius: 10px; }

/* Orders table */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-orders-table {
	width: 100%; border-collapse: collapse; border: 1px solid var(--line);
	border-radius: 12px; overflow: hidden; font-size: .88rem;
}
.woocommerce-MyAccount-content table.shop_table th {
	background: var(--surface-2); text-align: left; padding: 1rem 1.2rem;
	font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); font-weight: 600;
}
.woocommerce-MyAccount-content table.shop_table td { padding: 1rem 1.2rem; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.woocommerce-orders-table__cell-order-status { color: var(--gold-deep); }
.woocommerce-orders-table__cell-order-status,
.order-status {
	display: inline-flex; align-items: center; padding: .3rem .8rem; border-radius: 999px;
	background: rgba(154,125,63,.12); color: var(--gold-deep);
	font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
}

/* Addresses */
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: .4rem; }
.woocommerce-Address { border: 1px solid var(--line); border-radius: 12px; padding: 1.8rem; }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.woocommerce-Address-title h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; }
.woocommerce-Address-title .edit { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.woocommerce-Address-title .edit:hover { text-decoration: underline; }
.woocommerce-Address address { font-style: normal; color: var(--ink-soft); line-height: 1.8; font-size: .92rem; }
@media (max-width: 700px) { .woocommerce-Addresses { grid-template-columns: 1fr; } }

/* Account-details + edit-address forms */
.woocommerce-MyAccount-content form { max-width: 640px; }
.woocommerce-MyAccount-content .form-row { margin-bottom: 1.2rem; display: flex; flex-direction: column; }
.woocommerce-MyAccount-content .form-row-first, .woocommerce-MyAccount-content .form-row-last { display: inline-flex; }
@media (min-width: 600px) {
	.woocommerce-EditAccountForm .form-row-first, .woocommerce-form-row.form-row-first { width: 48%; float: left; margin-right: 4%; }
	.woocommerce-EditAccountForm .form-row-last, .woocommerce-form-row.form-row-last { width: 48%; float: left; }
}
.woocommerce-MyAccount-content form label { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45rem; }
.woocommerce-MyAccount-content form .input-text,
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select {
	min-height: 50px; padding: .8rem 1rem; width: 100%;
	border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
	font-family: var(--f-body); font-size: .95rem; color: var(--ink);
	transition: border-color .25s ease, box-shadow .25s ease;
}
.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(154,125,63,.16); }
.woocommerce-MyAccount-content fieldset { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.woocommerce-MyAccount-content fieldset legend { font-family: var(--f-display); font-size: 1.2rem; margin-bottom: .6rem; }
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 48px;
	padding: .85rem 1.8rem; background: var(--gold); color: #fff; border: 1px solid var(--gold);
	border-radius: 8px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
	transition: background .3s ease, border-color .3s ease;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
/* secondary "View" buttons in the orders table stay subtle */
.woocommerce-orders-table .button.view { background: transparent; color: var(--gold); border-color: var(--line); padding: .55rem 1.1rem; min-height: 38px; }
.woocommerce-orders-table .button.view:hover { background: var(--gold); color: #fff; border-color: var(--gold); }