/* =====================================================================
 * MY ACCOUNT — the templates in zzf-base/woocommerce/myaccount/
 * ---------------------------------------------------------------------
 * Separate from account.css, which dresses WooCommerce's OWN markup (the
 * login screen, edit-account, edit-address, order-details). Those forms are
 * still stock and must keep working if these templates are ever deleted.
 * This file styles only what those six templates emit.
 *
 * THE MESH RULE APPLIES AND IT DECIDES ALMOST EVERYTHING HERE.
 * Glass is for marketing surfaces. This page is nothing but data — order
 * numbers, totals, addresses, statuses — so it is clinical throughout:
 * flat fills, hairlines, no backdrop-filter. The account header rendered by
 * account.css is the ONE glass surface on the page and it stays that way.
 * If a card here starts to glow, a lot number stops reading as a lot number.
 *
 * The page sits on the shared fixed aurora field like every other template,
 * so nothing in here paints a page background. A private background is what
 * would make this the one page that looks detached from the rest of the site.
 * ================================================================== */

.zzf-account-page {
	--zzf-a-line:    var(--wp--preset--color--line, #E3EBF6);
	--zzf-a-ink:     var(--wp--preset--color--contrast, #0B1B36);
	--zzf-a-muted:   var(--wp--preset--color--muted, #3E4E70);
	--zzf-a-accent:  var(--wp--preset--color--accent, #14346E);
	--zzf-a-surface: var(--wp--preset--color--surface, #FAFCFF);
	--zzf-a-tint:    var(--wp--preset--color--surface-2, #E9F1FC);
	--zzf-a-r:       14px;
	--zzf-a-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--zzf-a-ease:    cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------------
 * 1. SHELL
 * Navigation beside content on desktop, stacked below 900px. Woo's stock
 * layout floats the nav left, which breaks the moment the content column
 * is taller than the float.
 * ------------------------------------------------------------------ */
.zzf-acct {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: start;
	/* The account page renders inside .entry-content.alignfull, which is the
	   full viewport — measured 1513px at x=0 on the live page, so the header
	   bar ran edge to edge with square corners while every other page on the
	   site sits inside the gutter. Constrained here rather than on the parent
	   because the parent is Woo's and is shared with the notices wrapper. */
	max-width: var(--zzf-wide, 1440px);
	margin: 0 auto 48px;
	padding-inline: var(--zzf-gutter, clamp(20px, 4.2vw, 64px));
	box-sizing: border-box;
}
/* The greeting spans both columns (account.css sets grid-column: 1 / -1);
   round it so it reads as the same family of card as everything under it. */
.zzf-account-page .zzf-acct__head { border-radius: var(--zzf-a-r); }
@media (min-width: 900px) {
	.zzf-acct { grid-template-columns: 232px minmax(0, 1fr); gap: 28px; }
}
/* minmax(0,1fr) above is load-bearing: a grid track defaults to min-content,
   so one long unbroken order number would push the column wider than the
   page instead of the cell scrolling. */
.zzf-acct__content { min-width: 0; }

/* ---------------------------------------------------------------------
 * 2. NAVIGATION
 * ------------------------------------------------------------------ */
.zzf-acctnav ul {
	list-style: none;
	margin: 0;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--zzf-a-line);
	border-radius: var(--zzf-a-r);
}

@media (min-width: 900px) {
	/* Sticky, clearing the site header (z-50) and the ticker below it. Carried
	   over from the nav this replaced — on a long order history the menu
	   scrolling away is the difference between two clicks and a scroll back
	   to the top. 96px is measured, not guessed: 76px header + the ticker. */
	.zzf-acctnav ul { position: sticky; top: 96px; }
}
.zzf-acctnav li { margin: 0; }
.zzf-acctnav li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--zzf-a-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;   /* reserved so hover cannot shift layout */
	transition: background .2s var(--zzf-a-ease), color .2s var(--zzf-a-ease), border-color .2s var(--zzf-a-ease);
}
.zzf-acctnav li a:hover,
.zzf-acctnav li a:focus-visible {
	background: var(--zzf-a-tint);
	color: var(--zzf-a-ink);
	border-color: var(--zzf-a-line);
	outline: none;
}
.zzf-acctnav li.is-active a {
	background: var(--zzf-a-accent);
	color: #fff;
	border-color: var(--zzf-a-accent);
	font-weight: 600;
}
/* ---------------------------------------------------------------------
 * WOOCOMMERCE OVERRIDES — measured, not guessed.
 *
 * Woo styles its own nav classes from two stylesheets that both load after
 * this file, and it wins on specificity, not order:
 *
 *   woocommerce-layout.css      .woocommerce-account .woocommerce-MyAccount-navigation
 *                               { float: left; width: 30% }              (0,2,0)
 *   woocommerce-blocktheme.css  ...-navigation ul  { padding: 0; margin: 0 0 2em }
 *                               ...-navigation li  { padding: 1em 0 }    (0,2,1)
 *
 * On the live page 2026-08-20 that made the nav 69.6px wide — 30% of its own
 * 232px grid track — with no padding on the card, 1em of space above and
 * below every row, and "Account details" wrapped onto two lines. It looked
 * like the stylesheet had not loaded. It had; it was outranked.
 *
 * The class is doubled to clear all of them at once, the same move CLAUDE.md
 * records for .alignwide.alignwide. DO NOT collapse the duplication — the
 * single-class version loses to woocommerce-layout.css again, silently, and
 * the failure looks like a broken build rather than a cascade problem.
 * ------------------------------------------------------------------ */
.zzf-account-page .zzf-acctnav.zzf-acctnav {
	float: none;
	width: auto;
	margin: 0;
}
.zzf-account-page .zzf-acctnav.zzf-acctnav ul {
	padding: 6px;
	margin: 0;
}
.zzf-account-page .zzf-acctnav.zzf-acctnav li,
.zzf-account-page .zzf-acctnav.zzf-acctnav li:first-child {
	padding: 0;
	margin: 0;
	border: 0;
}
.zzf-account-page .zzf-acctnav.zzf-acctnav li a {
	white-space: nowrap;
}
/* Woo's smallscreen sheet also forces width on the content column. */
.zzf-account-page .woocommerce-MyAccount-content.woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.zzf-acctnav__ico { display: inline-flex; flex: 0 0 auto; }
.zzf-acctnav__ico svg { width: 16px; height: 16px; }
.zzf-acctnav__label { flex: 1; min-width: 0; }
.zzf-acctnav__badge {
	flex: 0 0 auto;
	font-family: var(--zzf-a-mono);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--zzf-a-tint);
	color: var(--zzf-a-accent);
}
.zzf-acctnav li.is-active .zzf-acctnav__badge { background: rgba(255, 255, 255, .22); color: #fff; }

/* Mobile disclosure. The trigger is hidden on desktop; below 900px the list
   collapses and the trigger opens it. Every <button> here declares its own
   hover — a bare button:hover is exactly the vacuum a theme fills. */
.zzf-acctnav__trigger { display: none; }
@media (max-width: 899px) {
	.zzf-acctnav__trigger {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 11px 14px;
		border-radius: var(--zzf-a-r);
		border: 1px solid var(--zzf-a-line);
		background: rgba(255, 255, 255, .82);
		color: var(--zzf-a-ink);
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		text-align: left;
		cursor: pointer;
		transition: border-color .2s var(--zzf-a-ease), background .2s var(--zzf-a-ease);
	}
	.zzf-acctnav__trigger:hover,
	.zzf-acctnav__trigger:focus-visible {
		background: #fff;
		border-color: var(--zzf-a-accent);
		outline: none;
	}
	.zzf-acctnav__trigger-ico { display: inline-flex; color: var(--zzf-a-accent); }
	.zzf-acctnav__trigger-ico svg { width: 17px; height: 17px; }
	.zzf-acctnav__trigger-label { flex: 1; min-width: 0; }
	.zzf-acctnav__chev { flex: 0 0 auto; color: var(--zzf-a-muted); transition: transform .28s var(--zzf-a-ease); }
	.zzf-acctnav__trigger[aria-expanded="true"] .zzf-acctnav__chev { transform: rotate(180deg); }

	/* Collapsed by default only once JS has taken over — see the
	   .zzf-acctnav--js gate. Without JS the full list stays visible, which
	   is a longer page but never an unreachable menu. */
	.zzf-acctnav--js ul { display: none; margin-top: 8px; }
	.zzf-acctnav--js.is-open ul { display: flex; }
}

/* ---------------------------------------------------------------------
 * 3. PANELS + SHARED BITS
 * ------------------------------------------------------------------ */
.zzf-panel {
	background: #fff;
	border: 1px solid var(--zzf-a-line);
	border-radius: var(--zzf-a-r);
	padding: 22px 24px;
}
.zzf-panel__hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.zzf-panel__eyebrow {
	font-family: var(--zzf-a-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--zzf-a-muted);
	margin: 0 0 14px;
}
.zzf-panel__hdr .zzf-panel__eyebrow { margin: 0; }

.zzf-acct__lede { color: var(--zzf-a-muted); font-size: 15px; margin: 0 0 18px; }

.zzf-acct__empty { text-align: center; padding: 28px 16px; color: var(--zzf-a-muted); }
.zzf-acct__empty--lg { padding: 56px 20px; }
.zzf-acct__empty p { margin: 0 0 8px; }
.zzf-acct__empty a { color: var(--zzf-a-accent); font-weight: 600; text-decoration: none; }
.zzf-acct__empty a:hover { text-decoration: underline; }

.zzf-acct__linkbtn {
	border: none; background: none; padding: 0; cursor: pointer;
	font: inherit; font-weight: 600; color: var(--zzf-a-accent);
}
.zzf-acct__linkbtn:hover, .zzf-acct__linkbtn:focus-visible { text-decoration: underline; outline: none; }

.zzf-acct__back {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--zzf-a-muted); font-size: 14px; font-weight: 600;
	text-decoration: none; margin: 0 0 16px;
	transition: color .2s var(--zzf-a-ease);
}
.zzf-acct__back:hover { color: var(--zzf-a-accent); }

/* Button sizes layered on account.css's .zzf-acct__btn base. */
.zzf-acct__btn--sm { padding: 8px 14px; font-size: 13px; }
.zzf-acct__btn--xs { padding: 6px 11px; font-size: 12px; }
.zzf-acct__btn--primary { background: var(--zzf-a-accent); color: #fff; border-color: var(--zzf-a-accent); }
.zzf-acct__btn--primary:hover { background: var(--zzf-a-ink); border-color: var(--zzf-a-ink); color: #fff; }
.zzf-acct__btn--logout { margin-left: auto; }
.zzf-acct__btn svg { flex: 0 0 auto; }

/* ---------------------------------------------------------------------
 * 4. STATUS BADGE
 * Colour by class, never inline — these have to survive a palette change.
 * Every pair is checked against its own fill, not against the page.
 * ------------------------------------------------------------------ */
.zzf-badge {
	display: inline-flex; align-items: center;
	font-family: var(--zzf-a-mono);
	font-size: 11px; font-weight: 600; line-height: 1;
	letter-spacing: .06em; text-transform: uppercase;
	padding: 5px 9px; border-radius: 999px;
	border: 1px solid; white-space: nowrap;
}
.zzf-badge--completed  { color: #14346E; background: #E9F1FC; border-color: #C5D8F2; }
.zzf-badge--processing { color: #14603A; background: #E4F5EC; border-color: #BFE3CE; }
.zzf-badge--on-hold    { color: #7A5310; background: #FBF1DC; border-color: #EBD7A8; }
.zzf-badge--pending    { color: #6B4E12; background: #FAF3E2; border-color: #E8DAB2; }
.zzf-badge--cancelled,
.zzf-badge--failed     { color: #8C1226; background: #FBE9EC; border-color: #F0C6CE; }
.zzf-badge--refunded,
.zzf-badge--default    { color: #3E4E70; background: #EEF2F8; border-color: #D8E0EC; }

/* ---------------------------------------------------------------------
 * 5. DASHBOARD
 * ------------------------------------------------------------------ */
.zzf-dash__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}
.zzf-dash__stat {
	position: relative;
	display: block;
	padding: 18px 18px 16px;
	background: #fff;
	border: 1px solid var(--zzf-a-line);
	border-radius: var(--zzf-a-r);
	text-decoration: none;
	color: var(--zzf-a-ink);
	transition: transform .28s var(--zzf-a-ease), border-color .28s var(--zzf-a-ease), box-shadow .28s var(--zzf-a-ease);
}
@media (hover: hover) and (pointer: fine) {
	.zzf-dash__stat:hover {
		transform: translate3d(0, -2px, 0);
		border-color: #C5D8F2;
		box-shadow: 0 14px 34px -18px rgba(11, 27, 54, .30);
	}
}
.zzf-dash__stat:focus-visible { outline: 2px solid var(--zzf-a-accent); outline-offset: 3px; }
.zzf-dash__stat-ico {
	position: absolute; top: 14px; right: 14px;
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 9px;
	background: var(--zzf-a-tint);
	color: var(--zzf-a-accent);
}
.zzf-dash__stat-n {
	display: block;
	/* NOT mono, and this is the one deliberate exception to the house rule
	   that figures are monospace. On Windows the mono stack resolves to
	   Consolas, whose zero is SLASHED — at 30px a stat reading "0" looked
	   like a rendering fault rather than a number. Mono earns its place on
	   order numbers, lots and totals, where it reads as instrument output at
	   13px. A headline count is not instrument output. tabular-nums still
	   applies from .zzf-stat__n, so the count-up cannot make it jitter. */
	font-family: var(--wp--preset--font-family--body, 'Outfit', system-ui, sans-serif);
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--zzf-a-ink);
	padding-right: 40px;   /* keeps a long figure clear of the icon chip */
	margin-bottom: 8px;
}
.zzf-dash__stat-l {
	display: block;
	font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--zzf-a-muted);
}
@media (max-width: 640px) {
	/* At ~105px per card the corner chip lands on top of the figure. Put it
	   back in flow and centre the whole card instead of shrinking type. */
	.zzf-dash__stats { gap: 8px; }
	.zzf-dash__stat { padding: 14px 8px; text-align: center; }
	.zzf-dash__stat-ico { position: static; margin: 0 auto 9px; }
	.zzf-dash__stat-n { font-size: 20px; padding-right: 0; }
	.zzf-dash__stat-l { font-size: 10px; letter-spacing: .07em; }
}

.zzf-dash__grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1040px) { .zzf-dash__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); } }

/* Shortcuts */
.zzf-shortcuts { display: flex; flex-direction: column; gap: 6px; }
.zzf-short {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 12px; border-radius: 11px;
	border: 1px solid transparent;
	color: var(--zzf-a-ink); text-decoration: none;
	transition: background .2s var(--zzf-a-ease), border-color .2s var(--zzf-a-ease);
}
.zzf-short:hover, .zzf-short:focus-visible { background: var(--zzf-a-surface); border-color: var(--zzf-a-line); outline: none; }
.zzf-short__ico {
	flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	background: var(--zzf-a-tint); color: var(--zzf-a-accent);
}
.zzf-short__ico svg { width: 16px; height: 16px; }
.zzf-short__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zzf-short__txt b { font-size: 14px; font-weight: 600; }
.zzf-short__txt small { font-size: 12px; color: var(--zzf-a-muted); }
.zzf-short__chev { flex: 0 0 auto; color: var(--zzf-a-muted); transition: transform .28s var(--zzf-a-ease); }
.zzf-short:hover .zzf-short__chev { transform: translateX(3px); }

/* ---------------------------------------------------------------------
 * 6. ORDERS
 * ------------------------------------------------------------------ */
.zzf-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zzf-order {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 13px 14px;
	border: 1px solid var(--zzf-a-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .24s var(--zzf-a-ease), box-shadow .24s var(--zzf-a-ease);
}
.zzf-orders--list .zzf-order { padding: 15px 16px; }
@media (hover: hover) and (pointer: fine) {
	.zzf-order:hover { border-color: #C5D8F2; box-shadow: 0 12px 30px -20px rgba(11, 27, 54, .34); }
}
.zzf-order__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.zzf-order__num  { font-family: var(--zzf-a-mono); font-size: 13px; font-weight: 600; color: var(--zzf-a-ink); }
.zzf-order__date { font-family: var(--zzf-a-mono); font-size: 12px; color: var(--zzf-a-muted); }
.zzf-order__items { font-size: 12px; color: var(--zzf-a-muted); }
.zzf-order__total {
	font-family: var(--zzf-a-mono); font-size: 14px; font-weight: 600;
	color: var(--zzf-a-ink); white-space: nowrap;
}
.zzf-order__total .woocommerce-Price-amount { font: inherit; color: inherit; }
.zzf-order__acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 600px) {
	.zzf-order { align-items: flex-start; flex-direction: column; }
	.zzf-order__acts { width: 100%; }
}

/* Search */
.zzf-ordersearch { position: relative; margin: 0 0 14px; }
.zzf-ordersearch__ico {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	color: var(--zzf-a-muted); pointer-events: none;
}
/* Styled by ID: this input sits outside any form-row Woo styles, and an ID
   beats the theme's element-level input rules without an !important. */
#zzf-ordersearch {
	width: 100%; box-sizing: border-box;
	padding: 11px 44px 11px 40px;
	border: 1px solid var(--zzf-a-line);
	border-radius: 999px;
	background: #fff;
	color: var(--zzf-a-ink);
	font: inherit; font-size: 14px;
	outline: none; appearance: none;
	transition: border-color .22s var(--zzf-a-ease), box-shadow .22s var(--zzf-a-ease);
}
#zzf-ordersearch:focus {
	border-color: var(--zzf-a-accent);
	box-shadow: 0 0 0 4px rgba(20, 52, 110, .10);
}
#zzf-ordersearch::placeholder { color: var(--zzf-a-muted); opacity: .75; }
#zzf-ordersearch::-webkit-search-cancel-button,
#zzf-ordersearch::-webkit-search-decoration { appearance: none; display: none; }
.zzf-ordersearch__clear {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	border: none; background: var(--zzf-a-tint); color: var(--zzf-a-accent);
	cursor: pointer; padding: 0;
	transition: background .18s var(--zzf-a-ease), color .18s var(--zzf-a-ease);
}
.zzf-ordersearch__clear:hover,
.zzf-ordersearch__clear:focus-visible { background: var(--zzf-a-accent); color: #fff; outline: none; }
.zzf-ordersearch__clear[hidden] { display: none; }

/* Pager */
.zzf-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--zzf-a-line); }
.zzf-pager[hidden] { display: none; }
.zzf-pager__info { font-family: var(--zzf-a-mono); font-size: 12px; color: var(--zzf-a-muted); min-width: 96px; text-align: center; }
.zzf-acct__btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------------
 * 7. TRACKING
 * ------------------------------------------------------------------ */
.zzf-track {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: 999px;
	border: 1px solid #C5D8F2; background: var(--zzf-a-tint);
	color: var(--zzf-a-accent);
	font-size: 11px; font-weight: 600; text-decoration: none;
	white-space: nowrap;
	transition: background .2s var(--zzf-a-ease);
}
.zzf-track:hover { background: #DCE8F9; }
.zzf-track__num { font-family: var(--zzf-a-mono); opacity: .85; }
.zzf-track--pending {
	border-style: dashed; border-color: #D8E0EC;
	background: transparent; color: var(--zzf-a-muted);
}

.zzf-trackcard {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 14px;
	margin: 0 0 18px; padding: 16px 18px;
	border: 1px solid var(--zzf-a-line); border-radius: var(--zzf-a-r);
	background: var(--zzf-a-surface);
}
.zzf-trackcard__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zzf-trackcard__lbl {
	font-family: var(--zzf-a-mono); font-size: 10.5px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--zzf-a-muted);
}
.zzf-trackcard__num { font-family: var(--zzf-a-mono); font-size: 15px; font-weight: 600; color: var(--zzf-a-ink); word-break: break-all; }
.zzf-trackcard__carrier { font-size: 12px; color: var(--zzf-a-muted); }
.zzf-trackcard--pending { display: block; color: var(--zzf-a-muted); font-size: 14px; border-style: dashed; }
@media (max-width: 560px) { .zzf-trackcard { flex-direction: column; align-items: stretch; } }

/* ---------------------------------------------------------------------
 * 8. VIEW ORDER + NOTES
 * ------------------------------------------------------------------ */
.zzf-vieworder__hdr { margin: 0 0 16px; }
.zzf-vieworder__num {
	font-family: var(--wp--preset--font-family--display, Marcellus, serif);
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 400; letter-spacing: -.02em; line-height: 1.1;
	margin: 0 0 8px; color: var(--zzf-a-ink);
}
.zzf-vieworder__sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 14px; color: var(--zzf-a-muted); }
.zzf-vieworder__noteshdr { margin-top: 26px; }
.zzf-notes { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zzf-note { padding: 12px 14px; border: 1px solid var(--zzf-a-line); border-radius: 12px; background: var(--zzf-a-surface); }
.zzf-note__date { display: block; font-family: var(--zzf-a-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--zzf-a-muted); margin-bottom: 5px; }
.zzf-note__body p { margin: 0; font-size: 14px; color: var(--zzf-a-ink); }

/* ---------------------------------------------------------------------
 * 9. ADDRESSES
 * ------------------------------------------------------------------ */
.zzf-addr { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .zzf-addr { grid-template-columns: 1fr 1fr; } }
.zzf-addr__card { background: #fff; border: 1px solid var(--zzf-a-line); border-radius: var(--zzf-a-r); padding: 20px 22px; }
.zzf-addr__hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zzf-addr__hdr .zzf-panel__eyebrow { margin: 0; }
.zzf-addr__body { font-style: normal; font-size: 14px; line-height: 1.8; color: var(--zzf-a-ink); }
.zzf-addr__empty { color: var(--zzf-a-muted); font-style: italic; }

/* ---------------------------------------------------------------------
 * 10. LOGOUT CONFIRM
 * Built by myaccount.js and appended to <body>, NOT nested in the page.
 * `position: fixed` is trapped by any ancestor carrying transform, filter,
 * backdrop-filter, perspective or will-change — the same rule that keeps
 * glass off .zzf-header. At body level it cannot be captured by a future
 * card animation somewhere up the tree.
 * ------------------------------------------------------------------ */
.zzf-modal {
	position: fixed; inset: 0; z-index: 9000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(11, 27, 54, .48);
	opacity: 0; pointer-events: none;
	transition: opacity .22s var(--zzf-a-ease);
}
.zzf-modal.is-open { opacity: 1; pointer-events: auto; }
.zzf-modal__box {
	width: 100%; max-width: 380px;
	background: #fff;
	border: 1px solid var(--zzf-a-line);
	border-radius: 18px;
	padding: 28px 26px;
	text-align: center;
	box-shadow: 0 30px 70px -24px rgba(11, 27, 54, .44);
	transform: translateY(10px);
	transition: transform .26s var(--zzf-a-ease);
}
.zzf-modal.is-open .zzf-modal__box { transform: none; }
.zzf-modal__title {
	font-family: var(--wp--preset--font-family--display, Marcellus, serif);
	font-size: 21px; font-weight: 400; margin: 0 0 8px; color: var(--zzf-a-ink);
}
.zzf-modal__sub { font-size: 14px; line-height: 1.6; color: var(--zzf-a-muted); margin: 0 0 22px; }
.zzf-modal__acts { display: flex; flex-direction: column; gap: 8px; }
.zzf-modal__acts .zzf-acct__btn { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------------
 * 11. REDUCED MOTION
 * Transitions collapse; the hover/focus STATES stay, because they are
 * affordances rather than motion and removing them makes the controls
 * read as inert.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.zzf-account-page * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.zzf-dash__stat:hover,
	.zzf-short:hover .zzf-short__chev { transform: none; }
}