/*
 * SellKit UI — Customer pages (Licenses, Connected Websites, Downloads, Account, Affiliates, order confirmation)
 * ---------------------------------------------------------------------------
 * Owned by the customer page engineer. Only this engineer edits this file.
 * Scope every rule under your page class (e.g. .ui-page-customer ...), use tokens
 * only (no raw colours), and check light, dark and system. See
 * docs/ui-system.md.
 *
 *   1. Dashboard home            .ui-page-customer-home
 *   2. Licenses (+ renew/cancel)  .ui-page-licenses, .ui-license-flow, plan dialog
 *   3. Connected websites        .ui-page-sites
 *   4. Downloads                 .ui-page-downloads
 *   5. Account                   .ui-page-account
 *   6. Order confirmation        .ui-page-order
 *   7. Standalone pages          .ui-standalone (authorize, checkout, redeem, 404)
 */

/* Shared: page-level stacks (header → sections) */
.ui-page-customer > * + * { margin-top: var(--space-6); }
.ui-page-customer > .ui-page-header + * { margin-top: 0; }
/* Legacy style.css colours every `table td` #3c4257 (unreadable on dark): restore the token. */
.ui-page-customer .ui-table td { color: var(--foreground); }
/* A table that is the body of a card: the card draws the frame. */
.ui-page-customer .ui-card > .ui-table-wrap { border: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: transparent; }

/* ===========================================================================
 * 1. Dashboard home (shortcodes/dashboard/template.php)
 *
 * One vertical flow (.ui-home) of full-width rows. Multi-card rows are grids
 * whose cards stretch to the row height (footers pinned), so no row ends
 * ragged. Breakpoints are container queries on .ui-home, so they follow the
 * real content width (sidebar open / collapsed / off-canvas):
 *   < 40rem  one column · 40–56rem quick actions 2×2, pairs stacked
 *   ≥ 56rem  3-column track: 2/3 | 1/3 pairs, quick actions 4-up
 * ======================================================================== */
.ui-page-customer-home .ui-home {
	--home-gap: var(--space-4);
	container: ui-home / inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--home-gap);
	min-width: 0;
}
@media (min-width: 640px) { .ui-page-customer-home .ui-home { --home-gap: var(--space-6); } }
.ui-page-customer-home .ui-eyebrow { margin: 0; }
.ui-page-customer-home .ui-home-attention .ui-alert__title { margin: 0; font-size: var(--text-base); }
.ui-page-customer-home .ui-home-section { gap: var(--space-3); }

/* Status strip: one card, three linked segments with hairline dividers */
.ui-page-customer-home .ui-home-overview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
}
.ui-page-customer-home .ui-home-overview__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1-5);
	min-width: 0;
	padding: var(--space-5) var(--space-6);
	color: var(--card-foreground);
	text-decoration: none;
	transition: background-color var(--duration-fast) ease;
}
.ui-page-customer-home .ui-home-overview__item + .ui-home-overview__item { border-left: 1px solid var(--border); }
.ui-page-customer-home .ui-home-overview__item:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); color: var(--card-foreground); }
.ui-page-customer-home .ui-home-overview__item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.ui-page-customer-home .ui-home-overview__label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1-5);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--muted-foreground);
}
.ui-page-customer-home .ui-home-overview__label svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.ui-page-customer-home .ui-home-overview__value {
	display: flex;
	align-items: baseline;
	gap: var(--space-1-5);
	min-height: 2.25rem;
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: 1.5;
	letter-spacing: var(--tracking-tighter);
}
.ui-page-customer-home .ui-home-overview__value .ui-badge { align-self: center; font-size: var(--text-sm); letter-spacing: normal; }
.ui-page-customer-home .ui-home-overview__of { font-size: var(--text-base); font-weight: var(--weight-normal, 400); letter-spacing: normal; color: var(--muted-foreground); }
.ui-page-customer-home .ui-home-overview__meta { font-size: var(--text-sm); color: var(--muted-foreground); line-height: var(--leading-snug); }
@container ui-home (width < 40rem) {
	.ui-page-customer-home .ui-home-overview { grid-template-columns: minmax(0, 1fr); }
	.ui-page-customer-home .ui-home-overview__item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-1) var(--space-3);
		padding: var(--space-3) var(--space-4);
		min-height: var(--touch-target);
	}
	.ui-page-customer-home .ui-home-overview__item + .ui-home-overview__item { border-left: 0; border-top: 1px solid var(--border); }
	.ui-page-customer-home .ui-home-overview__value { grid-row: span 2; grid-column: 2; grid-row-start: 1; justify-content: flex-end; min-height: 0; font-size: var(--text-xl); }
	.ui-page-customer-home .ui-home-overview__of { display: none; }
}

/* Quick actions: 4-up → 2×2 → 1-up (always four cards) */
.ui-page-customer-home .ui-home-actions {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}
@container ui-home (width >= 34rem) { .ui-page-customer-home .ui-home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@container ui-home (width >= 56rem) {
	.ui-page-customer-home .ui-home-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ui-page-customer-home .ui-home-actions a.ui-card.ui-shortcut { flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
	.ui-page-customer-home .ui-home-actions .ui-shortcut__arrow { position: absolute; top: var(--space-5); right: var(--space-5); margin: 0; }
	.ui-page-customer-home .ui-home-actions .ui-shortcut__body { padding-top: 0; }
}

/* Card rows (licenses | release, articles | shortcuts) */
.ui-page-customer-home .ui-home-row {
	display: grid;
	gap: var(--home-gap);
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}
@container ui-home (width >= 56rem) {
	.ui-page-customer-home .ui-home-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ui-page-customer-home .ui-home-row > :first-child { grid-column: span 2; }
}
.ui-page-customer-home .ui-home-row > :only-child { grid-column: 1 / -1; }
.ui-page-customer-home .ui-home-panel { min-height: 100%; }
.ui-page-customer-home .ui-home-panel > .ui-card__footer { margin-top: auto; flex-wrap: wrap; justify-content: flex-end; }
.ui-page-customer-home .ui-home-panel > .ui-card__footer > .ui-text-sm { margin-right: auto; }
.ui-page-customer-home .ui-home-panel > .ui-card__header + .ui-list-rows { margin-top: var(--space-4); }
.ui-page-customer-home .ui-home-panel__empty { display: flex; align-items: center; justify-content: center; }
.ui-page-customer-home .ui-home-panel__empty .ui-empty--plain { padding: var(--space-4) 0; }

/* Licenses list */
.ui-page-customer-home .ui-home-licenses__list { border-top: 1px solid var(--border); }
.ui-page-customer-home .ui-home-licenses__list .ui-list-row { padding-left: var(--space-6); padding-right: var(--space-6); }
.ui-page-customer-home .ui-home-licenses__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1-5); }
/* The "·" sits in a 1rem slot before the sites count; the row is shifted left
   by one slot and clipped there, so a wrapped line never starts or ends on a dot. */
.ui-page-customer-home .ui-home-licenses__meta { column-gap: 0; margin-left: -1rem; clip-path: inset(0 0 0 1rem); }
.ui-page-customer-home .ui-home-licenses__meta > * { margin-left: 1rem; }
.ui-page-customer-home .ui-home-licenses__sites { position: relative; white-space: nowrap; }
.ui-page-customer-home .ui-home-licenses__sites::before { content: "·"; position: absolute; left: -1rem; width: 1rem; text-align: center; }
.ui-page-customer-home .ui-home-licenses__list .ui-badge { flex-shrink: 0; }

/* Latest release */
.ui-page-customer-home .ui-home-release__date { white-space: nowrap; }
/* Monochrome (coloured tiles are for the quick actions only), same tile as Downloads. */
.ui-page-customer-home .ui-home-release__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--muted);
	color: var(--foreground);
}
.ui-page-customer-home .ui-home-release__icon svg { width: 1.125rem; height: 1.125rem; }
.ui-page-customer-home .ui-home-release__icon svg path { stroke: currentColor; }
.ui-page-customer-home .ui-home-release__label { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--foreground); }
.ui-page-customer-home .ui-home-release__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--muted-foreground);
}
.ui-page-customer-home .ui-home-release__list li {
	position: relative;
	display: -webkit-box;
	padding-left: var(--space-4);
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ui-page-customer-home .ui-home-release__list li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.55em;
	width: 0.3125rem;
	height: 0.3125rem;
	border-radius: var(--radius-full);
	background: currentColor;
}
.ui-page-customer-home .ui-home-release__list li + li { margin-top: var(--space-2); }

/* Link lists: hairline above every row; articles in two columns when wide */
.ui-page-customer-home .ui-home-links > li { border-top: 1px solid var(--border); }
.ui-page-customer-home .ui-home-links .ui-list-row { padding-left: var(--space-6); padding-right: var(--space-6); }
.ui-page-customer-home .ui-home-links__title { font-weight: var(--weight-medium); }
/* Two-line article titles: keep the icon on the first line, not centred. */
.ui-page-customer-home .ui-home-topics__list .ui-list-row { align-items: flex-start; }
.ui-page-customer-home .ui-home-topics__list .ui-list-row__trail { margin-top: 2px; }
@container ui-home (width >= 40rem) {
	.ui-page-customer-home .ui-home-topics__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ui-page-customer-home .ui-home-topics__list > li:nth-child(even) { border-left: 1px solid var(--border); }
}
@container ui-home (40rem <= width < 56rem) {
	.ui-page-customer-home .ui-home-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ui-page-customer-home .ui-home-more > li:nth-child(even) { border-left: 1px solid var(--border); }
}
@media (max-width: 639px) {
	.ui-page-customer-home .ui-home-licenses__list .ui-list-row,
	.ui-page-customer-home .ui-home-links .ui-list-row { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ===========================================================================
 * 2. Licenses (shortcodes/licenses/*, partials/invoices.php, partials/plan-chooser.php)
 * ======================================================================== */
.ui-page-licenses .ui-licenses { gap: var(--space-3); }

/* Equal-height license cards: 1 → 2 columns by container width */
.ui-page-licenses .ui-license-grid {
	container: ui-licenses / inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) { .ui-page-licenses .ui-license-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.ui-page-licenses .ui-license-grid > .ui-license:only-child { grid-column: 1 / -1; }
.ui-page-licenses .ui-license.is-inactive { background: color-mix(in srgb, var(--muted) 35%, var(--card)); }
.ui-page-licenses .ui-license__header { align-items: flex-start; }
.ui-page-licenses .ui-license__heading { min-width: 0; }
.ui-page-licenses .ui-license__header .ui-badge { flex-shrink: 0; margin-top: 2px; }

.ui-page-licenses .ui-license__facts { margin: 0; display: flex; flex-direction: column; }
.ui-page-licenses .ui-license__fact {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: var(--space-1) var(--space-4);
	align-items: baseline;
	padding: var(--space-2-5, 0.625rem) 0;
	border-top: 1px solid var(--border);
}
.ui-page-licenses .ui-license__fact:first-child { border-top: 0; padding-top: 0; }
.ui-page-licenses .ui-license__fact:last-child { padding-bottom: 0; }
.ui-page-licenses .ui-license__fact dt { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-page-licenses .ui-license__fact dd { margin: 0; min-width: 0; color: var(--foreground); }
.ui-page-licenses .ui-license__fact--sites dd { display: flex; flex-direction: column; gap: var(--space-1-5); }
.ui-page-licenses .ui-license__fact--sites .ui-progress { max-width: 14rem; }
.ui-page-licenses .ui-license__key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-page-licenses .ui-license__key-value { letter-spacing: 0.02em; white-space: nowrap; }
.ui-page-licenses .ui-license__footer { flex-wrap: wrap; justify-content: space-between; }
/* Ghost link: its icon lines up with the card text above (cancel the button padding). */
.ui-page-licenses .ui-license__footer > .ui-btn--ghost:first-child { margin-left: calc(-1 * var(--space-3)); }
.ui-page-licenses .ui-license__actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.ui-page-licenses .ui-license__actions:empty { display: none; }
.ui-page-licenses .ui-licenses__note { margin: 0; }
@media (max-width: 479px) {
	.ui-page-licenses .ui-license__fact { grid-template-columns: minmax(0, 1fr); }
}

/* Invoices card */
.ui-page-licenses .ui-invoices__empty { margin: 0; }
.ui-page-licenses .ui-invoices .ui-table td.ui-table__actions .ui-btn svg { width: 0.875rem; height: 0.875rem; }

/* Error state (render_error): back link above the alert */
.ui-page-licenses .ui-licenses-back { margin-bottom: var(--space-4); }

/* Renew / cancel / detail sub-views */
.ui-page-licenses .ui-license-flow { max-width: var(--container-narrow); margin-inline: auto; }
.ui-page-licenses .ui-license-flow > * + * { margin-top: var(--space-6); }
.ui-page-licenses .ui-license-flow > .ui-page-header + * { margin-top: 0; }
.ui-page-licenses .ui-license-summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.ui-page-licenses .ui-license-summary__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--foreground); }
.ui-page-licenses .ui-license-summary__meta { margin: var(--space-1) 0 0; color: var(--muted-foreground); }
.ui-page-licenses .ui-license-flow__subtitle { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--foreground); }
.ui-page-licenses .ui-license-flow__list { margin: 0; padding-left: 1.125rem; color: var(--muted-foreground); line-height: var(--leading-normal); }
.ui-page-licenses .ui-license-flow__list li + li { margin-top: var(--space-1-5); }
.ui-page-licenses .ui-license-flow__confirm { align-items: flex-start; }
.ui-page-licenses .ui-license-flow__legal { margin: 0; }
/* subscription.js prepends its response alert to the form (the card) */
.ui-page-licenses .ui-license-flow form > .js__form-ajax-response { margin: var(--space-5) var(--space-6) 0; }
@media (max-width: 639px) {
	.ui-page-licenses .ui-license-flow form > .js__form-ajax-response { margin: var(--space-4) var(--space-4) 0; }
	.ui-page-licenses .ui-license-flow .ui-form-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* "Choose a plan" dialog (partials/plan-chooser.php): uniform compact cards */
.ui-plan-dialog .ui-plan-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ui-plan-dialog .ui-plan {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--card);
}
.ui-plan-dialog .ui-plan__name { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--foreground); }
.ui-plan-dialog .ui-plan__note { margin: calc(var(--space-2) * -1) 0 0; font-size: var(--text-sm); color: var(--muted-foreground); line-height: var(--leading-snug); }
.ui-plan-dialog .ui-plan__facts { display: flex; flex-direction: column; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--foreground); }
.ui-plan-dialog .ui-plan__facts li { display: flex; align-items: center; gap: var(--space-2); }
.ui-plan-dialog .ui-plan__facts svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); }
.ui-plan-dialog .ui-plan__cta { margin-top: auto; }
.ui-plan-dialog .ui-dialog__footer { justify-content: space-between; }
.ui-plan-dialog .ui-dialog__footer .ui-btn--link svg { width: 0.875rem; height: 0.875rem; }
@media (max-width: 639px) {
	.ui-plan-dialog .ui-plan-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
 * 3. Connected websites (shortcodes/registered_websites/*, partials/registered-sites.php)
 * ======================================================================== */
.ui-page-sites .ui-sites__site { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-page-sites .ui-sites__domain {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	max-width: 100%;
	font-weight: var(--weight-medium);
	color: var(--foreground);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.ui-page-sites .ui-sites__domain svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--muted-foreground); }
.ui-page-sites .ui-sites__domain:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-page-sites .ui-sites__license { display: flex; flex-direction: column; gap: 2px; }
.ui-page-sites .ui-sites__table td { vertical-align: middle; }
.ui-page-sites .ui-card__title .ui-badge { margin-left: var(--space-1-5); vertical-align: 2px; }
#sellkit-website-deactivate-modal .ui-sites__dialog-site {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--muted);
	color: var(--foreground);
	overflow-wrap: anywhere;
}
#sellkit-website-deactivate-modal .ui-sites__dialog-site svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted-foreground); }
#sellkit-website-deactivate-modal .ui-sites__dialog-error { margin: 0; }

/* ===========================================================================
 * 4. Downloads (shortcodes/downloads/template.php)
 * ======================================================================== */
.ui-page-downloads .ui-download-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) { .ui-page-downloads .ui-download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.ui-page-downloads .ui-download__header { align-items: center; }
.ui-page-downloads .ui-download__heading { flex: 1 1 auto; min-width: 0; }
.ui-page-downloads .ui-download__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--muted);
	color: var(--foreground);
}
.ui-page-downloads .ui-download__icon svg { width: 1.25rem; height: 1.25rem; }
.ui-page-downloads .ui-download__header .ui-badge { flex-shrink: 0; }
.ui-page-downloads .ui-download__body > p { margin: 0; }
.ui-page-downloads .ui-download__notes-label { margin: var(--space-4) 0 var(--space-2) !important; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--foreground); }
.ui-page-downloads .ui-download__notes { margin: 0; padding-left: 1.125rem; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--muted-foreground); }
.ui-page-downloads .ui-download__notes li + li { margin-top: var(--space-1-5); }
.ui-page-downloads .ui-download__footer { justify-content: flex-end; flex-wrap: wrap; }
.ui-page-downloads .ui-download__footer .ui-btn--ghost svg { width: 0.875rem; height: 0.875rem; }
.ui-page-downloads .ui-download--locked { border-style: dashed; background: color-mix(in srgb, var(--muted) 35%, var(--card)); }
.ui-page-downloads .ui-download--locked .ui-download__icon { background: transparent; color: var(--muted-foreground); }
.ui-page-downloads .ui-downloads-help .ui-card__header { padding-bottom: var(--space-5); }

/* ===========================================================================
 * 5. Account (shortcodes/account/template.php): vertical tabs + setting rows
 * ======================================================================== */
.ui-page-account .ui-acct { max-width: 64rem; }
.ui-page-account .ui-acct-header { display: flex; align-items: center; gap: var(--space-4); }
.ui-page-account .ui-acct-header .ui-avatar { --avatar-size: 3.5rem; }
.ui-page-account .ui-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ui-page-account .ui-acct-header .ui-page-header__description { overflow-wrap: anywhere; }

.ui-page-account .ui-acct-tabs.ui-tabs {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	align-items: start;
	gap: var(--space-8);
}
.ui-page-account .ui-acct-tabs .ui-tabs__list {
	position: sticky;
	top: var(--space-6);
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	padding: 0;
	gap: 2px;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.ui-page-account .ui-acct-tabs .ui-tabs__trigger {
	justify-content: flex-start;
	gap: var(--space-2);
	height: var(--control-h);
	padding: 0 var(--space-3);
	border-color: transparent;
	color: var(--muted-foreground);
}
.ui-page-account .ui-acct-tabs .ui-tabs__trigger:hover { background: color-mix(in srgb, var(--muted) 70%, transparent); color: var(--foreground); }
.ui-page-account .ui-acct-tabs .ui-tabs__trigger[aria-selected="true"] { background: var(--muted); border-color: transparent; box-shadow: none; color: var(--foreground); }
.ui-page-account .ui-acct-tabs .ui-tabs__trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-page-account .ui-acct-tabs .ui-tabs__panel { min-width: 0; }

.ui-page-account .ui-acct-card { margin: 0; }
.ui-page-account .ui-acct-card__header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.ui-page-account .ui-acct-rows { margin: 0; padding: 0 var(--space-6); }
.ui-page-account .ui-acct-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	align-items: start;
	gap: var(--space-3) var(--space-8);
	margin: 0;
	padding: var(--space-5) 0;
	min-width: 0;
}
.ui-page-account .ui-acct-row + .ui-acct-row { border-top: 1px solid var(--border); }
.ui-page-account .ui-acct-row__text { min-width: 0; padding-top: var(--space-2); }
.ui-page-account .ui-acct-row__label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--foreground);
	line-height: var(--leading-snug);
}
.ui-page-account .ui-acct-row__help { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--muted-foreground); line-height: var(--leading-snug); }
.ui-page-account .ui-acct-row__control { min-width: 0; }
.ui-page-account .ui-acct-row__control .ui-input { max-width: none; width: 100%; }
.ui-page-account .ui-acct-row__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ui-page-account .ui-acct-row__pair .ui-label { font-size: var(--text-sm); color: var(--muted-foreground); font-weight: var(--weight-normal, 400); }
.ui-page-account .ui-acct-row__pair .ui-field { gap: var(--space-1); }
.ui-page-account .ui-acct-row--inline { align-items: center; }
.ui-page-account .ui-acct-row--inline .ui-acct-row__text { padding-top: 0; }
.ui-page-account .ui-acct-row--inline .ui-acct-row__control { display: flex; justify-content: flex-end; }
.ui-page-account .ui-acct-photo { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.ui-page-account .ui-acct-photo .ui-avatar { --avatar-size: 2.5rem; }
.ui-page-account .ui-acct-photo .ui-btn svg { width: 0.875rem; height: 0.875rem; }
.ui-page-account .ui-acct-card .js__form-ajax-response { margin: 0 var(--space-6) var(--space-5); max-width: none; }
.ui-page-account .ui-acct-card__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-6);
	border-top: 1px solid var(--border);
	background: color-mix(in srgb, var(--muted) 45%, transparent);
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
@media (max-width: 899px) {
	.ui-page-account .ui-acct-tabs.ui-tabs { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.ui-page-account .ui-acct-tabs .ui-tabs__list { position: static; flex-direction: row; overflow-x: auto; width: auto; }
	.ui-page-account .ui-acct-tabs .ui-tabs__trigger { flex: 0 0 auto; }
	.ui-page-account .ui-acct-row { grid-template-columns: minmax(0, 1fr); }
	.ui-page-account .ui-acct-row__text { padding-top: 0; }
	.ui-page-account .ui-acct-row--inline .ui-acct-row__control,
	.ui-page-account .ui-acct-photo { justify-content: flex-start; }
}
@media (max-width: 639px) {
	.ui-page-account .ui-acct-card__header,
	.ui-page-account .ui-acct-card__footer { padding-left: var(--space-4); padding-right: var(--space-4); }
	.ui-page-account .ui-acct-rows { padding: 0 var(--space-4); }
	.ui-page-account .ui-acct-card .js__form-ajax-response { margin: 0 var(--space-4) var(--space-4); }
	.ui-page-account .ui-acct-row__pair { grid-template-columns: minmax(0, 1fr); }
	.ui-page-account .ui-acct-header .ui-avatar { --avatar-size: 3rem; }
	.ui-page-account .ui-acct-card__footer .ui-btn { flex: 1 1 auto; }
}

/* ===========================================================================
 * 6. Order confirmation (shortcodes/order_received/*)
 * ======================================================================== */
.ui-page-order .ui-order-hero { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-8); }
.ui-page-order .ui-order-hero .ui-page-header__title { margin: 0; }
.ui-page-order .ui-order-hero .ui-page-header__description { margin: var(--space-1-5) 0 0; }
.ui-page-order .ui-order-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-full);
	background: var(--success-subtle);
	color: var(--success-subtle-foreground);
}
.ui-page-order .ui-order-hero__icon svg { width: 1.5rem; height: 1.5rem; }
.ui-page-order .ui-order-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: stretch;
}
@media (min-width: 1100px) { .ui-page-order .ui-order-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.ui-page-order .ui-order-billing { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); }
.ui-page-order .ui-order-lines { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.ui-page-order .ui-order-lines th,
.ui-page-order .ui-order-lines td { padding: var(--space-2) 0; border: 0; background: none; text-align: left; font-weight: var(--weight-normal, 400); color: var(--foreground); }
.ui-page-order .ui-order-lines td { text-align: right; }
.ui-page-order .ui-order-lines tr:first-child th { font-weight: var(--weight-medium); }
.ui-page-order .ui-order-lines__sub th,
.ui-page-order .ui-order-lines__sub td { color: var(--muted-foreground); }
.ui-page-order .ui-order-lines tr:nth-child(2) th,
.ui-page-order .ui-order-lines tr:nth-child(2) td { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.ui-page-order .ui-order-lines__total th,
.ui-page-order .ui-order-lines__total td { padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ui-page-order .ui-order-lines td.ui-text-success { color: var(--success-subtle-foreground); }
.ui-page-order .ui-order-summary__footer { justify-content: space-between; flex-wrap: wrap; }
.ui-page-order .ui-order-steps { margin: 0; padding: var(--space-4) var(--space-6) var(--space-5); list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.ui-page-order .ui-order-steps li { display: flex; gap: var(--space-3); }
.ui-page-order .ui-order-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--foreground);
}
.ui-page-order .ui-order-steps__title { margin: 2px 0 0; font-weight: var(--weight-medium); color: var(--foreground); }
.ui-page-order .ui-order-steps__text { margin: 2px 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.ui-page-order .ui-order-next__footer { margin-top: auto; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 639px) {
	.ui-page-order .ui-order-steps { padding: var(--space-4); }
	.ui-page-order .ui-order-next__footer .ui-btn { flex: 1 1 auto; }
}

/* ===========================================================================
 * 7. Standalone single-column pages (authorize, checkout, redeem, 404)
 *    .full-height-page.ui-auth.ui-standalone — layout from layout.css (auth)
 * ======================================================================== */
.ui-standalone .ui-auth__body > .footer-legals { margin-top: var(--space-6); }
.ui-standalone .ui-eyebrow { margin: 0; }

/* Authorize (shortcodes/authorize/*) */
.ui-authorize .ui-auth__main { max-width: 36rem; }
.ui-authorize .ui-auth__body { max-width: 32rem; }
.ui-authorize .ui-authorize__card { box-shadow: var(--shadow-sm); }
.ui-authorize .ui-authorize__heading { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-authorize .ui-auth__title { font-size: var(--text-xl); }
.ui-authorize .ui-authorize__site { color: var(--foreground); overflow-wrap: anywhere; }
.ui-authorize .ui-authorize__consent { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted-foreground); }
.ui-authorize .ui-authorize__actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
.ui-authorize .ui-authorize__actions > .ui-btn { flex: 1 1 0; }
.ui-authorize .ui-authorize__status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-full);
}
.ui-authorize .ui-authorize__status svg { width: 1.375rem; height: 1.375rem; }
.ui-authorize .ui-authorize__status--success { background: var(--success-subtle); color: var(--success-subtle-foreground); }
.ui-authorize .ui-authorize__status--warning { background: var(--warning-subtle); color: var(--warning-subtle-foreground); }

/* Website ⇄ account strip (partials/authorize-connection.php) */
.ui-authorize .ui-connect {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.ui-authorize .ui-connect__end { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.ui-authorize .ui-connect__mark { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; margin-bottom: var(--space-1-5); }
.ui-authorize .ui-connect__mark .ui-logo { width: 2.5rem; height: 2.5rem; }
.ui-authorize .ui-connect__mark .svg-icon { width: 2.5rem; height: 2.5rem; background-size: contain; }
.ui-authorize .ui-connect__label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.ui-authorize .ui-connect__value { max-width: 100%; font-size: var(--text-sm); color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-authorize .ui-connect__link { display: inline-flex; color: var(--muted-foreground); }
.ui-authorize .ui-connect__link svg { width: 1.25rem; height: 1.25rem; }
/* WordPress mark: a light disc behind it so the dark artwork reads in dark mode */
.ui-authorize .ui-connect__mark:has(.icon-wordpress) { border-radius: var(--radius-full); background: var(--primary-foreground); box-shadow: 0 0 0 1px var(--border); } /* white in both themes */
.ui-authorize .ui-connect__mark .icon-wordpress { width: 2rem; height: 2rem; }

/* Partner flow: CSS-only radio tabs (legacy sibling selectors, re-coloured) */
.ui-authorize.ui-authorize .sellkit-authorize-card--partner-flow { max-width: none; margin: 0; padding: 0; }
.ui-authorize .sellkit-connect-path-picker__tabs {
	display: flex;
	padding: 3px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--muted);
}
.ui-authorize .sellkit-connect-path-picker__tab {
	flex: 1 1 0;
	min-height: calc(var(--control-h) - 6px);
	padding: var(--space-1-5) var(--space-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--muted-foreground);
	background: transparent;
	box-shadow: none;
}
.ui-authorize #sellkit_path_sellkit:checked ~ .sellkit-connect-path-picker__tabs .sellkit-connect-path-picker__tab:first-of-type,
.ui-authorize #sellkit_path_partner:checked ~ .sellkit-connect-path-picker__tabs .sellkit-connect-path-picker__tab:last-of-type {
	background: var(--background);
	color: var(--foreground);
	box-shadow: var(--shadow-xs);
}
.ui-authorize #sellkit_path_sellkit:focus-visible ~ .sellkit-connect-path-picker__tabs .sellkit-connect-path-picker__tab:first-of-type,
.ui-authorize #sellkit_path_partner:focus-visible ~ .sellkit-connect-path-picker__tabs .sellkit-connect-path-picker__tab:last-of-type { outline: 2px solid var(--ring); outline-offset: 1px; }
.ui-authorize .sellkit-connect-path-panel--sellkit { padding: var(--space-4) 0 0; }
.ui-authorize .sellkit-connect-path-picker .sellkit-connect-partner-section { padding-top: var(--space-4); }
.ui-authorize .sellkit-connect-path-panel__text,
.ui-authorize .sellkit-connect-partner-section__hint { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted-foreground); }
.ui-authorize .sellkit-connect-partner-section__title { margin: 0 0 var(--space-1-5); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--foreground); }
.ui-authorize .sellkit-connect-partner-section .sellkit-connect-partner-section__field,
.ui-authorize .sellkit-connect-partner-section .sellkit-connect-partner-section__field:has(#license_key) { margin-bottom: 0 !important; } /* beats legacy !important */
.ui-authorize .sellkit-connect-field-label { margin: 0; font-size: var(--text-base); color: var(--foreground); }
.ui-authorize .sellkit-connect-partner-section .sellkit-input-error-msg { margin: var(--space-1-5) 0 0; font-size: var(--text-sm); color: var(--danger-subtle-foreground); }
.ui-authorize .sellkit-connect-consent { color: var(--muted-foreground); }
.ui-authorize .ui-consent.custom-control { display: flex; align-items: flex-start; gap: var(--space-2-5, 0.625rem); min-height: 0; margin: 0; padding: 0; }
.ui-authorize .ui-consent .ui-checkbox { flex-shrink: 0; margin-top: 2px; }
.ui-authorize .ui-consent__label { margin: 0; padding: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted-foreground); cursor: pointer; }
.ui-authorize .ui-consent__label a { color: var(--brand); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.ui-authorize .ui-consent .ui-checkbox.is-error { outline: 2px solid var(--destructive); outline-offset: 2px; }
.ui-authorize .ui-authorize__actions--inline { margin-top: var(--space-1); }
.ui-authorize .ui-authorize__actions--inline .js__form-ajax-response { margin: 0; }
@media (max-width: 479px) {
	.ui-authorize .ui-authorize__actions { flex-direction: column-reverse; }
	.ui-authorize .ui-connect { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.ui-authorize .ui-connect__link { transform: rotate(90deg); }
}

/* Checkout (checkout-template.php, partials/checkout-guest.php) */
.ui-checkout .js__sellkit-password-field-login.-is-hidden { display: none; }
.ui-checkout .ui-checkout__redirect { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.ui-checkout .ui-checkout__redirect p { margin: 0; }
.ui-checkout .ui-checkout__spinner { width: 2rem; height: 2rem; }
.ui-checkout .js__sellkit-submit-btn > svg { width: 1rem; height: 1rem; }
.ui-checkout .js__form-ajax-response,
.ui-redeem .js__form-ajax-response { margin: 0; max-width: none; }

/* 404 (template-parts/404.php) */
.ui-404 .ui-404__code {
	margin: 0;
	font-size: 4.5rem;
	font-weight: var(--weight-semibold);
	line-height: 1;
	letter-spacing: var(--tracking-tighter);
	color: var(--muted-foreground);
	font-variant-numeric: tabular-nums;
}
.ui-404 .ui-404__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 479px) { .ui-404 .ui-404__actions .ui-btn { flex: 1 1 100%; } }
.ui-page-downloads .ui-download-grid > .ui-download:only-child { grid-column: 1 / -1; }
.ui-page-downloads .ui-downloads__locked-alert { margin-bottom: var(--space-6); }