/* ==========================================================================
   Cerbera Gallery — WooCommerce Account Pages  v1.0
   Covers: Login · Register · My Account · Orders · Addresses · Account Details
   ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────────
   Pulls the canonical site tokens (defined in the child theme style.css :root),
   with self-contained fallbacks so this file still works in isolation.
   ========================================================================== */
:root {
	--cga-bg:           var(--color-bg-subtle, #faf9f6);
	--cga-white:        var(--color-bg,        #ffffff);
	--cga-text:         var(--color-text,      #141414);
	--cga-muted:        var(--color-muted,     #737373);
	--cga-muted-2:      var(--color-faint,     #a3a3a3);
	--cga-border:       var(--color-border,    #e6e6e6);
	--cga-border-input: var(--color-border,    #e6e6e6);
	--cga-gold:         var(--color-gold,      #e2a336);
	--cga-serif:        var(--font-serif,      "Cormorant Garamond", Georgia, serif);
	--cga-sans:         var(--font-sans,       "Inter", -apple-system, system-ui, sans-serif);
	--cga-radius:       4px;
	--cga-radius-card:  8px;
	--cga-ease:         var(--transition-base, 0.22s ease);
	--cga-sidebar-w:    184px;
}

/* ── Page shell ─────────────────────────────────────────────────────────────
   Applied to both the auth pages and the account dashboard wrapper.
   ========================================================================== */
.cga-page {
	font-family: var(--cga-sans);
	color: var(--cga-text);
	background: var(--cga-bg);
	min-height: 100vh;
}
.cga-page *,
.cga-page *::before,
.cga-page *::after { box-sizing: border-box; }

/* Remove hello-elementor default section padding on account pages */
.woocommerce-account .elementor-section,
.woocommerce-account .e-con-inner { padding: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN & REGISTER
   ══════════════════════════════════════════════════════════════════════════ */

.cga-auth-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4rem 1rem 5rem;
	min-height: 100vh;
	background: var(--cga-bg);
}

.cga-auth-header {
	text-align: center;
	margin-bottom: 2rem;
}
.cga-auth-title {
	font-family: var(--cga-serif);
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 400;
	margin: 0 0 .5rem;
	line-height: 1.15;
}
.cga-auth-subtitle {
	font-size: .9375rem;
	color: var(--cga-muted);
	margin: 0;
}

/* Card */
.cga-auth-card {
	width: 100%;
	max-width: 480px;
	background: var(--cga-white);
	border: 1.5px solid var(--cga-border);
	border-radius: var(--cga-radius-card);
	padding: 2.25rem 2.5rem 2rem;
}
@media (max-width: 540px) {
	.cga-auth-card { padding: 1.5rem 1.25rem; }
}

/* Field */
.cga-field { margin-bottom: 1.125rem; }
.cga-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .875rem;
}
.cga-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: .875rem;
	font-weight: 500;
	margin-bottom: .4rem;
	color: var(--cga-text);
}
.cga-forgot {
	font-size: .8125rem;
	color: var(--cga-muted);
	text-decoration: none;
	font-weight: 400;
	transition: color var(--cga-ease);
}
.cga-forgot:hover { color: var(--cga-text); }

/* Input */
.cga-input {
	width: 100%;
	padding: .625rem .875rem;
	border: 1.5px solid var(--cga-border-input);
	border-radius: var(--cga-radius);
	font-family: var(--cga-sans);
	font-size: .9375rem;
	color: var(--cga-text);
	background: var(--cga-white);
	transition: border-color var(--cga-ease), box-shadow var(--cga-ease);
	outline: none;
	appearance: none;
}
.cga-input::placeholder { color: var(--cga-muted-2); }
.cga-input:focus {
	border-color: var(--cga-text);
	box-shadow: 0 0 0 3px rgba(26,26,26,.06);
}
.cga-input-wrap {
	position: relative;
}
.cga-input-wrap .cga-input { padding-right: 2.75rem; }

/* Password toggle */
.cga-pw-toggle {
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--cga-muted-2);
	display: flex;
	align-items: center;
	transition: color var(--cga-ease);
}
.cga-pw-toggle:hover { color: var(--cga-text); }

/* Buttons */
.cga-btn-primary {
	display: block;
	width: 100%;
	padding: .8125rem;
	background: var(--cga-text);
	color: #fff;
	border: none;
	border-radius: var(--cga-radius);
	font-family: var(--cga-sans);
	font-size: .9375rem;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--cga-ease), opacity var(--cga-ease);
	margin-top: 1.25rem;
}
.cga-btn-primary:hover { background: #000; color: #fff; }

.cga-btn-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	width: 100%;
	padding: .8125rem;
	background: var(--cga-white);
	border: 1.5px solid var(--cga-border-input);
	border-radius: var(--cga-radius);
	font-family: var(--cga-sans);
	font-size: .9375rem;
	font-weight: 500;
	color: var(--cga-text);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--cga-ease), box-shadow var(--cga-ease);
	margin-top: .75rem;
}
.cga-btn-google:hover {
	border-color: var(--cga-text);
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.cga-btn-google svg { flex-shrink: 0; }

/* OR divider */
.cga-divider {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 1.375rem 0 0;
	font-size: .8125rem;
	color: var(--cga-muted-2);
}
.cga-divider::before,
.cga-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--cga-border);
}

/* Footer text */
.cga-auth-footer {
	margin-top: 1.375rem;
	text-align: center;
	font-size: .875rem;
	color: var(--cga-muted);
}
.cga-auth-footer a {
	font-weight: 600;
	color: var(--cga-text);
	text-decoration: none;
}
.cga-auth-footer a:hover { color: var(--cga-gold); }

/* Panel toggle (login ↔ register) */
.cga-panel { display: none; }
.cga-panel.cga-panel--active { display: block; }

/* WooCommerce notices on auth page */
.cga-auth-wrap .woocommerce-notices-wrapper { width: 100%; max-width: 480px; margin-bottom: 1rem; }
.cga-auth-wrap .woocommerce-error,
.cga-auth-wrap .woocommerce-message {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	border-radius: var(--cga-radius);
	font-size: .875rem;
	list-style: none;
}
.cga-auth-wrap .woocommerce-error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.cga-auth-wrap .woocommerce-message { background: #dcfce7; border: 1px solid #86efac; color: #166534; }

/* ══════════════════════════════════════════════════════════════════════════
   MY ACCOUNT — PAGE SHELL
   ══════════════════════════════════════════════════════════════════════════ */

/* Page-level header (eyebrow + Hello, Name + tagline) */
.cga-page-header {
	padding: 2.5rem 2.25rem 1.75rem;
}
.cga-eyebrow {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cga-muted);
	margin: 0 0 .375rem;
}
.cga-hello {
	font-family: var(--cga-serif);
	font-size: clamp(1.875rem, 4vw, 2.5rem);
	font-weight: 400;
	margin: 0 0 .5rem;
	line-height: 1.15;
}
.cga-tagline {
	font-size: .9rem;
	color: var(--cga-muted);
	margin: 0;
	max-width: 60ch;
}

/* Two-column layout: sidebar + content */
.cga-layout {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	padding: 0 2.25rem 3rem;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.cga-sidebar { flex-shrink: 0; width: var(--cga-sidebar-w); }

.cga-nav { display: flex; flex-direction: column; }
.cga-nav__item {
	display: flex;
	align-items: center;
	gap: .5625rem;
	padding: .625rem .75rem;
	font-size: .875rem;
	font-weight: 400;
	color: var(--cga-text);
	text-decoration: none;
	border-radius: var(--cga-radius);
	transition: background var(--cga-ease), color var(--cga-ease);
	line-height: 1.3;
}
.cga-nav__item svg { flex-shrink: 0; color: var(--cga-muted); transition: color var(--cga-ease); }
.cga-nav__item:hover { background: var(--cga-border); }
.cga-nav__item:hover svg { color: var(--cga-text); }
.cga-nav__item.is-active { background: var(--cga-border); font-weight: 500; }
.cga-nav__item.is-active svg { color: var(--cga-text); }
.cga-nav__item--logout { color: var(--cga-muted); margin-top: .25rem; }

.cga-nav__label { flex: 1; }
.cga-nav__arrow { margin-left: auto; color: var(--cga-muted-2); }

/* Private client box */
.cga-private-client {
	margin-top: 1.75rem;
	padding: 1rem;
	background: var(--cga-white);
	border: 1.5px solid var(--cga-border);
	border-radius: var(--cga-radius);
}
.cga-private-client__label {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cga-gold);
	margin: 0 0 .5rem;
}
.cga-private-client__body {
	font-size: .8125rem;
	color: var(--cga-muted);
	margin: 0 0 .625rem;
	line-height: 1.5;
}
.cga-private-client__body strong { color: var(--cga-text); }
.cga-private-client__link {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--cga-text);
	text-decoration: none;
	transition: color var(--cga-ease);
}
.cga-private-client__link:hover { color: var(--cga-gold); }

/* ── Main content ─────────────────────────────────────────────────────── */
.cga-content { flex: 1; min-width: 0; }

/* Generic content card */
.cga-card {
	background: var(--cga-white);
	border: 1.5px solid var(--cga-border);
	border-radius: var(--cga-radius-card);
	padding: 1.75rem 2rem;
	margin-bottom: 1.25rem;
}
.cga-card-title {
	font-family: var(--cga-serif);
	font-size: 1.3125rem;
	font-weight: 400;
	margin: 0 0 1.25rem;
	line-height: 1.2;
}
.cga-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.375rem;
}
.cga-card-header .cga-card-title { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════════════════ */

.cga-dash-desc {
	font-size: .9rem;
	line-height: 1.7;
	color: var(--cga-muted);
	margin: 0 0 1.5rem;
}
.cga-dash-desc strong { color: var(--cga-text); }

/* Stat cards row */
.cga-stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 1.75rem;
}
.cga-stat-card {
	background: var(--cga-white);
	border: 1.5px solid var(--cga-border);
	border-radius: var(--cga-radius-card);
	padding: 1.125rem 1.25rem;
}
.cga-stat-card__icon { color: var(--cga-muted); margin-bottom: .5rem; }
.cga-stat-card__val {
	font-family: var(--cga-sans);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	margin-bottom: .3rem;
}
.cga-stat-card__label {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cga-muted-2);
}

/* Recent orders on dashboard */
.cga-recent-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.cga-recent-header h2 {
	font-family: var(--cga-sans);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}
.cga-recent-viewall {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--cga-muted);
	text-decoration: none;
	transition: color var(--cga-ease);
}
.cga-recent-viewall:hover { color: var(--cga-text); }

.cga-recent-order {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .875rem 0;
	border-bottom: 1px solid var(--cga-border);
}
.cga-recent-order:last-child { border-bottom: none; }
.cga-recent-order__img {
	width: 52px;
	height: 52px;
	border-radius: var(--cga-radius);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--cga-bg);
}
.cga-recent-order__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cga-recent-order__info { flex: 1; min-width: 0; }
.cga-recent-order__title {
	font-size: .9375rem;
	font-weight: 500;
	margin: 0 0 .2rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cga-recent-order__meta { font-size: .8125rem; color: var(--cga-muted); margin: 0; }
.cga-recent-order__right {
	display: flex;
	align-items: center;
	gap: .875rem;
	flex-shrink: 0;
}
.cga-recent-order__total { font-size: .9375rem; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════
   STATUS BADGES
   ══════════════════════════════════════════════════════════════════════════ */

.cga-badge {
	display: inline-block;
	padding: .2rem .625rem;
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .03em;
	white-space: nowrap;
}
.cga-badge--processing,
.cga-badge--on-hold { background: #fef3c7; color: #92400e; }
.cga-badge--shipped,
.cga-badge--out-for-delivery { background: #dbeafe; color: #1e40af; }
.cga-badge--completed { background: #dcfce7; color: #166534; }
.cga-badge--cancelled,
.cga-badge--refunded { background: #fee2e2; color: #991b1b; }
.cga-badge--pending { background: var(--cga-border); color: var(--cga-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   ORDERS LIST
   ══════════════════════════════════════════════════════════════════════════ */

.cga-orders-subtitle {
	font-size: .875rem;
	color: var(--cga-muted);
	margin: -.75rem 0 1.375rem;
}

.cga-orders-table { width: 100%; border-collapse: collapse; }
.cga-orders-table th {
	text-align: left;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cga-muted);
	padding: .5rem 0 .875rem;
	border-bottom: 1px solid var(--cga-border);
}
.cga-orders-table td {
	padding: 1rem 0;
	border-bottom: 1px solid var(--cga-border);
	font-size: .9375rem;
	vertical-align: middle;
}
.cga-orders-table tbody tr:last-child td { border-bottom: none; }
.cga-orders-table .col-order { font-weight: 500; }
.cga-orders-table .col-date  { color: var(--cga-muted); font-size: .875rem; }
.cga-orders-table .col-total { font-size: .875rem; color: var(--cga-muted); }
.cga-orders-table .col-actions { text-align: right; }

.cga-btn-view {
	display: inline-block;
	padding: .375rem .875rem;
	background: var(--cga-text);
	color: #fff;
	font-size: .8125rem;
	font-weight: 500;
	border-radius: var(--cga-radius);
	text-decoration: none;
	transition: background var(--cga-ease);
}
.cga-btn-view:hover { background: #000; color: #fff; }

.cga-orders-empty {
	text-align: center;
	padding: 3rem 0;
	color: var(--cga-muted);
	font-size: .9375rem;
}
.cga-orders-empty a { color: var(--cga-text); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════
   SINGLE ORDER VIEW
   ══════════════════════════════════════════════════════════════════════════ */

.cga-order-back {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--cga-muted);
	text-decoration: none;
	margin-bottom: 1.25rem;
	transition: color var(--cga-ease);
}
.cga-order-back:hover { color: var(--cga-text); }

/* Order header */
.cga-order-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.cga-order-num { font-size: .75rem; color: var(--cga-muted); margin: 0 0 .25rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.cga-order-id  { font-family: var(--cga-serif); font-size: 1.625rem; font-weight: 400; margin: 0 0 .3rem; }
.cga-order-meta { font-size: .875rem; color: var(--cga-muted); margin: 0; }

/* Tracking banner */
.cga-tracking-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .875rem 1.125rem;
	background: var(--cga-bg);
	border: 1.5px solid var(--cga-border);
	border-radius: var(--cga-radius);
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}
.cga-tracking-bar__left { display: flex; align-items: center; gap: .75rem; }
.cga-tracking-bar__carrier { font-size: .75rem; font-weight: 600; color: var(--cga-muted); }
.cga-tracking-bar__num { font-size: .875rem; font-weight: 500; }
.cga-tracking-bar__eta { font-size: .8125rem; color: var(--cga-muted); }
.cga-btn-track {
	padding: .4375rem .875rem;
	background: var(--cga-text);
	color: #fff;
	font-size: .8125rem;
	font-weight: 500;
	border-radius: var(--cga-radius);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--cga-ease);
}
.cga-btn-track:hover { background: #000; color: #fff; }

/* Order items */
.cga-order-items { margin-bottom: 0; }
.cga-order-item {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--cga-border);
}
.cga-order-item:last-child { border-bottom: none; }
.cga-order-item__img {
	width: 64px;
	height: 64px;
	border-radius: var(--cga-radius);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--cga-bg);
}
.cga-order-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cga-order-item__name { font-weight: 500; margin: 0 0 .2rem; }
.cga-order-item__artist { font-size: .8125rem; color: var(--cga-muted); margin: 0; }
.cga-order-item__price {
	margin-left: auto;
	font-size: .9375rem;
	font-weight: 500;
	flex-shrink: 0;
}

/* Totals */
.cga-order-totals { width: 100%; margin-top: .5rem; }
.cga-order-totals tr td { padding: .375rem 0; font-size: .9rem; }
.cga-order-totals tr td:first-child { color: var(--cga-muted); text-align: right; padding-right: 1.5rem; }
.cga-order-totals tr td:last-child { text-align: right; min-width: 80px; }
.cga-order-totals .cga-total-row td { font-weight: 600; font-size: 1rem; padding-top: .625rem; }
.cga-totals-sep { border-top: 1px solid var(--cga-border); }

/* Order Timeline */
.cga-timeline-title {
	font-family: var(--cga-sans);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 1.375rem;
}
.cga-timeline { position: relative; padding-left: 1.5rem; }
.cga-timeline__step {
	position: relative;
	padding-bottom: 1.5rem;
}
.cga-timeline__step:last-child { padding-bottom: 0; }
.cga-timeline__step::before {
	content: '';
	position: absolute;
	left: -1.5rem;
	top: .5rem;
	bottom: -1px;
	width: 1px;
	background: var(--cga-border);
}
.cga-timeline__step:last-child::before { display: none; }
.cga-timeline__dot {
	position: absolute;
	left: -1.875rem;
	top: .1875rem;
	width: .75rem;
	height: .75rem;
	border-radius: 50%;
	background: var(--cga-border);
	border: 2px solid var(--cga-border);
}
.cga-timeline__step--done .cga-timeline__dot { background: var(--cga-text); border-color: var(--cga-text); }
.cga-timeline__step--done::before { background: var(--cga-text); }
.cga-timeline__label {
	font-size: .9375rem;
	font-weight: 500;
	margin: 0 0 .15rem;
}
.cga-timeline__date { font-size: .8125rem; color: var(--cga-muted); margin: 0 0 .2rem; }
.cga-timeline__note { font-size: .8125rem; color: var(--cga-muted); margin: 0; }
.cga-timeline__step--pending .cga-timeline__label { color: var(--cga-muted); font-weight: 400; }

/* Order address pair */
.cga-order-addr-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.cga-order-addr h3 {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cga-muted);
	margin: 0 0 .625rem;
}
.cga-order-addr address {
	font-style: normal;
	font-size: .9rem;
	line-height: 1.65;
	color: var(--cga-text);
}

/* Order action bar */
.cga-order-actions {
	display: flex;
	align-items: center;
	gap: .625rem;
	flex-wrap: wrap;
}
.cga-order-actions-right { margin-left: auto; }
.cga-btn-outline {
	display: inline-block;
	padding: .5rem .975rem;
	background: transparent;
	border: 1.5px solid var(--cga-border-input);
	border-radius: var(--cga-radius);
	font-family: var(--cga-sans);
	font-size: .8125rem;
	font-weight: 500;
	color: var(--cga-text);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--cga-ease), background var(--cga-ease);
}
.cga-btn-outline:hover { border-color: var(--cga-text); background: var(--cga-bg); }
.cga-help-link { font-size: .8125rem; color: var(--cga-muted); text-decoration: none; }
.cga-help-link:hover { color: var(--cga-text); }

/* ══════════════════════════════════════════════════════════════════════════
   ADDRESSES PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.cga-addr-note {
	font-size: .875rem;
	color: var(--cga-muted);
	margin: 0 0 1.375rem;
}

.cga-addr-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.cga-addr-card {
	background: var(--cga-white);
	border: 1.5px solid var(--cga-border);
	border-radius: var(--cga-radius-card);
	padding: 1.375rem 1.5rem;
}
.cga-addr-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .875rem;
}
.cga-addr-card__title {
	font-size: .9375rem;
	font-weight: 600;
	margin: 0;
}
.cga-addr-edit {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--cga-muted);
	text-decoration: none;
	transition: color var(--cga-ease);
}
.cga-addr-edit:hover { color: var(--cga-text); }

.cga-addr-body {
	font-size: .875rem;
	line-height: 1.7;
	color: var(--cga-text);
}
.cga-addr-empty {
	font-size: .875rem;
	color: var(--cga-muted-2);
	font-style: italic;
}

/* Edit address form */
.cga-edit-addr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.375rem;
}
.cga-edit-addr-title { font-family: var(--cga-serif); font-size: 1.25rem; font-weight: 400; margin: 0; }
.cga-cancel-link {
	font-size: .875rem;
	font-weight: 500;
	color: var(--cga-muted);
	text-decoration: none;
	transition: color var(--cga-ease);
}
.cga-cancel-link:hover { color: var(--cga-text); }

/* Address form grid */
.cga-form-row { display: grid; gap: .875rem; margin-bottom: .875rem; }
.cga-form-row--2 { grid-template-columns: 1fr 1fr; }
.cga-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.cga-form-row--1 { grid-template-columns: 1fr; }
.cga-form-group { display: flex; flex-direction: column; gap: .375rem; }
.cga-form-label { font-size: .875rem; font-weight: 500; color: var(--cga-text); }
.cga-form-label--optional::after { content: ' (optional)'; color: var(--cga-muted-2); font-weight: 400; }
.cga-form-input,
.cga-form-select {
	padding: .625rem .875rem;
	border: 1.5px solid var(--cga-border-input);
	border-radius: var(--cga-radius);
	font-family: var(--cga-sans);
	font-size: .9375rem;
	color: var(--cga-text);
	background: var(--cga-white);
	outline: none;
	appearance: none;
	transition: border-color var(--cga-ease), box-shadow var(--cga-ease);
	width: 100%;
}
.cga-form-input:focus,
.cga-form-select:focus {
	border-color: var(--cga-text);
	box-shadow: 0 0 0 3px rgba(26,26,26,.06);
}
.cga-form-input::placeholder { color: var(--cga-muted-2); }
/* WC injects its own selects; style them too */
.cga-edit-address-form select.country_select,
.cga-edit-address-form select.state_select {
	padding: .625rem .875rem;
	border: 1.5px solid var(--cga-border-input);
	border-radius: var(--cga-radius);
	font-family: var(--cga-sans);
	font-size: .9375rem;
	color: var(--cga-text);
	background: var(--cga-white);
	width: 100%;
	appearance: none;
	outline: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCOUNT DETAILS FORM
   ══════════════════════════════════════════════════════════════════════════ */

/* Communication preferences checkboxes */
.cga-comm-prefs { }
.cga-comm-title { font-family: var(--cga-serif); font-size: 1.25rem; font-weight: 400; margin: 0 0 .375rem; }
.cga-comm-subtitle { font-size: .875rem; color: var(--cga-muted); margin: 0 0 1.125rem; }
.cga-check-list { display: flex; flex-direction: column; gap: .625rem; }
.cga-check-item {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: .9rem;
	cursor: pointer;
}
.cga-check-item input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	border: 1.5px solid var(--cga-border-input);
	border-radius: 3px;
	flex-shrink: 0;
	accent-color: var(--cga-text);
	cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED BUTTON / FORM UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */

.cga-btn-save,
.cga-btn-save-sm {
	display: inline-block;
	padding: .625rem 1.25rem;
	background: var(--cga-text);
	color: #fff;
	border: none;
	border-radius: var(--cga-radius);
	font-family: var(--cga-sans);
	font-size: .875rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--cga-ease);
}
.cga-btn-save:hover,
.cga-btn-save-sm:hover { background: #000; }
.cga-btn-save-sm { padding: .5rem 1rem; font-size: .8125rem; }

/* WC notices inside account pages */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-info {
	padding: .75rem 1rem;
	border-radius: var(--cga-radius);
	margin-bottom: 1.25rem;
	font-size: .875rem;
	list-style: none;
	border: none;
}
.woocommerce-MyAccount-content .woocommerce-message { background: #dcfce7; color: #166534; }
.woocommerce-MyAccount-content .woocommerce-error   { background: #fee2e2; color: #991b1b; }
.woocommerce-MyAccount-content .woocommerce-info    { background: #dbeafe; color: #1e40af; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 900px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	.cga-layout { padding: 0 1.25rem 2.5rem; gap: 1.5rem; }
	.cga-page-header { padding: 2rem 1.25rem 1.25rem; }
	:root { --cga-sidebar-w: 160px; }
	.cga-stat-row { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 700px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
	/* Auth */
	.cga-auth-wrap { padding: 2.5rem 1rem 3rem; }
	.cga-field-row { grid-template-columns: 1fr; }

	/* Account layout: stack sidebar above content */
	.cga-layout { flex-direction: column; padding: 0 1rem 2rem; gap: 0; }
	.cga-page-header { padding: 1.5rem 1rem 1rem; }
	.cga-sidebar {
		width: 100%;
		margin-bottom: 1.25rem;
		/* Horizontal scrolling nav on mobile */
	}
	.cga-nav {
		flex-direction: row;
		overflow-x: auto;
		gap: .25rem;
		padding-bottom: .5rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.cga-nav::-webkit-scrollbar { display: none; }
	.cga-nav__item {
		flex-shrink: 0;
		white-space: nowrap;
		padding: .5rem .75rem;
		font-size: .8125rem;
		border: 1.5px solid var(--cga-border);
		border-radius: 999px;
	}
	.cga-nav__item svg:not(.cga-nav__arrow) { display: none; }
	.cga-nav__arrow { display: none; }
	.cga-nav__item--logout { border-color: transparent; }
	.cga-private-client { display: none; } /* Hide on mobile to save space */

	/* Cards */
	.cga-card { padding: 1.25rem 1rem; }
	.cga-stat-row { grid-template-columns: 1fr 1fr; }
	.cga-stat-row .cga-stat-card:last-child { grid-column: 1 / -1; }

	/* Orders */
	.cga-orders-table thead { display: none; }
	.cga-orders-table,
	.cga-orders-table tbody,
	.cga-orders-table tr,
	.cga-orders-table td { display: block; }
	.cga-orders-table tr {
		padding: .875rem 0;
		border-bottom: 1px solid var(--cga-border);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .375rem .875rem;
	}
	.cga-orders-table tr:last-child { border-bottom: none; }
	.cga-orders-table td { padding: 0; border: none; }
	.cga-orders-table .col-order { font-size: .9375rem; flex-basis: auto; }
	.cga-orders-table .col-date  { font-size: .8125rem; }
	.cga-orders-table .col-total { font-size: .8125rem; }
	.cga-orders-table .col-actions { margin-left: auto; }

	/* Order detail */
	.cga-order-addr-row { grid-template-columns: 1fr; }
	.cga-order-actions { flex-direction: column; align-items: flex-start; }
	.cga-order-actions-right { margin-left: 0; }
	.cga-tracking-bar { flex-direction: column; align-items: flex-start; }

	/* Address grid */
	.cga-addr-grid { grid-template-columns: 1fr; }

	/* Form grids */
	.cga-form-row--2,
	.cga-form-row--3 { grid-template-columns: 1fr; }
}