/* My Account dashboard: profile header, sidebar nav, overview cards,
   recent/full order lists, address cards, account-details form. Built on
   the same tokens and restrained visual language as
   components/product-grid/component.css. */

/* WooCommerce's own wrapper (`.woocommerce`, the parent this sits in) is a
   single-column CSS Grid, whose implicit track defaults to minmax(auto, 1fr)
   — "auto" here means it won't shrink below this element's min-content size.
   The sidebar's intentionally-nowrap horizontal nav (see
   .qg-account-nav__list) has a large min-content width, which was pushing
   that grid track — and this whole page — wider than the viewport on
   mobile instead of just scrolling internally like it's meant to.
   min-width: 0 opts this grid item out of that auto-sizing. */
.qg-account {
	min-width: 0;
	padding-top: var(--qg-space-5);
	padding-bottom: var(--qg-space-7);
}

/* Profile header — a quiet card, same language as the checkout sections
   (accent dot + hairline rule) and the shop/hero's brand gradient on the
   avatar, so the account dashboard reads as part of the same system
   instead of a bare WooCommerce page with a name on it. */

.qg-account-hero {
	margin-bottom: var(--qg-space-5);
	padding: var(--qg-space-5);
	background: linear-gradient(160deg, var(--qg-color-paper) 0%, var(--qg-color-surface) 100%);
	border: 1px solid var(--qg-color-line);
	border-radius: var(--qg-radius-lg);
	box-shadow: var(--qg-shadow-sm);
}

.qg-account-hero__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--qg-space-4);
	margin-top: var(--qg-space-4);
}

.qg-account-hero__identity {
	display: flex;
	align-items: center;
	gap: var(--qg-space-3);
	min-width: 0;
	width: 100%;
}

/* Flex items default to min-width: auto, so this text block was refusing to
   shrink/wrap below its own intrinsic width (e.g. a long username in the
   title's serif italic) and pushing the whole hero — and the page — wider
   than the viewport on mobile. min-width: 0 lets it actually respect the
   row's width; overflow-wrap on the title/email below is the fallback for
   a single unbreakable word longer than that. */
.qg-account-hero__text {
	min-width: 0;
	flex: 1;
}

.qg-account-hero__avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--qg-color-yellow) 0%, var(--qg-color-accent) 100%);
	color: var(--qg-color-surface);
	font-family: var(--qg-font-heading);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	box-shadow: 0 0 0 4px var(--qg-color-surface), 0 4px 16px -4px rgba(184, 84, 15, 0.45);
}

.qg-account-hero__title {
	font-family: var(--qg-font-heading);
	font-size: clamp(1.4rem, 5vw, 2.3rem);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.3rem;
	color: var(--qg-color-ink);
	overflow-wrap: anywhere;
}

.qg-account-hero__subtitle {
	margin: 0 0 0.2rem;
	color: var(--qg-color-ink-soft);
}

.qg-account-hero__email {
	margin: 0;
	color: var(--qg-color-muted);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.qg-account-hero__actions {
	display: flex;
	gap: var(--qg-space-2);
	flex-shrink: 0;
}

/* Compact, phone-sized hero: the desktop card above is sized for a wide
   two-column layout (60px avatar, up to 2.3rem heading) and reads as
   oversized on a narrow screen where it's the very first thing in a
   single column — shrinks the avatar, type scale and padding so it reads
   as a tidy identity strip instead of a half-screen banner. */
@media (max-width: 899px) {
	.qg-account-hero {
		padding: var(--qg-space-3) var(--qg-space-4);
		margin-bottom: var(--qg-space-4);
	}

	.qg-account-hero__row {
		flex-wrap: nowrap;
		margin-top: var(--qg-space-2);
	}

	.qg-account-hero__avatar {
		width: 42px;
		height: 42px;
		font-size: 0.95rem;
		box-shadow: 0 0 0 3px var(--qg-color-surface), 0 2px 10px -4px rgba(184, 84, 15, 0.45);
	}

	.qg-account-hero__title {
		font-size: 1.05rem;
		margin-bottom: 0.1rem;
	}

	.qg-account-hero__subtitle {
		display: none;
	}

	.qg-account-hero__email {
		font-size: 0.78rem;
	}

	.qg-account-hero__actions .qg-btn {
		padding: 0.5rem 0.7rem;
		font-size: 0.78rem;
		gap: 0.35rem;
	}

	.qg-account-hero__actions .qg-btn .qg-icon {
		width: 15px;
		height: 15px;
	}
}

/* Layout: sidebar + content */

/* minmax(0, 1fr), not the bare 1fr shorthand (== minmax(auto, 1fr)): a grid
   track's "auto" minimum considers its content's min-content size, so the
   sidebar's horizontally-scrolling nav (deliberately nowrap — see
   .qg-account-nav__list below) was forcing this whole column, and the page
   itself, wider than the viewport instead of actually scrolling internally. */
.qg-account-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--qg-space-5);
	align-items: start;
}

@media (min-width: 900px) {
	.qg-account-layout {
		grid-template-columns: 260px minmax(0, 1fr);
	}
}

/* Mobile "drill-in": once a real section (Orders, Addresses, Account
   Details…) is open, the hero card and the nav list it was reached through
   both drop out, leaving only that section's content plus the compact
   .qg-account-back bar below — a phone app's own "tap a tab, see just that
   tab" pattern, instead of the content sitting at the bottom of a scroll
   past both of them every single time. Desktop's side-by-side columns
   always show hero + nav + content together regardless of which endpoint
   is open, so none of this applies above 900px. See my-account.php for the
   `qg-account-hero--section`/`qg-account-layout--section` classes, added
   only when WC()->query reports a real endpoint active (not the bare
   /my-account/ dashboard). */
@media (max-width: 899px) {
	.qg-account-hero--section,
	.qg-account-layout--section .qg-account-sidebar {
		display: none;
	}
}

/* Sidebar nav — a quiet card matching the hero/dashboard cards, with a
   left accent bar marking the active page instead of a full pill fill. */

.qg-account-sidebar {
	background: var(--qg-color-surface);
	border: 1px solid var(--qg-color-line);
	border-radius: var(--qg-radius);
	padding: var(--qg-space-2);
}

.qg-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.qg-account-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.9rem 0.7rem 1rem;
	border-radius: var(--qg-radius-sharp);
	text-decoration: none;
	color: var(--qg-color-ink-soft);
	font-weight: 600;
	font-size: 0.92rem;
	transition: background-color 0.2s var(--qg-ease), color 0.2s var(--qg-ease);
}

.qg-account-nav__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10%;
	bottom: 10%;
	width: 3px;
	border-radius: 999px;
	background: var(--qg-gradient-cta);
	transform: scaleY(0);
	transition: transform 0.2s var(--qg-ease);
}

.qg-account-nav__link:hover {
	background: var(--qg-color-paper);
	color: var(--qg-color-ink);
}

.qg-account-nav__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--qg-color-muted);
	transition: color 0.2s var(--qg-ease);
}

.qg-account-nav__icon .qg-icon {
	width: 18px;
	height: 18px;
}

.qg-account-nav__label {
	flex: 1;
}

.qg-account-nav__chevron {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: var(--qg-color-muted);
	transition: transform 0.2s var(--qg-ease), color 0.2s var(--qg-ease);
}

.qg-account-nav__link:hover .qg-account-nav__chevron {
	transform: translateX(2px);
	color: var(--qg-color-ink);
}

.qg-account-nav__item.is-active .qg-account-nav__chevron,
.qg-account-nav__link[aria-current='page'] .qg-account-nav__chevron {
	color: var(--qg-color-accent-dark);
}

.qg-account-nav__item.is-active .qg-account-nav__link,
.qg-account-nav__link[aria-current='page'] {
	background: var(--qg-color-accent-soft);
	color: var(--qg-color-accent-dark);
}

.qg-account-nav__item.is-active .qg-account-nav__link::before,
.qg-account-nav__link[aria-current='page']::before {
	transform: scaleY(1);
}

.qg-account-nav__item.is-active .qg-account-nav__icon,
.qg-account-nav__link[aria-current='page'] .qg-account-nav__icon {
	color: var(--qg-color-accent-dark);
}

/* Below 900px the nav used to switch to a horizontally-scrolling pill row
   (Dashboard/Orders/Wishlist/… sliding sideways, with the browser's own
   scrollbar reading as a stray "slider" track under it) — dropped in favor
   of the exact same vertical list desktop uses, just full-width: a plain
   stacked menu under the profile card, each row a bit taller for touch,
   with a chevron so it reads as "tap to open" rather than "swipe to see
   more". */
@media (max-width: 899px) {
	.qg-account-nav__link {
		padding: 0.85rem 0.9rem 0.85rem 1rem;
	}

	.qg-account-nav__label {
		font-size: 0.95rem;
	}
}

/* "Back" bar — the one thing shown in the hero/nav's place once a section
   is drilled into on mobile (see the qg-account-hero--section /
   qg-account-layout--section rules above and the markup in
   my-account.php). A real link back to the dashboard, not just a label, so
   the nav list is always one tap away even though it's hidden. Desktop
   never shows it: the nav sits right there in the next column over. */
.qg-account-back {
	display: none;
}

@media (max-width: 899px) {
	.qg-account-back {
		display: flex;
		align-items: center;
		gap: 0.3rem;
		margin-bottom: var(--qg-space-3);
		font-size: 0.85rem;
		text-decoration: none;
		color: var(--qg-color-muted);
	}

	.qg-account-back__icon {
		width: 15px;
		height: 15px;
		transform: scaleX(-1);
		flex-shrink: 0;
	}

	.qg-account-back__label {
		font-weight: 600;
		color: var(--qg-color-ink-soft);
	}

	.qg-account-back:hover .qg-account-back__label {
		color: var(--qg-color-ink);
	}

	.qg-account-back__current {
		color: var(--qg-color-muted);
	}

	.qg-account-back__current::before {
		content: '/';
		margin: 0 0.4rem;
		color: var(--qg-color-line);
	}
}

/* Dashboard empty state (no orders yet) */

.qg-account-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--qg-space-2);
	padding: var(--qg-space-7) var(--qg-space-5);
	background: var(--qg-color-surface);
	border: 1px solid var(--qg-color-line);
	border-radius: var(--qg-radius);
}

.qg-account-empty__title {
	margin: 0;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--qg-color-ink);
}

.qg-account-empty__text {
	margin: 0 0 var(--qg-space-3);
	color: var(--qg-color-muted);
}

/* Logout — bottom of the page, not the busy profile header (see
   my-account.php). A plain outlined button, not the red gradient primary
   buttons use elsewhere: logging out isn't the "main action" of this
   page, so it stays quiet until someone's actually looking for it. */

.qg-account-logout {
	display: flex;
	justify-content: center;
	margin-top: var(--qg-space-6);
	padding-top: var(--qg-space-5);
	border-top: 1px solid var(--qg-color-line);
}

.qg-account-logout__btn {
	color: var(--qg-color-danger);
	border-color: var(--qg-color-line);
}

.qg-account-logout__btn:hover {
	background: var(--qg-color-danger);
	border-color: var(--qg-color-danger);
	color: #fff;
}

/* Order lists (recent + full) */

.qg-order-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.qg-order-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: var(--qg-space-3) var(--qg-space-4);
	background: var(--qg-color-surface);
	border: 1px solid var(--qg-color-line);
	border-radius: var(--qg-radius);
	transition: border-color 0.2s var(--qg-ease), box-shadow 0.2s var(--qg-ease);
}

.qg-order-row:hover {
	border-color: var(--qg-color-ink-soft);
	box-shadow: var(--qg-shadow-sm);
}

@media (min-width: 768px) {
	.qg-order-row {
		display: grid;
		grid-template-columns: minmax(130px, 1.4fr) auto auto auto;
		align-items: center;
		gap: var(--qg-space-3);
	}
}

.qg-order-row__main {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 130px;
}

.qg-order-row__number a {
	font-weight: 700;
	color: var(--qg-color-ink);
	text-decoration: none;
}

.qg-order-row__number a:hover {
	color: var(--qg-color-accent-dark);
}

.qg-order-row__date {
	font-size: 0.8rem;
	color: var(--qg-color-muted);
}

.qg-order-row__total {
	font-weight: 600;
	color: var(--qg-color-ink);
	white-space: nowrap;
}

.qg-order-row__actions {
	display: flex;
	gap: 0.75rem;
}

.qg-order-row__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--qg-color-ink);
	text-decoration: none;
	white-space: nowrap;
}

.qg-order-row__link .qg-icon {
	width: 14px;
	height: 14px;
}

.qg-order-row__link:hover {
	color: var(--qg-color-accent-dark);
}

/* Status pills */

.qg-order-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.qg-order-pill.is-success {
	background: #e6f3ec;
	color: var(--qg-color-success);
}

.qg-order-pill.is-info {
	background: var(--qg-color-accent-soft);
	color: var(--qg-color-accent-dark);
}

.qg-order-pill.is-warning {
	background: #fff6da;
	color: #8a6d00;
}

.qg-order-pill.is-danger {
	background: #fdeaea;
	color: var(--qg-color-danger);
}

.qg-order-pill.is-neutral {
	background: var(--qg-color-paper);
	color: var(--qg-color-ink-soft);
}

.qg-account-pagination {
	display: flex;
	justify-content: center;
	gap: var(--qg-space-2);
	margin-top: var(--qg-space-4);
}

.qg-account-empty {
	padding: var(--qg-space-5);
	text-align: center;
	background: var(--qg-color-paper);
	border-radius: var(--qg-radius-lg);
}

.qg-account-empty p {
	margin: 0 0 var(--qg-space-3);
	color: var(--qg-color-ink-soft);
}

/* Address cards */

.qg-account-lead {
	color: var(--qg-color-ink-soft);
	margin: 0 0 var(--qg-space-4);
}

.qg-address-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qg-space-3);
}

@media (min-width: 640px) {
	.qg-address-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

.qg-address-card {
	padding: var(--qg-space-4);
	background: var(--qg-color-surface);
	border: 1px solid var(--qg-color-line);
	border-radius: var(--qg-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--qg-space-2);
	transition: border-color 0.2s var(--qg-ease), box-shadow 0.2s var(--qg-ease);
}

.qg-address-card:hover {
	border-color: var(--qg-color-ink-soft);
	box-shadow: var(--qg-shadow-sm);
}

.qg-address-card__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.qg-address-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--qg-color-accent-soft);
	color: var(--qg-color-accent-dark);
	flex-shrink: 0;
}

.qg-address-card__icon .qg-icon {
	width: 16px;
	height: 16px;
}

.qg-address-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	color: var(--qg-color-ink);
}

.qg-address-card__body {
	font-style: normal;
	color: var(--qg-color-ink-soft);
	line-height: 1.6;
}

.qg-address-card__empty {
	margin: 0;
	color: var(--qg-color-muted);
	font-style: italic;
}

.qg-address-card__edit {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: auto;
	padding-top: 0.4rem;
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--qg-color-ink);
	text-decoration: none;
	align-self: flex-start;
}

.qg-address-card__edit .qg-icon {
	width: 14px;
	height: 14px;
}

.qg-address-card__edit:hover {
	color: var(--qg-color-accent-dark);
}

/* Account details form */

.qg-account-form {
	display: flex;
	flex-direction: column;
	gap: var(--qg-space-5);
}

.qg-form-fieldset {
	background: var(--qg-color-paper);
	border: 1px solid var(--qg-color-line);
	border-radius: var(--qg-radius-lg);
	padding: var(--qg-space-5) var(--qg-space-4) var(--qg-space-4);
	margin: 0;
}

.qg-form-legend {
	font-family: var(--qg-font-heading);
	font-size: 1.15rem;
	font-weight: 500;
	padding: 0 0.4rem;
	color: var(--qg-color-ink);
}

.qg-form-row-group {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qg-space-3);
}

@media (min-width: 560px) {
	.qg-form-row-group {
		grid-template-columns: 1fr 1fr;
	}
}

.qg-form-row {
	margin: 0 0 var(--qg-space-3);
}

.qg-form-label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--qg-color-ink);
}

.qg-form-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.78rem;
	color: var(--qg-color-muted);
}

.qg-input {
	width: 100%;
	padding: 0.8rem 1rem;
	border-radius: var(--qg-radius);
	border: 1px solid var(--qg-color-line);
	background: var(--qg-color-surface);
	font-family: var(--qg-font-body);
	font-size: 0.95rem;
	color: var(--qg-color-ink);
	transition: border-color 0.2s var(--qg-ease), box-shadow 0.2s var(--qg-ease);
}

.qg-input:focus {
	outline: none;
	border-color: var(--qg-color-accent);
	box-shadow: 0 0 0 3px var(--qg-color-accent-soft);
}

.qg-form-submit {
	margin: 0;
}

@media (max-width: 767px) {
	.qg-account {
		padding-top: var(--qg-space-3);
	}

	.qg-account-hero {
		padding: var(--qg-space-4) var(--qg-space-3);
		margin-bottom: var(--qg-space-4);
	}

	.qg-account-hero__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--qg-space-3);
	}

	.qg-account-hero__avatar {
		width: 48px;
		height: 48px;
		font-size: 1.05rem;
	}

	.qg-account-hero__title {
		font-size: 1.2rem;
		margin-bottom: 0.15rem;
	}

	.qg-account-hero__subtitle {
		display: none;
	}

	.qg-account-hero__actions {
		width: 100%;
	}

	.qg-account-hero__actions .qg-btn {
		flex: 1;
		justify-content: center;
		padding: 0.6rem 0.75rem;
		font-size: 0.82rem;
	}

	.qg-account-layout {
		gap: var(--qg-space-3);
	}

	.qg-account-sidebar {
		padding: 0.35rem;
	}

	.qg-account-nav__link {
		padding: 0.6rem 0.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qg-account-nav__link,
	.qg-account-nav__link::before,
	.qg-order-row,
	.qg-address-card,
	.qg-input {
		transition: none;
	}
}