/**
 * Account layer — the signed-in account area.
 *
 * Loaded only on WooCommerce account pages, after shop.css. Everything here
 * composes tokens from tokens.css; no colour, space, radius, shadow or timing
 * value is written literally.
 *
 * The signed-out card (.p-auth) lives in shop.css and is untouched by this
 * file — the two share a visual language but almost no layout.
 *
 * Sections
 *   1. Shell + background art
 *   2. Sidebar
 *   3. Content column
 *   4. Motion + reduced motion
 *   5. Blocks
 *   6. Hero
 *   7. Stat grid
 *   8. Quick actions
 *   9. Referral card
 *  10. Empty states
 *  11. Order cards
 *  12. Single order
 *  13. Print
 *  14. Fields
 *  15. Address cards
 *  16. Rewards
 *  17. Notices
 *  18. Horizontal rail
 *  19. Wishlist
 *  20. Wishlist empty states
 *  21. Payment methods
 *  22. Preference toggles
 */

/* ======================================================================
   1. Shell
   ====================================================================== */

.p-acct {
	position: relative;
	padding-block: clamp(var(--p-space-6), 3vw, var(--p-space-8)) var(--p-space-9);
	overflow: clip;
}

/*
 * Two oversized illustrations well behind the cards, echoing the sign-in
 * screen so arriving from it feels like the same room. Purely decorative:
 * aria-hidden in the template, and never a hit target.
 */
.p-acct__art {
	display: none;
}

.p-acct__leaf {
	position: absolute;
	color: var(--p-green-500);
	opacity: 0.05;
}

.p-acct__leaf svg {
	width: 100%;
	height: auto;
	display: block;
}

.p-acct__leaf--a {
	width: clamp(18rem, 34vw, 34rem);
	top: -6%;
	right: -10%;
	transform: rotate(14deg);
}

.p-acct__leaf--b {
	width: clamp(14rem, 26vw, 26rem);
	bottom: -8%;
	left: -9%;
	transform: rotate(-18deg);
}

/*
 * The account area is not centred and is not measured. A 1280px column is right
 * for editorial pages with a reading width; a dashboard with a sidebar and a
 * card grid beside it just wastes the screen, and pushes below the fold things
 * that would otherwise have fitted.
 *
 * So the container cap is removed entirely: the sidebar starts hard against the
 * left gutter and the content runs to the right edge.
 */
.p-acct .p-container {
	max-width: none;
	margin-inline: 0;
	padding-inline: clamp(var(--p-space-4), 2vw, var(--p-space-6));
}

/*
 * There is deliberately no `.p-acct .p-prose` rule here. `.p-prose` used to
 * wrap this whole area — page.php put it around the_content(), and the account
 * page is a shortcode — so it was an *ancestor* of `.p-acct`, never a
 * descendant, and no rule scoped inside `.p-acct` could reach it. page.php now
 * skips that wrapper for the account page instead of it being fought here.
 */

.p-acct__layout {
	/*
	 * The sidebar card's inner padding, named once. The dashboard column offsets
	 * itself by the same amount so both columns' first line of text starts at
	 * the same height.
	 */
	--p-acct-inset: var(--p-space-3);

	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--p-space-5);
	align-items: start;
}

/*
 * Sidebar is a quarter of the width, floored and capped so it never becomes
 * cramped on a laptop or absurd on an ultrawide.
 */
@media (min-width: 1024px) {
	.p-acct__layout {
		grid-template-columns: clamp(17rem, 25%, 22rem) minmax(0, 1fr);
		gap: var(--p-space-7);
	}
}

/* ======================================================================
   2. Sidebar
   ====================================================================== */

.p-acct__nav {
	position: relative;
	min-width: 0;
}

@media (min-width: 1024px) {
	.p-acct__nav {
		position: sticky;
		/* Clear the header, which returns on scroll-up over this page. */
		top: calc(var(--p-header-h) + var(--p-space-3));
	}
}

.p-acct__navcard {
	position: relative;
	padding: var(--p-acct-inset, var(--p-space-3));
	border-radius: var(--p-radius-lg);
	background: color-mix(in srgb, var(--p-surface) 78%, transparent);
	border: 1px solid var(--p-line-soft);
	box-shadow: var(--p-shadow-card);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
}

/*
 * On phones and tablets the sidebar becomes a horizontal rail. A vertical list
 * of ten rows above the content would push the actual page below the fold on
 * every single visit.
 */
@media (max-width: 1023px) {
	.p-acct__navcard {
		padding: var(--p-space-2);
		overflow: auto hidden;
		overscroll-behavior-inline: contain;
		scroll-padding-inline: var(--p-space-2);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.p-acct__navcard::-webkit-scrollbar {
		display: none;
	}
}

.p-acct__navlist {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

@media (max-width: 1023px) {
	.p-acct__navlist {
		display: flex;
		gap: var(--p-space-1);
		width: max-content;
		min-width: 100%;
	}
}

.p-acct__navitem {
	margin: 0;
	min-width: 0;
}

/*
 * Rows are deliberately generous — 48px of touch target on an 8-point rhythm,
 * body-sized type rather than small print. A ten-row sidebar at 32px a row
 * reads as a settings menu; at 48px it reads as navigation.
 */
.p-acct__navlink {
	display: flex;
	align-items: center;
	gap: var(--p-space-3);
	padding: var(--p-space-3) var(--p-space-4);
	min-height: 3rem;
	border-radius: var(--p-radius-md);
	color: var(--p-text);
	text-decoration: none;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	font-weight: 500;
	letter-spacing: var(--p-track-btn);
	white-space: nowrap;
	transition:
		color var(--p-dur-ui) var(--p-ease),
		background-color var(--p-dur-ui) var(--p-ease),
		transform var(--p-dur-ui) var(--p-ease);
}

@media (max-width: 1023px) {
	.p-acct__navlink {
		min-height: 2.5rem;
		padding: var(--p-space-2) var(--p-space-4);
		font-size: var(--p-text-small);
	}
}

.p-acct__navicon {
	width: 1.375rem;
	height: 1.375rem;
	flex: none;
	color: var(--p-green-500);
	transition:
		color var(--p-dur-ui) var(--p-ease),
		transform var(--p-dur-panel) var(--p-ease);
}

@media (max-width: 1023px) {
	.p-acct__navicon {
		width: 1.125rem;
		height: 1.125rem;
	}
}

.p-acct__navlabel {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Hover changes ink and nudges the icon. It does not paint a background.
 *
 * It used to set `--p-green-100` behind the row — the same green as the sliding
 * indicator, which also follows the pointer. The result was two identical
 * highlights on screen at once: one already lit under the row you had just
 * reached, the other still travelling towards it from the row you left. The
 * indicator is the highlight; this is only the text responding.
 */
@media (hover: hover) {
	.p-acct__navlink:hover {
		color: var(--p-green-900);
	}

	.p-acct__navlink:hover .p-acct__navicon {
		transform: translateX(2px) scale(1.06);
	}
}

.p-acct__navlink:focus-visible {
	outline: 2px solid var(--p-green-700);
	outline-offset: 2px;
}

.p-acct__navitem.is-current .p-acct__navlink,
.p-acct__navlink[aria-current="page"] {
	color: var(--p-green-900);
	font-weight: 600;
}

.p-acct__navitem.is-current .p-acct__navicon {
	color: var(--p-green-700);
}

/*
 * The sliding indicator. One element for the whole list, moved by JS. Sized to
 * zero until it is positioned, so nothing flashes in the wrong place on load.
 */
.p-acct__navmark {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-radius: var(--p-radius-md);
	background: var(--p-green-100);
	opacity: 0;
	pointer-events: none;
	will-change: transform;

	/*
	 * Transform only, and that is the whole reason it now feels right.
	 *
	 * `width` and `height` were being transitioned alongside it. Both are
	 * layout properties: the browser re-lays-out and repaints the sidebar on
	 * every frame of the slide, which is what made the movement look cheap. The
	 * rows are all the same size anyway, so those two now snap while the
	 * position glides on the compositor.
	 *
	 * The curve is a long, front-loaded ease — quick to commit, slow to settle
	 * — rather than a symmetrical one. That asymmetry is most of what reads as
	 * "expensive" in Apple's own transitions.
	 */
	transition:
		transform 420ms cubic-bezier(0.32, 0.72, 0, 1),
		opacity 220ms var(--p-ease);
}

@media (prefers-reduced-motion: reduce) {
	.p-acct__navmark {
		transition-duration: 1ms, 1ms;
	}
}

.p-acct__navmark.is-ready {
	opacity: 1;
}

/* The indicator is only positioned once; until then the active row carries its
   own background so the current page is never ambiguous. */
.p-acct__navitem.is-current .p-acct__navlink {
	background: var(--p-green-100);
}

.p-acct__navmark.is-ready ~ .p-acct__navlist .p-acct__navitem.is-current .p-acct__navlink {
	background: transparent;
}

/* ---- Locked rows -------------------------------------------------------- */

/*
 * A feature that is coming but not here yet. Shown rather than hidden so that
 * switching it on adds no row and shifts nothing — the same call the sign-in
 * card makes for Google, Apple and SMS.
 */
.p-acct__navitem.is-locked .p-acct__navlink {
	color: var(--p-text-muted);
	cursor: default;
}

.p-acct__navitem.is-locked .p-acct__navicon {
	color: var(--p-gray-400);
}

.p-acct__navlock {
	width: 0.875rem;
	height: 0.875rem;
	margin-left: auto;
	flex: none;
	color: var(--p-gray-400);
}

.p-acct__navreason {
	display: block;
	padding: 0 var(--p-space-4) var(--p-space-3);
	margin-top: calc(var(--p-space-2) * -1);
	color: var(--p-text-muted);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	line-height: var(--p-leading-snug);
	text-wrap: pretty;
}

/* The reason is a tooltip on the mobile rail, where there is no room for it. */
@media (max-width: 1023px) {
	.p-acct__navitem.is-locked {
		display: none;
	}

	.p-acct__navreason {
		display: none;
	}
}

/* ======================================================================
   3. Content column
   ====================================================================== */

/*
 * The dashboard column, aligned to the sidebar rather than to nothing.
 *
 * The sidebar is a padded card: its first row's label sits a little way down
 * from the top of the column. The dashboard is not a card, so its first
 * heading started hard against y=0 and the two columns visibly disagreed about
 * where the page began. `--p-acct-inset` is the sidebar card's own padding, so
 * the offset is derived from it rather than guessed, and the two stay in step
 * if that padding is ever retuned.
 *
 * The gap is also widened: `--p-space-5` between a stats grid and an order
 * list read as one continuous block rather than two.
 */
.p-acct__content {
	min-width: 0;
	display: grid;
	gap: var(--p-space-6);
	align-content: start;
	padding-top: var(--p-acct-inset);
}

@media (max-width: 1023px) {
	/* Stacked, so there is nothing beside it to line up with. */
	.p-acct__content {
		padding-top: 0;
	}
}

/* Woo prints notices into this wrapper; it should collapse when empty rather
   than leave a gap above the first card. */
.p-acct__content > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ======================================================================
   4. Motion
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.p-acct__navmark,
	.p-acct__navlink,
	.p-acct__navicon {
		transition-duration: 1ms;
	}
}

/* ======================================================================
   5. Blocks
   ====================================================================== */

.p-acct__block {
	min-width: 0;
}

.p-acct__blocktitle {
	margin: 0 0 var(--p-space-4);
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h3);
	font-weight: 400;
	line-height: var(--p-leading-snug);
	color: var(--p-green-900);
}

/* A heading with something on its right — "Recent orders   View all →". */
.p-acct__blockhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--p-space-4);
	margin-bottom: var(--p-space-4);
	flex-wrap: wrap;
}

.p-acct__blockhead .p-acct__blocktitle {
	margin-bottom: 0;
}

/* ======================================================================
   6. Hero
   ====================================================================== */

/* ======================================================================
   Account hero — the membership header

   Redesigned as a personal membership panel rather than a dashboard card.
   Three hairline-separated bands: identity, figures, journey. No inner cards,
   no heavy fills; what makes it read as premium is spacing, type and
   alignment, so almost every rule below is one of those three.

   Scope: `.p-hero*` only. Nothing here reaches the sidebar, the order cards,
   the wishlist or any other account section.
   ====================================================================== */

.p-hero {
	position: relative;
	padding: clamp(var(--p-space-5), 3vw, var(--p-space-8));
	border-radius: var(--p-radius-lg);
	/* Warm ivory, flat. The old diagonal gradient plus card shadow was most of
	   what made this read as a SaaS panel. */
	background: var(--p-ivory-100);
	border: 1px solid var(--p-line-soft);
	box-shadow: 0 1px 2px rgba(30, 58, 46, 0.03);
	overflow: hidden;
}

/* ---- Bands -------------------------------------------------------------- */

.p-hero__band {
	position: relative;
	z-index: 1;
}

.p-hero__band + .p-hero__band {
	margin-top: clamp(var(--p-space-4), 2.4vw, var(--p-space-6));
	padding-top: clamp(var(--p-space-4), 2.4vw, var(--p-space-6));
	border-top: 1px solid var(--p-line-soft);
}

.p-hero__band--identity {
	display: grid;
	gap: var(--p-space-4);
}

@media (min-width: 860px) {
	.p-hero__band--identity {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		column-gap: var(--p-space-7);
	}
}

/* ---- Identity ----------------------------------------------------------- */

.p-hero__who {
	display: flex;
	align-items: center;
	gap: var(--p-space-4);
	min-width: 0;
}

/*
 * The avatar reads as a membership mark: a deep green disc, a hairline sage
 * ring set off it, and the completion arc riding the outermost edge. The gap
 * between disc and ring is what makes it look struck rather than drawn.
 */
.p-hero__avatar {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--p-green-900);
	box-shadow: 0 0 0 1px var(--p-ivory-100), 0 0 0 2px rgba(79, 143, 103, 0.34);
	transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (hover: hover) {
	.p-hero__avatar:hover {
		transform: scale(1.03);
	}
}

.p-hero__ring {
	position: absolute;
	inset: -7px;
	width: calc(100% + 14px);
	height: calc(100% + 14px);
	transform: rotate(-90deg);
	pointer-events: none;
}

.p-hero__ringtrack {
	fill: none;
	stroke: transparent;
	stroke-width: 1.5;
}

.p-hero__ringarc {
	fill: none;
	stroke: var(--p-gold-500);
	stroke-width: 1.5;
	stroke-linecap: round;
	transition: stroke-dashoffset 900ms cubic-bezier(0.32, 0.72, 0, 1);
}

.p-hero__initials {
	font-family: var(--p-font-serif);
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--p-ivory-100);
	line-height: 1;
}

.p-hero__id {
	min-width: 0;
}

/* The greeting is the one loud thing on the panel, and it is loud through size
   and a serif face rather than weight. */
.p-hero__greet {
	margin: 0;
	font-family: var(--p-font-serif);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--p-green-900);
}

.p-hero__name {
	font-style: italic;
}

.p-hero__sprig {
	display: inline-block;
	margin-left: 0.3em;
	color: var(--p-green-500);
	vertical-align: baseline;
}

.p-hero__sprig svg {
	width: 0.62em;
	height: 0.62em;
	display: inline;
}

/*
 * Membership, stated rather than badged. The beige pill is gone: a hairline
 * gold mark, the tier in tracked small caps, then a thin divider and the
 * joining date as metadata.
 */
.p-hero__member {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--p-space-3);
	margin: var(--p-space-2) 0 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	color: var(--p-text-muted);
}

.p-hero__tier {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 600;
	color: var(--p-green-900);
}

.p-hero__tiermark {
	display: inline-grid;
	place-items: center;
	color: var(--p-gold-600);
}

.p-hero__tiermark svg {
	width: 13px;
	height: 13px;
}

/* The divider is a pseudo-element so it disappears with the item if the date
   is ever absent, rather than leaving a stray rule floating. */
.p-hero__since::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.85em;
	margin-right: var(--p-space-3);
	background: var(--p-line);
	vertical-align: -0.1em;
}

/* ---- Contact metadata --------------------------------------------------- */

.p-hero__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text-muted);
	min-width: 0;
}

@media (min-width: 860px) {
	.p-hero__meta {
		justify-items: end;
		text-align: right;
	}
}

.p-hero__meta li {
	display: flex;
	align-items: center;
	gap: 0.55em;
	min-width: 0;
}

.p-hero__meta svg {
	width: 15px;
	height: 15px;
	flex: none;
	stroke-width: 1.4;
	color: var(--p-text-muted);
	opacity: 0.75;
}

.p-hero__trunc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.p-hero__verified {
	color: var(--p-green-700);
}

.p-hero__verified svg {
	color: var(--p-green-700);
	opacity: 1;
}

/* ---- Figures ------------------------------------------------------------ */

.p-hero__band--figures {
	display: grid;
	gap: var(--p-space-5);
}

@media (min-width: 860px) {
	.p-hero__band--figures {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		align-items: center;
		column-gap: var(--p-space-7);
	}
}

/*
 * One horizontal run of figures, not three cards. The dividers are 1px and
 * short — they separate without drawing boxes.
 */
.p-hero__figures {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	gap: var(--p-space-4) 0;
}

.p-hero__figure {
	display: grid;
	gap: 0.15rem;
	padding-inline: clamp(var(--p-space-4), 2.4vw, var(--p-space-6));
	min-width: 0;
}

.p-hero__figure:first-child {
	padding-inline-start: 0;
}

.p-hero__figure + .p-hero__figure {
	border-left: 1px solid var(--p-line-soft);
}

/* Editorial, not bold: a light serif at a large size reads as considered where
   a heavy sans reads as a metric. */
.p-hero__fignum {
	margin: 0;
	font-family: var(--p-font-serif);
	font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.25rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--p-green-900);
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	order: 2;
}

.p-hero__figlabel {
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	color: var(--p-text-muted);
	order: 1;
}

/* ---- Actions ------------------------------------------------------------ */

.p-hero__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--p-space-3) var(--p-space-5);
}

@media (min-width: 860px) {
	.p-hero__acts {
		justify-content: flex-end;
	}
}

/*
 * Outlined rather than filled. A solid green button was the heaviest object on
 * the panel and pulled the eye off the name, which is the thing that should
 * own it.
 */
.p-hero__edit {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 1.15em;
	border: 1px solid var(--p-green-700);
	border-radius: var(--p-radius-pill);
	color: var(--p-green-900);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 260ms var(--p-ease),
		color 260ms var(--p-ease),
		border-color 260ms var(--p-ease);
}

.p-hero__editarrow {
	display: inline-grid;
	place-items: center;
	transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.p-hero__editarrow svg {
	width: 14px;
	height: 14px;
}

.p-hero__edit:hover,
.p-hero__edit:focus-visible {
	background: var(--p-green-900);
	border-color: var(--p-green-900);
	color: var(--p-ivory-100);
}

.p-hero__edit:hover .p-hero__editarrow {
	transform: translateX(3px);
}

/* Orders: a plain word with an underline that grows from the left. */
.p-hero__quiet {
	position: relative;
	color: var(--p-text);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 500;
	text-decoration: none;
	padding-block: 0.2em;
	white-space: nowrap;
}

.p-hero__quiet::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--p-green-700);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.p-hero__quiet:hover::after,
.p-hero__quiet:focus-visible::after {
	transform: scaleX(1);
}

/* The member code, set as a code: tracked monospace-ish caps on a hairline. */
.p-hero__code {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.5em 0.9em;
	border: 1px dashed var(--p-line);
	border-radius: var(--p-radius-sm);
	background: transparent;
	color: var(--p-text-muted);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		border-color 260ms var(--p-ease),
		color 260ms var(--p-ease);
}

.p-hero__codeicon {
	width: 13px;
	height: 13px;
	flex: none;
	opacity: 0.7;
	transition: opacity 260ms var(--p-ease);
}

.p-hero__code:hover,
.p-hero__code:focus-visible {
	border-color: var(--p-green-700);
	color: var(--p-green-900);
}

.p-hero__code:hover .p-hero__codeicon {
	opacity: 1;
}

/* account.js swaps the label text and adds this class on a successful copy. */
.p-hero__code.is-copied {
	border-style: solid;
	border-color: var(--p-green-700);
	color: var(--p-green-700);
}

/* ---- Journey ------------------------------------------------------------ */

.p-hero__journeyeyebrow {
	margin: 0 0 var(--p-space-2);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	color: var(--p-green-500);
}

.p-hero__journeyhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--p-space-3);
	margin-bottom: var(--p-space-3);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text-muted);
}

.p-hero__journeygoal strong {
	font-weight: 600;
	color: var(--p-green-900);
}

/* The milestone reads as a place you arrive at, not a figure you clear. */
.p-hero__milestone {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: 600;
	color: var(--p-green-900);
}

.p-hero__milestonemark {
	display: inline-grid;
	place-items: center;
	color: var(--p-green-500);
}

.p-hero__milestonemark svg {
	width: 14px;
	height: 14px;
}

.p-hero__journeypct {
	font-family: var(--p-font-serif);
	font-size: var(--p-text-small);
	color: var(--p-green-900);
	font-variant-numeric: lining-nums;
}

/* A line, not a bar. 2px, full width, with the fill growing from the left on
   load rather than appearing already drawn. */
.p-hero__track {
	position: relative;
	height: 2px;
	border-radius: 2px;
	background: var(--p-line-soft);
	overflow: hidden;
}

.p-hero__fillbar {
	display: block;
	height: 100%;
	width: var(--p-fill, 0%);
	min-width: 2px;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--p-green-700), var(--p-green-500));
	transform-origin: left center;
	animation: p-hero-fill 1100ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes p-hero-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.p-hero__avatar,
	.p-hero__ringarc,
	.p-hero__editarrow,
	.p-hero__quiet::after,
	.p-hero__code,
	.p-hero__codeicon {
		transition-duration: 1ms;
	}

	.p-hero__fillbar {
		animation: none;
	}

	.p-hero__avatar:hover {
		transform: none;
	}
}

.p-hero__todo {
	margin-top: var(--p-space-5);
	padding: var(--p-space-4);
	border-radius: var(--p-radius-md);
	background: color-mix(in srgb, var(--p-surface) 70%, transparent);
	border: 1px dashed var(--p-line);
}

.p-hero__todohead {
	display: flex;
	align-items: center;
	gap: var(--p-space-2);
	margin: 0 0 var(--p-space-2);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 600;
	color: var(--p-green-900);
}

.p-hero__todohead svg {
	width: 1rem;
	height: 1rem;
	color: var(--p-gold-500);
}

.p-hero__todolist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--p-space-1);
}

.p-hero__todolist a {
	display: inline-flex;
	align-items: center;
	gap: var(--p-space-2);
	padding: var(--p-space-1) 0;
	color: var(--p-text-muted);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	text-decoration: none;
	transition: color var(--p-dur-ui) var(--p-ease);
}

.p-hero__todolist svg {
	width: 0.9rem;
	height: 0.9rem;
	opacity: 0;
	transform: translateX(-4px);
	transition:
		opacity var(--p-dur-ui) var(--p-ease),
		transform var(--p-dur-ui) var(--p-ease);
}

.p-hero__todolist a:hover {
	color: var(--p-green-700);
}

.p-hero__todolist a:hover svg,
.p-hero__todolist a:focus-visible svg {
	opacity: 1;
	transform: none;
}

/* ======================================================================
   7. Stat grid
   ====================================================================== */

.p-statgrid {
	display: grid;
	gap: var(--p-space-3);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.p-stat {
	display: flex;
	align-items: center;
	gap: var(--p-space-3);
	padding: var(--p-space-4);
	border-radius: var(--p-radius-md);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	box-shadow: var(--p-shadow-card);
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--p-dur-ui) var(--p-ease),
		box-shadow var(--p-dur-ui) var(--p-ease),
		border-color var(--p-dur-ui) var(--p-ease);
}

@media (hover: hover) {
	a.p-stat:hover {
		transform: translateY(-3px);
		box-shadow: var(--p-shadow-float);
		border-color: var(--p-line);
	}

	a.p-stat:hover .p-stat__go {
		transform: translateX(3px);
		opacity: 1;
	}
}

a.p-stat:focus-visible {
	outline: 2px solid var(--p-green-700);
	outline-offset: 3px;
}

.p-stat__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: var(--p-radius-md);
}

.p-stat__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.p-stat--green .p-stat__icon { background: var(--p-green-100); color: var(--p-green-700); }
.p-stat--gold .p-stat__icon  { background: var(--p-gold-100);  color: var(--p-gold-600); }
.p-stat--clay .p-stat__icon  { background: var(--p-clay-100);  color: var(--p-clay-600); }

.p-stat__body {
	min-width: 0;
	flex: 1;
}

.p-stat__value {
	display: block;
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h3);
	line-height: 1.1;
	color: var(--p-green-900);
	font-variant-numeric: tabular-nums;
}

.p-stat__label {
	display: block;
	margin-top: 2px;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text);
}

.p-stat__note {
	display: block;
	margin-top: var(--p-space-1);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	line-height: var(--p-leading-snug);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

.p-stat__go {
	width: 1rem;
	height: 1rem;
	flex: none;
	color: var(--p-gray-400);
	opacity: 0;
	transition:
		transform var(--p-dur-ui) var(--p-ease),
		opacity var(--p-dur-ui) var(--p-ease);
}

/* Touch devices get no hover, so the affordance has to be permanent. */
@media (hover: none) {
	.p-stat__go { opacity: 1; }
}

/* ======================================================================
   8. Quick actions
   ====================================================================== */

.p-quick {
	display: grid;
	gap: var(--p-space-3);
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.p-quick__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--p-space-3);
	padding: var(--p-space-4);
	border-radius: var(--p-radius-md);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	color: var(--p-text);
	text-decoration: none;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 500;
	position: relative;
	overflow: hidden;
	transition:
		transform var(--p-dur-ui) var(--p-ease),
		box-shadow var(--p-dur-ui) var(--p-ease),
		border-color var(--p-dur-ui) var(--p-ease);
}

/*
 * A wash that grows from the bottom on hover. Scaled rather than animated on
 * height so it stays on the compositor.
 */
.p-quick__item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent, var(--p-green-100));
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--p-dur-panel) var(--p-ease);
}

.p-quick__item > * {
	position: relative;
	z-index: 1;
}

@media (hover: hover) {
	.p-quick__item:hover {
		transform: translateY(-3px);
		box-shadow: var(--p-shadow-float);
		border-color: var(--p-line);
	}

	.p-quick__item:hover::before {
		transform: scaleY(1);
	}

	.p-quick__item:hover .p-quick__icon {
		transform: translateY(-2px) rotate(-6deg);
	}
}

.p-quick__item:focus-visible {
	outline: 2px solid var(--p-green-700);
	outline-offset: 3px;
}

.p-quick__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--p-radius-md);
	background: var(--p-green-100);
	color: var(--p-green-700);
	transition: transform var(--p-dur-panel) var(--p-ease);
}

.p-quick__icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* Logging out is not the same kind of action as the other seven. */
.p-quick__item--out .p-quick__icon {
	background: var(--p-clay-100);
	color: var(--p-clay-600);
}

.p-quick__item--out::before {
	background: linear-gradient(180deg, transparent, var(--p-clay-100));
}

/* ======================================================================
   9. Referral card
   ====================================================================== */

.p-refer {
	position: relative;
	display: grid;
	gap: var(--p-space-5);
	padding: clamp(var(--p-space-5), 3vw, var(--p-space-7));
	border-radius: var(--p-radius-lg);
	background: linear-gradient(135deg, var(--p-green-900), var(--p-green-700));
	color: var(--p-ivory-100);
	overflow: hidden;
}

@media (min-width: 768px) {
	.p-refer {
		grid-template-columns: minmax(0, 1fr) 12rem;
		align-items: center;
	}

	.p-refer__art {
		order: 2;
	}
}

.p-refer__art {
	color: var(--p-green-500);
	opacity: 0.4;
	pointer-events: none;
}

.p-refer__art svg {
	width: 100%;
	height: auto;
	display: block;
}

.p-refer__body {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.p-refer .p-eyebrow {
	color: var(--p-gold-500);
}

.p-refer__title {
	margin: var(--p-space-2) 0 var(--p-space-3);
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h3);
	font-weight: 400;
	line-height: var(--p-leading-snug);
	color: var(--p-white);
}

.p-refer__text {
	margin: 0 0 var(--p-space-4);
	max-width: 46ch;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	line-height: var(--p-leading-body);
	color: color-mix(in srgb, var(--p-ivory-100) 82%, transparent);
	text-wrap: pretty;
}

.p-refer__codewrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--p-space-3);
	margin-bottom: var(--p-space-4);
}

.p-refer__code {
	padding: var(--p-space-3) var(--p-space-4);
	border-radius: var(--p-radius-md);
	background: color-mix(in srgb, var(--p-white) 12%, transparent);
	border: 1px dashed color-mix(in srgb, var(--p-gold-500) 60%, transparent);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--p-white);
}

.p-refer .p-btn--ghost {
	border-color: color-mix(in srgb, var(--p-ivory-100) 40%, transparent);
	color: var(--p-ivory-100);
}

.p-refer .p-btn--ghost:hover {
	background: color-mix(in srgb, var(--p-white) 14%, transparent);
	color: var(--p-white);
}

/* Confirmation lives in the button itself — a toast for a copy is too much. */
.p-refer__copy.is-copied {
	border-color: var(--p-green-500);
	color: var(--p-white);
}

.p-refer .p-link-arrow {
	color: var(--p-gold-500);
}

@media (prefers-reduced-motion: reduce) {
	.p-hero__sprig svg,
	.p-hero__fillbar {
		animation: none;
	}
}

/* ======================================================================
   10. Empty states
   ====================================================================== */

.p-empty {
	display: grid;
	justify-items: center;
	gap: var(--p-space-3);
	padding: clamp(var(--p-space-6), 5vw, var(--p-space-9)) var(--p-space-5);
	border-radius: var(--p-radius-lg);
	background: var(--p-surface);
	border: 1px dashed var(--p-line);
	text-align: center;
}

.p-empty__art {
	width: clamp(6rem, 16vw, 9rem);
	color: var(--p-green-500);
	opacity: 0.5;
}

.p-empty__art svg {
	width: 100%;
	height: auto;
	display: block;
	/* A slow breath, so the empty page is not completely inert. */
	animation: p-breathe 7s var(--p-ease) infinite;
	transform-origin: 50% 90%;
}

@keyframes p-breathe {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50% { transform: scale(1.03) rotate(1.5deg); }
}

.p-empty__title {
	margin: 0;
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h3);
	font-weight: 400;
	color: var(--p-green-900);
}

.p-empty__text {
	margin: 0;
	max-width: 42ch;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	line-height: var(--p-leading-body);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

.p-empty .p-btn {
	margin-top: var(--p-space-2);
}

/* ======================================================================
   11. Order cards
   ====================================================================== */

.p-acct__blockmeta {
	margin: 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text-muted);
}

.p-orders {
	display: grid;
	gap: var(--p-space-4);
}

.p-order {
	position: relative;
	padding: var(--p-space-5);
	border-radius: var(--p-radius-lg);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	box-shadow: var(--p-shadow-card);
	transition:
		transform var(--p-dur-ui) var(--p-ease),
		box-shadow var(--p-dur-ui) var(--p-ease);
}

@media (hover: hover) {
	.p-order:hover {
		transform: translateY(-2px);
		box-shadow: var(--p-shadow-float);
	}
}

/* A hairline down the left edge carrying the order's state, so a list of them
   can be skimmed without reading a single word. */
.p-order::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--p-space-5);
	bottom: var(--p-space-5);
	width: 3px;
	border-radius: var(--p-radius-pill);
}

.p-order--live::before  { background: var(--p-gold-500); }
.p-order--done::before  { background: var(--p-green-500); }
.p-order--ended::before { background: var(--p-gray-300); }

.p-order__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--p-space-3);
	padding-bottom: var(--p-space-4);
	border-bottom: 1px solid var(--p-line-soft);
}

.p-order__ident {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--p-space-2) var(--p-space-3);
	min-width: 0;
}

.p-order__number {
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	font-weight: 600;
	color: var(--p-green-900);
	text-decoration: none;
}

.p-order__number:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.p-order__date {
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text-muted);
}

.p-order__status {
	padding: 0.25rem var(--p-space-3);
	border-radius: var(--p-radius-pill);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	font-weight: 600;
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	white-space: nowrap;
}

.p-order__status--live  { background: var(--p-gold-100);  color: var(--p-gold-600); }
.p-order__status--done  { background: var(--p-green-100); color: var(--p-green-700); }
.p-order__status--ended { background: var(--p-gray-100);  color: var(--p-gray-400); }

/* ---- Contents ----------------------------------------------------------- */

.p-order__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--p-space-4);
	padding: var(--p-space-4) 0;
}

.p-order__thumbs {
	display: flex;
	align-items: center;
	gap: var(--p-space-2);
	min-width: 0;
	flex-wrap: wrap;
}

.p-order__thumb {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	flex: none;
	border-radius: var(--p-radius-md);
	background: var(--p-ivory-200);
	overflow: hidden;
	color: var(--p-green-500);
	text-decoration: none;
	transition: transform var(--p-dur-ui) var(--p-ease);
}

.p-order__thumb img,
.p-order__thumb svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.p-order__thumb svg {
	padding: var(--p-space-2);
	object-fit: contain;
}

@media (hover: hover) {
	.p-order__thumb:hover {
		transform: scale(1.06);
		z-index: 1;
	}
}

.p-order__thumbqty {
	position: absolute;
	right: 2px;
	bottom: 2px;
	min-width: 1.15rem;
	padding: 0 0.25rem;
	border-radius: var(--p-radius-pill);
	background: var(--p-green-900);
	color: var(--p-ivory-100);
	font-family: var(--p-font-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.15rem;
	text-align: center;
}

.p-order__thumb--more {
	background: transparent;
	border: 1px dashed var(--p-line);
	color: var(--p-text-muted);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 600;
}

.p-order__meta {
	text-align: right;
	min-width: 0;
}

.p-order__items {
	margin: 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text-muted);
}

.p-order__total {
	margin: var(--p-space-1) 0 0;
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h4);
	color: var(--p-green-900);
}

.p-order__total del {
	opacity: 0.5;
	margin-right: var(--p-space-2);
	font-size: 0.85em;
}

.p-order__gifted {
	display: inline-flex;
	align-items: center;
	gap: var(--p-space-2);
	margin: var(--p-space-2) 0 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	color: var(--p-clay-600);
}

.p-order__gifted svg {
	width: 0.9rem;
	height: 0.9rem;
}

/* ---- Progress track ----------------------------------------------------- */

.p-order__track {
	position: relative;
	padding: var(--p-space-4) 0 var(--p-space-2);
}

.p-order__rail {
	position: absolute;
	/* Sits on the dot centres: top padding + half a dot. */
	top: calc(var(--p-space-4) + 0.5rem);
	left: 8%;
	right: 8%;
	height: 2px;
	background: var(--p-line-soft);
	border-radius: var(--p-radius-pill);
}

.p-order__fill {
	display: block;
	height: 100%;
	width: var(--p-fill, 0%);
	border-radius: inherit;
	background: var(--p-green-500);
	transition: width 900ms var(--p-ease);
}

.p-order__steps {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--p-space-2);
}

.p-order__step {
	display: grid;
	justify-items: center;
	gap: var(--p-space-2);
	text-align: center;
	min-width: 0;
}

.p-order__dot {
	display: grid;
	place-items: center;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--p-surface);
	border: 2px solid var(--p-line);
	color: transparent;
	transition:
		background-color var(--p-dur-ui) var(--p-ease),
		border-color var(--p-dur-ui) var(--p-ease),
		transform var(--p-dur-ui) var(--p-ease);
}

.p-order__dot svg {
	width: 0.6rem;
	height: 0.6rem;
	stroke-width: 3;
}

.p-order__step.is-done .p-order__dot {
	background: var(--p-green-500);
	border-color: var(--p-green-500);
	color: var(--p-white);
}

.p-order__step.is-current .p-order__dot {
	background: var(--p-green-700);
	border-color: var(--p-green-700);
	transform: scale(1.25);
	/* A soft pulse marks the step still in progress. */
	animation: p-pulse 2.4s var(--p-ease) infinite;
}

@keyframes p-pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p-green-500) 45%, transparent); }
	60% { box-shadow: 0 0 0 7px transparent; }
}

.p-order__steplabel {
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	line-height: var(--p-leading-snug);
	color: var(--p-text-muted);
	text-wrap: balance;
}

.p-order__step.is-current .p-order__steplabel {
	color: var(--p-green-900);
	font-weight: 600;
}

/* ---- Actions ------------------------------------------------------------ */

.p-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--p-space-2);
	padding-top: var(--p-space-4);
	border-top: 1px solid var(--p-line-soft);
}

@media (max-width: 599px) {
	.p-order__body {
		justify-content: flex-start;
	}

	.p-order__meta {
		text-align: left;
	}

	.p-order__actions .p-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ======================================================================
   12. Single order
   ====================================================================== */

.p-vieworder {
	display: grid;
	gap: var(--p-space-5);
}

.p-vieworder__back {
	display: inline-flex;
	align-items: center;
	gap: var(--p-space-2);
	margin-bottom: var(--p-space-2);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text-muted);
	text-decoration: none;
	transition: color var(--p-dur-ui) var(--p-ease);
}

.p-vieworder__backicon {
	width: 1rem;
	height: 1rem;
	transform: rotate(180deg);
	transition: transform var(--p-dur-ui) var(--p-ease);
}

.p-vieworder__back:hover {
	color: var(--p-green-700);
}

.p-vieworder__back:hover .p-vieworder__backicon {
	transform: rotate(180deg) translateX(3px);
}

.p-vieworder__placed {
	margin: var(--p-space-1) 0 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text-muted);
}

.p-vieworder__tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--p-space-2);
}

.p-vieworder__status {
	padding: var(--p-space-5);
	border-radius: var(--p-radius-lg);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	box-shadow: var(--p-shadow-card);
}

.p-vieworder__statuslabel {
	display: flex;
	align-items: center;
	gap: var(--p-space-2);
	margin: 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-h4);
	font-weight: 600;
	color: var(--p-green-900);
}

.p-vieworder__statuslabel svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--p-green-500);
}

.p-vieworder__status--ended .p-vieworder__statuslabel {
	color: var(--p-text-muted);
}

.p-vieworder__status--ended .p-vieworder__statuslabel svg {
	color: var(--p-gray-400);
}

.p-vieworder__eta {
	display: flex;
	align-items: center;
	gap: var(--p-space-2);
	margin: var(--p-space-3) 0 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text-muted);
}

.p-vieworder__eta svg {
	width: 1rem;
	height: 1rem;
	color: var(--p-green-500);
}

/* ---- Gift note ---------------------------------------------------------- */

.p-vieworder__gift {
	padding: var(--p-space-5);
	border-radius: var(--p-radius-lg);
	background: var(--p-clay-100);
	border: 1px solid color-mix(in srgb, var(--p-clay-500) 22%, transparent);
}

.p-vieworder__gifthead {
	display: flex;
	align-items: center;
	gap: var(--p-space-2);
	margin: 0 0 var(--p-space-3);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 600;
	color: var(--p-clay-600);
}

.p-vieworder__gifthead svg {
	width: 1.1rem;
	height: 1.1rem;
}

.p-vieworder__giftnote {
	margin: 0;
	padding-left: var(--p-space-4);
	border-left: 2px solid color-mix(in srgb, var(--p-clay-500) 40%, transparent);
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h4);
	font-style: italic;
	line-height: var(--p-leading-body);
	color: var(--p-green-900);
	text-wrap: pretty;
}

/* ---- Timeline ----------------------------------------------------------- */

.p-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--p-space-5);
	position: relative;
	display: grid;
	gap: var(--p-space-5);
}

.p-timeline::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 2px;
	background: var(--p-line-soft);
}

.p-timeline__item {
	position: relative;
	min-width: 0;
}

.p-timeline__dot {
	position: absolute;
	left: calc(var(--p-space-5) * -1);
	top: 0.4rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--p-green-500);
	box-shadow: 0 0 0 3px var(--p-bg);
}

.p-timeline__when {
	display: block;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	color: var(--p-text-muted);
}

.p-timeline__text {
	margin-top: var(--p-space-1);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	line-height: var(--p-leading-body);
	color: var(--p-text);
}

.p-timeline__text p {
	margin: 0 0 var(--p-space-2);
}

.p-timeline__text p:last-child {
	margin-bottom: 0;
}

/* ---- Pagination --------------------------------------------------------- */

.p-acct__pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--p-space-4);
	margin-top: var(--p-space-5);
	flex-wrap: wrap;
}

.p-acct__pagenum {
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	color: var(--p-text-muted);
}

/* ======================================================================
   13. Print
   ====================================================================== */

/*
 * There is no invoice PDF plugin on this site, so "save as PDF" is the
 * browser's own. This strips the page to the order itself so what comes out is
 * a document rather than a screenshot of a web page.
 */
@media print {
	.p-header,
	.p-footer,
	.p-acct__nav,
	.p-acct__art,
	.p-mobilebar,
	.p-vieworder__tools,
	.p-vieworder__back,
	.p-order__actions {
		display: none !important;
	}

	.p-acct__layout {
		display: block;
	}

	.p-vieworder__status,
	.p-vieworder__gift,
	.p-order {
		box-shadow: none;
		border: 1px solid #ccc;
		break-inside: avoid;
	}

	.p-acct {
		padding: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-empty__art svg,
	.p-order__step.is-current .p-order__dot {
		animation: none;
	}
}

/* ======================================================================
   14. Fields
   ====================================================================== */

/*
 * The floating-label system, shared with checkout.
 *
 * Woo emits the label BEFORE the input, so no sibling combinator can style the
 * label from the input's state. `:has()` can, and is the only reason this works
 * — see inc/woocommerce/forms.php for the placeholder that makes
 * `:placeholder-shown` meaningful.
 *
 * Everything below the @supports block is the fallback: a plain small label
 * above a large input. That is the state in a browser without `:has()`, and it
 * is a perfectly good form — just not an animated one.
 */

.p-form {
	display: grid;
	gap: var(--p-space-5);
}

.p-form__card {
	padding: clamp(var(--p-space-4), 3vw, var(--p-space-6));
	border-radius: var(--p-radius-lg);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	box-shadow: var(--p-shadow-card);
}

.p-form__legend {
	margin: 0 0 var(--p-space-4);
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h4);
	font-weight: 500;
	color: var(--p-green-900);
}

.p-form__note {
	margin: 0 0 var(--p-space-4);
	max-width: var(--p-measure);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	line-height: var(--p-leading-body);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

.p-form__fields {
	display: grid;
	gap: var(--p-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 599px) {
	.p-form__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Woo's own width classes, honoured so plugin fields land where they expect. */
.p-form__fields > .form-row-wide,
.p-form__fields > .p-field:not(.form-row-first):not(.form-row-last) {
	grid-column: 1 / -1;
}

.p-form__fields > .clear {
	display: none;
}

.p-form__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.p-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--p-space-3);
}

/* ---- The field itself --------------------------------------------------- */

.p-field {
	position: relative;
	margin: 0;
	min-width: 0;
}

.p-field label {
	display: block;
	margin-bottom: var(--p-space-2);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 500;
	color: var(--p-text);
}

.p-field label .required,
.p-field label abbr {
	color: var(--p-clay-500);
	text-decoration: none;
	border: 0;
}

.p-field .woocommerce-input-wrapper {
	display: block;
}

.p-input,
.p-field input[type="text"],
.p-field input[type="email"],
.p-field input[type="tel"],
.p-field input[type="password"],
.p-field input[type="number"],
.p-field input[type="url"],
.p-field textarea,
.p-field select {
	width: 100%;
	padding: var(--p-space-4);
	border-radius: var(--p-radius-md);
	border: 1px solid var(--p-line);
	background: var(--p-surface);
	color: var(--p-text);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	line-height: 1.4;
	/* 16px minimum stops iOS zooming the viewport on focus. */
	transition:
		border-color var(--p-dur-ui) var(--p-ease),
		box-shadow var(--p-dur-ui) var(--p-ease),
		background-color var(--p-dur-ui) var(--p-ease);
	appearance: none;
}

.p-field textarea {
	min-height: 6rem;
	resize: vertical;
}

.p-field select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.25rem) calc(50% + 2px),
		calc(100% - 1rem) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--p-space-8);
	cursor: pointer;
}

.p-input:focus,
.p-field input:focus,
.p-field textarea:focus,
.p-field select:focus {
	outline: none;
	border-color: var(--p-green-500);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-green-500) 18%, transparent);
}

.p-field__hint {
	display: block;
	margin-top: var(--p-space-2);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	line-height: var(--p-leading-snug);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

/* Woo's validation states, which it toggles with JS on the row. */
.p-field.woocommerce-invalid input,
.p-field.woocommerce-invalid select {
	border-color: var(--p-error);
}

.p-field.woocommerce-invalid input:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-error) 18%, transparent);
}

.p-field.woocommerce-validated input,
.p-field.woocommerce-validated select {
	border-color: var(--p-success);
}

.p-field--hidden {
	display: none !important;
}

/* ---- Floating behaviour, where :has() exists ---------------------------- */

@supports selector(:has(*)) {
	.p-field--float label {
		position: absolute;
		top: 0;
		left: var(--p-space-4);
		margin: 0;
		padding: 0 var(--p-space-1);
		/* Vertically centred against the input's own padding. */
		transform: translateY(calc(var(--p-space-4) + 0.1em));
		transform-origin: left top;
		color: var(--p-text-muted);
		font-weight: 400;
		pointer-events: none;
		white-space: nowrap;
		max-width: calc(100% - var(--p-space-6));
		overflow: hidden;
		text-overflow: ellipsis;
		transition:
			transform var(--p-dur-ui) var(--p-ease),
			color var(--p-dur-ui) var(--p-ease),
			background-color var(--p-dur-ui) var(--p-ease);
	}

	/*
	 * Lifted when the field has focus or content. `:placeholder-shown` is false
	 * as soon as anything is typed, and also false for a value the server
	 * rendered — so a pre-filled form opens with every label already up.
	 */
	.p-field--float:has(input:focus) label,
	.p-field--float:has(textarea:focus) label,
	.p-field--float:has(input:not(:placeholder-shown)) label,
	.p-field--float:has(textarea:not(:placeholder-shown)) label,
	.p-field--float:has(input:-webkit-autofill) label {
		transform: translateY(-0.55em) scale(0.78);
		background: var(--p-surface);
		color: var(--p-green-700);
	}

	.p-field--float:has(input:not(:placeholder-shown):not(:focus)) label,
	.p-field--float:has(textarea:not(:placeholder-shown):not(:focus)) label {
		color: var(--p-text-muted);
	}

	/* A select always has a value, so its label is simply pinned. */
	.p-field--pinned label {
		position: absolute;
		top: 0;
		left: var(--p-space-4);
		margin: 0;
		padding: 0 var(--p-space-1);
		transform: translateY(-0.55em) scale(0.78);
		transform-origin: left top;
		background: var(--p-surface);
		color: var(--p-text-muted);
		font-weight: 400;
		pointer-events: none;
	}

	.p-field--float:has(textarea) label {
		/* A textarea's label belongs at its top edge, not its middle. */
		transform: translateY(var(--p-space-4));
	}

	.p-field--float:has(textarea:focus) label,
	.p-field--float:has(textarea:not(:placeholder-shown)) label {
		transform: translateY(-0.55em) scale(0.78);
	}

	.p-field--float .p-field__hint,
	.p-field--pinned .p-field__hint {
		/* The hint is below the input, so it must not be covered by the label. */
		position: static;
	}
}

/* ---- Disclosure --------------------------------------------------------- */

.p-form__disclosure {
	padding: 0;
	overflow: hidden;
}

.p-form__summary {
	display: flex;
	align-items: center;
	gap: var(--p-space-3);
	padding: clamp(var(--p-space-4), 3vw, var(--p-space-5));
	cursor: pointer;
	list-style: none;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	font-weight: 600;
	color: var(--p-green-900);
	transition: background-color var(--p-dur-ui) var(--p-ease);
}

.p-form__summary::-webkit-details-marker {
	display: none;
}

.p-form__summary:hover {
	background: var(--p-green-100);
}

.p-form__summary > span:first-child {
	display: inline-flex;
	align-items: center;
	gap: var(--p-space-2);
}

.p-form__summary svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--p-green-500);
}

.p-form__summaryhint {
	margin-left: auto;
	font-size: var(--p-text-micro);
	font-weight: 400;
	color: var(--p-text-muted);
}

.p-form__summarymark {
	flex: none;
	transition: transform var(--p-dur-ui) var(--p-ease);
}

.p-form__disclosure[open] .p-form__summarymark {
	transform: rotate(180deg);
}

.p-form__disclosure .p-form__fieldset {
	padding: 0 clamp(var(--p-space-4), 3vw, var(--p-space-5)) clamp(var(--p-space-4), 3vw, var(--p-space-5));
}

/* ======================================================================
   15. Address cards
   ====================================================================== */

.p-acct__lede {
	margin: calc(var(--p-space-2) * -1) 0 var(--p-space-5);
	max-width: var(--p-measure);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	line-height: var(--p-leading-body);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

.p-addresses {
	display: grid;
	gap: var(--p-space-4);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.p-address {
	display: flex;
	flex-direction: column;
	gap: var(--p-space-3);
	padding: var(--p-space-5);
	border-radius: var(--p-radius-lg);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	box-shadow: var(--p-shadow-card);
	transition:
		transform var(--p-dur-ui) var(--p-ease),
		box-shadow var(--p-dur-ui) var(--p-ease);
}

@media (hover: hover) {
	.p-address:hover {
		transform: translateY(-2px);
		box-shadow: var(--p-shadow-float);
	}
}

/* An address that has never been filled in reads as an invitation, not a gap. */
.p-address.is-empty {
	background: transparent;
	border-style: dashed;
	border-color: var(--p-line);
	box-shadow: none;
}

.p-address__title {
	display: flex;
	align-items: center;
	gap: var(--p-space-2);
	margin: 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	font-weight: 600;
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	color: var(--p-text-muted);
}

.p-address__title svg {
	width: 1rem;
	height: 1rem;
	color: var(--p-green-500);
}

.p-address__body {
	margin: 0;
	flex: 1;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	font-style: normal;
	line-height: var(--p-leading-body);
	color: var(--p-text);
}

.p-address__none {
	margin: 0;
	flex: 1;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	line-height: var(--p-leading-body);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

.p-address__foot {
	margin-top: auto;
}

/* ======================================================================
   16. Rewards
   ====================================================================== */

.p-rewards {
	padding: clamp(var(--p-space-5), 4vw, var(--p-space-7));
	border-radius: var(--p-radius-lg);
	background: linear-gradient(135deg, var(--p-gold-100), var(--p-ivory-100));
	border: 1px solid color-mix(in srgb, var(--p-gold-500) 24%, transparent);
	text-align: center;
}

.p-rewards__points {
	display: block;
	font-family: var(--p-font-serif);
	font-size: clamp(3rem, 2rem + 6vw, 5rem);
	line-height: 1;
	color: var(--p-green-900);
	font-variant-numeric: tabular-nums;
}

.p-rewards__unit {
	display: block;
	margin-top: var(--p-space-2);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	color: var(--p-gold-600);
}

.p-rewards__rule,
.p-rewards__none {
	margin: var(--p-space-4) auto 0;
	max-width: 44ch;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	line-height: var(--p-leading-body);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

/* ---- Tier ladder -------------------------------------------------------- */

.p-tiers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--p-space-2);
	counter-reset: tier;
}

.p-tier {
	display: flex;
	align-items: center;
	gap: var(--p-space-3);
	padding: var(--p-space-4);
	border-radius: var(--p-radius-md);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	transition: border-color var(--p-dur-ui) var(--p-ease);
}

.p-tier.is-current {
	border-color: var(--p-gold-500);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-gold-500) 14%, transparent);
}

.p-tier__mark {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	border-radius: 50%;
	background: var(--p-gray-100);
	color: var(--p-gray-400);
}

.p-tier.is-reached .p-tier__mark {
	background: var(--p-green-100);
	color: var(--p-green-700);
}

.p-tier__mark svg {
	width: 1rem;
	height: 1rem;
}

.p-tier__body {
	min-width: 0;
	flex: 1;
}

.p-tier__name {
	display: block;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	font-weight: 600;
	color: var(--p-green-900);
}

.p-tier__need {
	display: block;
	margin-top: 2px;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	color: var(--p-text-muted);
}

.p-tier__now {
	flex: none;
	padding: 0.2rem var(--p-space-3);
	border-radius: var(--p-radius-pill);
	background: var(--p-gold-100);
	color: var(--p-gold-600);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	font-weight: 600;
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---- Fact list ---------------------------------------------------------- */

.p-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--p-space-3);
}

.p-facts li {
	display: flex;
	align-items: flex-start;
	gap: var(--p-space-3);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	line-height: var(--p-leading-body);
	color: var(--p-text);
	text-wrap: pretty;
}

.p-facts svg {
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
	margin-top: 0.15em;
	color: var(--p-green-500);
}

.p-facts__note {
	margin: var(--p-space-4) 0 0;
	padding-top: var(--p-space-4);
	border-top: 1px solid var(--p-line-soft);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	line-height: var(--p-leading-body);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

/* ======================================================================
   17. Notices
   ====================================================================== */

/*
 * Used where the page has to say "this exists but is not switched on yet".
 * Deliberately not styled as an error — it is information, and a customer who
 * reads it has not done anything wrong.
 */
.p-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--p-space-3);
	padding: var(--p-space-4);
	border-radius: var(--p-radius-md);
	background: var(--p-green-100);
	border: 1px solid color-mix(in srgb, var(--p-green-500) 24%, transparent);
}

.p-notice > svg {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	margin-top: 0.1em;
	color: var(--p-green-700);
}

.p-notice__title {
	margin: 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 600;
	color: var(--p-green-900);
}

.p-notice__text {
	margin: var(--p-space-1) 0 0;
	max-width: var(--p-measure);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	line-height: var(--p-leading-body);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

/* ======================================================================
   18. Horizontal rail
   ====================================================================== */

/*
 * Recently viewed and recommendations. A native scroll-snap track rather than a
 * JS carousel: the platform's own momentum, keyboard and accessibility
 * behaviour are better than anything reimplemented here, and it costs no
 * JavaScript at all.
 */
.p-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(14rem, 1fr);
	gap: var(--p-space-4);
	/* Horizontal only — a two-pixel vertical overflow from fractional card
	   heights is enough to swallow a downward swipe that starts on the rail. */
	overflow: auto hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-inline: contain;
	scrollbar-width: thin;
	/* Room for the cards' hover lift, which would otherwise be clipped. */
	padding: var(--p-space-2) var(--p-space-1) var(--p-space-4);
	scroll-padding-inline: var(--p-space-1);
	margin: calc(var(--p-space-2) * -1) calc(var(--p-space-1) * -1) 0;
}

.p-rail > * {
	scroll-snap-align: start;
	min-width: 0;
}

@media (min-width: 768px) {
	.p-rail {
		grid-auto-columns: minmax(15rem, 1fr);
	}
}

/* ======================================================================
   19. Wishlist
   ====================================================================== */

.p-wishhead {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--p-space-5);
	padding: clamp(var(--p-space-5), 3vw, var(--p-space-7));
	border-radius: var(--p-radius-lg);
	background: linear-gradient(
		120deg,
		var(--p-green-100),
		color-mix(in srgb, var(--p-surface) 90%, transparent) 65%
	);
	border: 1px solid var(--p-line-soft);
	overflow: hidden;
}

/* A single oversized leaf bled off the right edge, well behind the type. */
.p-wishhead__art {
	position: absolute;
	right: -4%;
	top: 50%;
	width: clamp(9rem, 22vw, 17rem);
	transform: translateY(-50%) rotate(12deg);
	color: var(--p-green-500);
	opacity: 0.12;
	pointer-events: none;
}

.p-wishhead__art svg {
	width: 100%;
	height: auto;
	display: block;
}

.p-wishhead__body {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.p-wishhead__title {
	margin: 0;
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h1);
	font-weight: 400;
	line-height: var(--p-leading-tight);
	color: var(--p-green-900);
	text-wrap: balance;
}

.p-wishhead__lede {
	margin: var(--p-space-3) 0 0;
	max-width: 46ch;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	line-height: var(--p-leading-body);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

.p-wishhead__count {
	margin: var(--p-space-4) 0 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	font-weight: 600;
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	color: var(--p-green-700);
}

/* ---- The grid ----------------------------------------------------------- */

.p-wishgrid {
	display: grid;
	gap: var(--p-space-4);
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	align-items: stretch;
}

.p-wishgrid[hidden] {
	display: none;
}

/* ---- One saved plant ---------------------------------------------------- */

.p-wish {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--p-radius-lg);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	box-shadow: var(--p-shadow-card);
	overflow: hidden;
	transition:
		transform var(--p-dur-ui) var(--p-ease),
		box-shadow var(--p-dur-ui) var(--p-ease);
}

@media (hover: hover) {
	.p-wish:hover {
		transform: translateY(-4px) scale(1.02);
		box-shadow: var(--p-shadow-float);
	}
}

/* Leaving the list: collapse the card out rather than snapping it away. */
.p-wish.is-going {
	transform: scale(0.92);
	opacity: 0;
	transition:
		transform var(--p-dur-panel) var(--p-ease),
		opacity var(--p-dur-panel) var(--p-ease);
}

.p-wish__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--p-ivory-200);
	overflow: hidden;
}

.p-wish__media img,
.p-wish__media svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--p-dur-panel) var(--p-ease);
}

.p-wish__media svg {
	object-fit: contain;
	padding: var(--p-space-5);
	color: var(--p-green-500);
}

@media (hover: hover) {
	.p-wish:hover .p-wish__media img,
	.p-wish:hover .p-wish__media svg {
		transform: scale(1.06);
	}
}

.p-wish__stock {
	position: absolute;
	left: var(--p-space-3);
	top: var(--p-space-3);
	padding: 0.2rem var(--p-space-3);
	border-radius: var(--p-radius-pill);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	font-weight: 600;
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
}

.p-wish__stock--out {
	background: var(--p-gray-100);
	color: var(--p-text-muted);
}

.p-wish__stock--save {
	background: var(--p-clay-500);
	color: var(--p-white);
}

/* ---- The heart ---------------------------------------------------------- */

.p-wish__remove {
	position: absolute;
	right: var(--p-space-3);
	top: var(--p-space-3);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--p-surface) 88%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--p-clay-500);
	cursor: pointer;
	box-shadow: var(--p-shadow-card);
	transition:
		transform var(--p-dur-ui) var(--p-ease),
		background-color var(--p-dur-ui) var(--p-ease);
}

.p-wish__heart {
	width: 1.1rem;
	height: 1.1rem;
	/* Filled, because being on this list is what the heart means. */
	fill: currentColor;
	transition: transform var(--p-dur-ui) var(--p-ease);
}

@media (hover: hover) {
	.p-wish__remove:hover {
		transform: scale(1.1);
		background: var(--p-surface);
	}

	.p-wish__remove:hover .p-wish__heart {
		transform: scale(0.85);
	}
}

.p-wish__remove:focus-visible {
	outline: 2px solid var(--p-green-700);
	outline-offset: 2px;
}

/* A single beat as it is unsaved, then the card leaves. */
.p-wish__remove.is-going .p-wish__heart {
	animation: p-heartpop 380ms var(--p-ease);
}

@keyframes p-heartpop {
	40% { transform: scale(1.35); }
	100% { transform: scale(0); }
}

/* ---- Body --------------------------------------------------------------- */

.p-wish__body {
	display: flex;
	flex-direction: column;
	gap: var(--p-space-2);
	padding: var(--p-space-4);
	flex: 1;
	min-width: 0;
}

.p-wish__title {
	margin: 0;
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h4);
	font-weight: 500;
	line-height: var(--p-leading-snug);
}

.p-wish__title a {
	color: var(--p-green-900);
	text-decoration: none;
}

.p-wish__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.p-wish__botanical {
	margin: 0;
	font-family: var(--p-font-serif);
	font-size: var(--p-text-small);
	font-style: italic;
	color: var(--p-text-muted);
}

.p-wish__rating {
	font-size: var(--p-text-micro);
}

/* ---- Care facts --------------------------------------------------------- */

.p-wish__facts {
	list-style: none;
	margin: var(--p-space-1) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--p-space-2);
}

.p-wish__facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem var(--p-space-2);
	border-radius: var(--p-radius-sm);
	background: var(--p-ivory-200);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	color: var(--p-text-muted);
	white-space: nowrap;
}

.p-wish__facts svg {
	width: 0.85rem;
	height: 0.85rem;
	flex: none;
	color: var(--p-green-500);
}

.p-wish__facts .is-safe {
	background: var(--p-green-100);
	color: var(--p-green-700);
}

.p-wish__facts .is-safe svg {
	color: var(--p-green-700);
}

/* Toxicity is stated plainly, not hidden — somebody's cat depends on it. */
.p-wish__facts .is-toxic {
	background: var(--p-clay-100);
	color: var(--p-clay-600);
}

.p-wish__facts .is-toxic svg {
	color: var(--p-clay-600);
}

/* ---- Footer ------------------------------------------------------------- */

.p-wish__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--p-space-3);
	/* Pinned to the bottom so every card in a row ends level. */
	margin-top: auto;
	padding-top: var(--p-space-3);
	flex-wrap: wrap;
}

.p-wish__pricing {
	min-width: 0;
}

.p-wish__eta {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: var(--p-space-1) 0 0;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	color: var(--p-text-muted);
}

.p-wish__eta svg {
	width: 0.85rem;
	height: 0.85rem;
	color: var(--p-green-500);
}

.p-wish__add {
	flex: none;
}

.p-btn.is-disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* ======================================================================
   20. Wishlist empty states
   ====================================================================== */

.p-wishempty {
	display: grid;
	justify-items: center;
	gap: var(--p-space-4);
	padding: clamp(var(--p-space-7), 6vw, var(--p-space-9)) var(--p-space-5);
	border-radius: var(--p-radius-lg);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	box-shadow: var(--p-shadow-card);
	text-align: center;
}

.p-wishempty[hidden] {
	display: none;
}

.p-wishempty__art {
	width: clamp(7rem, 18vw, 11rem);
	color: var(--p-green-500);
	opacity: 0.55;
}

.p-wishempty__art svg {
	width: 100%;
	height: auto;
	display: block;
	animation: p-breathe 7s var(--p-ease) infinite;
	transform-origin: 50% 90%;
}

.p-wishempty__leaf {
	font-size: 3rem;
	line-height: 1;
}

.p-wishempty__title {
	margin: 0;
	max-width: 22ch;
	font-family: var(--p-font-serif);
	font-size: var(--p-text-h2);
	font-weight: 400;
	line-height: var(--p-leading-snug);
	color: var(--p-green-900);
	text-wrap: balance;
}

.p-wishempty__text {
	margin: 0;
	max-width: 48ch;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	line-height: var(--p-leading-body);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

.p-wishempty__acts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--p-space-3);
	margin-top: var(--p-space-2);
}

.p-wishempty__chips {
	margin-top: var(--p-space-5);
	padding-top: var(--p-space-5);
	border-top: 1px solid var(--p-line-soft);
	width: 100%;
	max-width: 44rem;
}

.p-wishempty__chiplabel {
	margin: 0 0 var(--p-space-3);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	font-weight: 600;
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
	color: var(--p-text-muted);
}

.p-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--p-space-2);
}

.p-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--p-space-2) var(--p-space-4);
	border-radius: var(--p-radius-pill);
	border: 1px solid var(--p-line);
	background: var(--p-surface);
	color: var(--p-text);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color var(--p-dur-ui) var(--p-ease),
		border-color var(--p-dur-ui) var(--p-ease),
		transform var(--p-dur-ui) var(--p-ease),
		color var(--p-dur-ui) var(--p-ease);
}

@media (hover: hover) {
	.p-chip:hover {
		background: var(--p-green-900);
		border-color: var(--p-green-900);
		color: var(--p-ivory-100);
		transform: translateY(-2px);
	}
}

.p-chip:focus-visible {
	outline: 2px solid var(--p-green-700);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.p-wish,
	.p-wish__media img,
	.p-wish__media svg,
	.p-chip {
		transition-duration: 1ms;
	}

	.p-wishempty__art svg,
	.p-wish__remove.is-going .p-wish__heart {
		animation: none;
	}
}

/* ======================================================================
   21. Payment methods
   ====================================================================== */

.p-brands {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--p-space-3);
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.p-brand {
	display: flex;
	align-items: center;
	gap: var(--p-space-3);
	padding: var(--p-space-4);
	border-radius: var(--p-radius-md);
	background: var(--p-surface);
	border: 1px solid var(--p-line-soft);
	min-width: 0;
}

/* A method that cannot be used yet: dashed, quiet, and carrying a padlock. */
.p-brands li.p-brand {
	background: transparent;
	border-style: dashed;
	border-color: var(--p-line);
}

/* A method that is genuinely saved is a solid card with real actions. */
.p-brand--saved {
	background: var(--p-surface);
	border-style: solid;
	border-color: var(--p-line-soft);
	box-shadow: var(--p-shadow-card);
	flex-wrap: wrap;
}

.p-brand__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: var(--p-radius-md);
	background: var(--p-ivory-200);
	color: var(--p-green-700);
}

.p-brands li.p-brand .p-brand__icon {
	background: transparent;
	color: var(--p-gray-400);
}

.p-brand__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.p-brand__body {
	flex: 1;
	min-width: 0;
}

.p-brand__label {
	display: block;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-small);
	font-weight: 600;
	color: var(--p-green-900);
}

.p-brands li.p-brand .p-brand__label {
	color: var(--p-text-muted);
}

.p-brand__note {
	display: block;
	margin-top: 2px;
	font-family: var(--p-font-sans);
	font-size: var(--p-text-micro);
	line-height: var(--p-leading-snug);
	color: var(--p-text-muted);
	text-wrap: pretty;
}

.p-brand__default {
	display: inline-block;
	margin-left: var(--p-space-2);
	padding: 0.1rem var(--p-space-2);
	border-radius: var(--p-radius-pill);
	background: var(--p-green-100);
	color: var(--p-green-700);
	font-weight: 600;
	letter-spacing: var(--p-track-label);
	text-transform: uppercase;
}

.p-brand__lock {
	width: 0.9rem;
	height: 0.9rem;
	flex: none;
	color: var(--p-gray-400);
}

.p-brand__acts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--p-space-2);
	width: 100%;
}

/* ======================================================================
   22. Preference toggles
   ====================================================================== */

.p-form__checks {
	display: grid;
	gap: var(--p-space-3);
	margin-bottom: var(--p-space-4);
}

/* The form's own fieldsets need the same rhythm as its field grids. */
.p-form__card .p-form__fieldset + .p-form__fieldset,
.p-form__card .p-form__fields + .p-form__fieldset {
	margin-top: var(--p-space-6);
	padding-top: var(--p-space-5);
	border-top: 1px solid var(--p-line-soft);
}

/* A date input must match the height and treatment of every other field. */
.p-field input[type="date"] {
	width: 100%;
	padding: var(--p-space-4);
	border-radius: var(--p-radius-md);
	border: 1px solid var(--p-line);
	background: var(--p-surface);
	color: var(--p-text);
	font-family: var(--p-font-sans);
	font-size: var(--p-text-body);
	line-height: 1.4;
	appearance: none;
}

/*
 * A date input always has a value in the eyes of :placeholder-shown, so its
 * label is pinned rather than floated — the same call the selects make.
 */
.p-field--float:has(input[type="date"]) label {
	transform: translateY(-0.55em) scale(0.78);
	background: var(--p-surface);
	color: var(--p-text-muted);
}