/*
 * Brand colors below are all driven by CSS custom properties
 * (--aurelle-login-*), set globally via an inline <style> block this
 * plugin outputs on wp_head (see render_login_theme_vars()) from the
 * admin-configurable values on the Templates > Login page tab. Every
 * rule keeps its own hardcoded fallback value as the second argument
 * to var(), so this file still renders correctly even if that
 * variables block is ever missing for some reason. The *-rgb variants
 * (defined as space-separated R G B triplets, e.g. "196 129 142", not
 * comma-separated) exist because a single var() can't expand into
 * multiple comma-separated positional arguments of an outer function
 * -- rgba(var(--x, 1, 2, 3), .3) does NOT work the way it looks like
 * it should; the modern rgb(var(--x, 1 2 3) / .3) space-and-slash
 * syntax is what actually lets one variable supply a full R G B
 * triplet to be combined with a separate alpha value.
 */
.aurelle-account {
	max-width: 760px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--aurelle-login-text, #453A40);
}
.aurelle-account-notice {
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 16px;
}
.aurelle-account-notice.is-error {
	background: rgba(226, 75, 74, .1);
	color: #A32D2D;
	border: 1px solid rgba(226, 75, 74, .25);
}
.aurelle-account-notice.is-warning {
	background: rgba(186, 129, 23, .1);
	color: #854F0B;
	border: 1px solid rgba(186, 129, 23, .25);
}
.aurelle-account-notice.is-success {
	background: rgba(59, 109, 17, .1);
	color: #3B6D11;
	border: 1px solid rgba(59, 109, 17, .25);
}
.aurelle-account-card {
	background: #fff;
	border: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .18);
	border-radius: 14px;
	padding: 28px;
	max-width: 380px;
	margin: 0 auto;
}
.aurelle-account-logo {
	text-align: center;
	margin-bottom: 20px;
}
.aurelle-account-logo svg {
	width: 110px;
	height: auto;
}
.aurelle-account-logo img {
	max-width: 180px;
	max-height: 72px;
	height: auto;
	width: auto;
}
.aurelle-account-alerts:empty {
	display: none;
}
.aurelle-account-stage .description {
	font-size: 12.5px;
	color: var(--aurelle-login-muted, #8E9399);
	margin: 0 0 14px;
}
.aurelle-account-switch {
	text-align: center;
	font-size: 12.5px;
	color: var(--aurelle-login-muted, #8E9399);
	margin: 16px 0 0;
}
/* Two of these now stack directly on the login panel -- "Forgot your
   password?" right after the Sign in button, then "Don't have an
   account? Register" -- reading as one related group of secondary
   links rather than two separately-spaced items. Every other panel
   (forgot, register, reset) only ever has one of these, so its own
   16px top margin above is untouched. */
.aurelle-account-switch + .aurelle-account-switch {
	margin-top: 6px;
}
.aurelle-account-switch a {
	color: var(--aurelle-login-accent-hover, #AC717D);
	font-weight: 600;
	text-decoration: none;
}
.aurelle-account-switch a:hover {
	text-decoration: underline;
}
.aurelle-account-pw-wrap {
	position: relative;
	display: block;
}
.aurelle-account-pw-wrap input {
	padding-right: 40px !important;
}
.aurelle-account-pw-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 4px !important;
	cursor: pointer;
	color: var(--aurelle-login-muted, #8E9399);
	display: flex;
	align-items: center;
}
.aurelle-account-pw-toggle:hover {
	color: var(--aurelle-login-text, #453A40);
}
.aurelle-account-field {
	display: block;
	margin-bottom: 12px;
}
.aurelle-account-field span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--aurelle-login-text, #453A40);
	margin-bottom: 4px;
}
.aurelle-account-field input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .3) !important;
	border-radius: 8px !important;
	padding: 8px 10px !important;
	font-size: 14px;
	background: #fff !important;
}
.aurelle-account-field input:focus {
	outline: none;
	border-color: var(--aurelle-login-accent, #C4818E) !important;
	box-shadow: 0 0 0 3px rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .15);
}
/* Chrome/Safari/Edge apply their own internal styling to an
   autofilled field, entirely separate from anything set above --
   without an explicit override here, that browser-chosen text color
   can render washed-out or effectively invisible against this field's
   own white background. This surfaces most visibly on the password
   field specifically: the show/hide eye button works by switching
   the field's own type between "password" and "text" (see
   account.js), which forces the browser to re-decide how to render
   an already-autofilled value now that it's plain text -- during
   that brief re-evaluation the text can flash invisible before the
   browser's own internal transition settles. -webkit-text-fill-color
   is the one property that actually overrides autofill's own text
   color (plain `color` does not); the oversized inset box-shadow is
   the standard, well-established trick for overriding autofill's own
   background tint to match this field's real background instead of
   the browser's yellow/blue highlight; and the absurdly long
   transition duration exists specifically so the browser's own
   default transition on that background never has a chance to
   animate through its own tint before this override applies -- 0s
   would still show one visible frame of it, long enough to be the
   exact "disappears for a second" flash this fixes. Applies
   regardless of the field's current type, so it covers the password
   field in both its hidden and revealed states identically. */
.aurelle-account-field input:-webkit-autofill,
.aurelle-account-field input:-webkit-autofill:hover,
.aurelle-account-field input:-webkit-autofill:focus,
.aurelle-account-field input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--aurelle-login-text, #453A40) !important;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
	box-shadow: 0 0 0px 1000px #fff inset !important;
	transition: background-color 5000s ease-in-out 0s;
	caret-color: var(--aurelle-login-text, #453A40);
}
/*
 * Hello Elementor's reset sets every button to 1rem and loads after this
 * file, so this button showed at 16px wherever the theme was active - the
 * same tie an attribute selector always wins on load order. The doubled
 * class outweighs it without !important.
 */
.aurelle-account-btn.aurelle-account-btn {
	font-size: 14px;
}

.aurelle-account-btn {
	display: block !important;
	width: fit-content !important;
	background: var(--aurelle-login-accent, #C4818E) !important;
	border: 1px solid var(--aurelle-login-accent-hover, #AC717D) !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	padding: 7px 20px !important;
	border-radius: 999px !important;
	cursor: pointer;
	margin: 4px auto 0 !important;
}
.aurelle-account-btn:hover {
	background: var(--aurelle-login-accent-hover, #AC717D) !important;
	border-color: var(--aurelle-login-accent-hover, #AC717D) !important;
	color: #fff !important;
}
/*
 * [aurelle_login_button] shortcode's own button/link -- a small,
 * solid-pill Login/Logout control meant for placement outside the
 * card entirely (a header or footer), so it's deliberately its own,
 * smaller class rather than reusing .aurelle-account-btn (sized for
 * a full-width card, not a nav bar). min-width keeps "Login" and
 * "Logout" the same comfortable size regardless of word length --
 * the original click-target complaint this replaces was exactly a
 * generic button never sized for its longer word.
 *
 * Sizing lives in its own custom properties, not directly on the
 * properties themselves, specifically so it stays adjustable without
 * fighting the !important below -- that !important exists only to
 * survive the active theme's own generic button styling (the same
 * known issue already hit and fixed elsewhere on this site), and
 * !important on padding itself would otherwise make padding the one
 * thing that's hardest to safely override later. A custom property
 * follows the normal cascade regardless of !important on the
 * property that consumes it, so overriding e.g. --aurelle-login-btn-
 * pad-h from Elementor's own per-widget Custom CSS panel (which
 * scopes to `selector .aurelle-login-btn { ... }`) works with no
 * !important of its own needed.
 */
.aurelle-login-btn {
	display: inline-block;
	--aurelle-login-btn-min-width: 96px;
	--aurelle-login-btn-pad-v: 9px;
	--aurelle-login-btn-pad-h: 22px;
	--aurelle-login-btn-font-size: 13px;
	min-width: var(--aurelle-login-btn-min-width) !important;
	text-align: center;
	box-sizing: border-box;
	background: var(--aurelle-login-accent, #C4818E) !important;
	border: 1px solid var(--aurelle-login-accent-hover, #AC717D) !important;
	color: #fff !important;
	font-size: var(--aurelle-login-btn-font-size);
	font-weight: 600;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	padding: var(--aurelle-login-btn-pad-v) var(--aurelle-login-btn-pad-h) !important;
	border-radius: 999px !important;
	cursor: pointer;
	text-decoration: none !important;
}
.aurelle-login-btn:hover {
	background: var(--aurelle-login-accent-hover, #AC717D) !important;
	border-color: var(--aurelle-login-accent-hover, #AC717D) !important;
	color: #fff !important;
}
/*
 * Matches Elementor's own default Tablet/Mobile breakpoints (1024px/
 * 767px), so this shrinks in step with however the rest of the
 * header is already responding, rather than on some unrelated width
 * of its own.
 */
@media (max-width: 1024px) {
	.aurelle-login-btn {
		--aurelle-login-btn-pad-h: 16px;
	}
}
@media (max-width: 767px) {
	.aurelle-login-btn {
		--aurelle-login-btn-min-width: 72px;
		--aurelle-login-btn-pad-v: 7px;
		--aurelle-login-btn-pad-h: 14px;
		--aurelle-login-btn-font-size: 12px;
	}
}
.aurelle-account-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .18);
}
.aurelle-account-header span {
	font-size: 15px;
	font-weight: 600;
}
.aurelle-account-logout {
	font-size: 13px;
	color: var(--aurelle-login-muted, #8E9399);
	text-decoration: none;
}
.aurelle-account-logout:hover {
	color: var(--aurelle-login-text, #453A40);
	text-decoration: underline;
}
.aurelle-account h3 {
	font-size: 16px;
	margin: 0 0 12px;
}
.aurelle-account-empty {
	color: var(--aurelle-login-muted, #8E9399);
	font-size: 14px;
}
.aurelle-account-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .18);
	border-radius: 12px;
	overflow: hidden;
	font-size: 13.5px;
}
.aurelle-account-table th {
	text-align: left;
	background: rgb(var(--aurelle-login-bg-rgb, 243 211 214) / .35);
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--aurelle-login-text, #453A40);
}
.aurelle-account-table td {
	padding: 10px 14px;
	border-top: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .1);
}
.aurelle-account-status-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	background: rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .14);
	color: var(--aurelle-login-text, #453A40);
}

/*
 * Styles the shared .aurelle-tpl-login-btn / .aurelle-tpl-login-divider
 * markup that External Authentication's own aurelle_login_buttons_html
 * filter returns (see render_account_logged_out_view() in the main
 * plugin file) -- these same class names are also used, with different
 * CSS, on wp-login.php itself by that plugin's own login_head_css();
 * the two never render on the same page, so there's no conflict, only
 * each context supplying styling that matches its own design.
 */
.aurelle-tpl-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #fff;
	border: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .3);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--aurelle-login-text, #453A40);
	text-decoration: none;
	margin-bottom: 10px;
}
.aurelle-tpl-login-btn:hover, .aurelle-tpl-login-btn:focus {
	background: rgb(var(--aurelle-login-bg-rgb, 243 211 214) / .2);
	border-color: var(--aurelle-login-accent, #C4818E);
}
.aurelle-tpl-login-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 20px;
	font-size: 11px;
	color: var(--aurelle-login-muted, #8E9399);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.aurelle-tpl-login-divider::before, .aurelle-tpl-login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .18);
}

/*
 * Styles the shared .aurelle-tpl-modal-* / .aurelle-tpl-btn-* markup
 * that External Authentication's own aurelle_login_pending_merge_html
 * filter returns (see render_account_logged_out_view() in the main
 * plugin file) -- the account-match confirmation modal shown when a
 * Google/Microsoft sign-in matched an existing account by email.
 * These same class names are also used, with different CSS, on
 * wp-login.php itself by that plugin's own login_head_css() -- the
 * two never render on the same page, so there's no conflict, only
 * each context supplying styling that matches its own design. This
 * specific block was missing entirely when that filter integration
 * first shipped, which is why the modal briefly rendered as plain,
 * unstyled content flowing inline in the page instead of as an
 * actual overlaying popup -- position: fixed below is what makes it
 * a popup at all, rather than everything else here just being
 * cosmetic on top of an already-correct layout.
 */
.aurelle-tpl-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgb(var(--aurelle-login-text-rgb, 69 58 64) / .45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}
.aurelle-tpl-modal {
	background: #fff;
	border-radius: 14px;
	padding: 26px 28px;
	max-width: 380px;
	box-shadow: 0 8px 30px rgb(var(--aurelle-login-text-rgb, 69 58 64) / .25);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.aurelle-tpl-modal-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.aurelle-tpl-modal-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background: rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .14);
	color: var(--aurelle-login-accent-hover, #AC717D);
}
.aurelle-tpl-modal-icon.is-success { background: rgba(59, 109, 17, .14); color: #3B6D11; }
.aurelle-tpl-modal-icon.is-error { background: rgba(226, 75, 74, .14); color: #A32D2D; }
.aurelle-tpl-modal-title {
	font-family: Georgia, serif;
	color: var(--aurelle-login-text, #453A40);
	font-size: 16px;
	font-weight: 600;
}
.aurelle-tpl-modal-message {
	font-size: 13px;
	color: var(--aurelle-login-text, #453A40);
	margin: 0 0 14px;
}
.aurelle-tpl-modal-details {
	background: rgb(var(--aurelle-login-bg-rgb, 243 211 214) / .35);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
	font-size: 12.5px;
	color: var(--aurelle-login-text, #453A40);
}
.aurelle-tpl-modal-details div { margin-bottom: 4px; }
.aurelle-tpl-modal-details div:last-child { margin-bottom: 0; }
.aurelle-tpl-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.aurelle-tpl-btn-primary, .aurelle-tpl-btn-secondary {
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	display: inline-block;
	text-decoration: none;
}
.aurelle-tpl-btn-primary { background: var(--aurelle-login-accent, #C4818E); color: #fff; }
.aurelle-tpl-btn-secondary { background: #fff; border-color: rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .35); color: var(--aurelle-login-text, #453A40); }

/* ── The account item in a header ──────────────────────────────── */

/*
 * These are menu items, not buttons.
 *
 * Everything below inherits rather than declares: no colour, no font,
 * no size. That is the whole point of the change -- the account item
 * sits in a menu, so it should take the menu's colours, including
 * whatever SmartHeader sets for the header's state. Declaring a colour
 * here would be a third place deciding one, after Elementor and
 * SmartHeader, and the first to lose an argument nobody knew was
 * happening.
 */
/*
 * Named aurelle-hdr- because both obvious names were already taken.
 *
 * .aurelle-account is the wrapper for the whole account area, and
 * .aurelle-account-header is a heading inside it -- with its own
 * `span { font-size: 15px; font-weight: 600 }` rule, which is what was
 * overriding the inherited font on these items and making them
 * disagree with the menu beside them.
 *
 * Both collisions came from picking a name and not grepping for it.
 * This prefix is checked as unused and is deliberately unlike anything
 * in the account area, which is a different feature that happens to
 * share a vocabulary.
 */
.aurelle-hdr-account {
	display: inline-flex;
	align-items: center;
	/* Matches the gap Elementor puts between menu items. */
	gap: 20px;

	/*
	 * Never wraps. Measured on the page, the wrapper was 41px tall
	 * against the menu's 24 -- the greeting on one line and Sign out on
	 * the next -- which is why it did not line up with the menu beside
	 * it. Two items that belong on one line should stay on one line;
	 * if the header is too narrow for them, the menu has already
	 * collapsed anyway.
	 */
	flex-wrap: nowrap;
	white-space: nowrap;

	/* Takes the menu's own line box, so the text sits on the same
	   baseline rather than merely in the same vertical centre. */
	line-height: inherit;
}

/*
 * The class is doubled deliberately.
 *
 * A trigger rendered as <button> is matched by a theme reset that reads
 * `[type="button"], button { color: #cc3366; border: 1px solid ... }`.
 * An attribute selector weighs exactly the same as a class, so that
 * rule and a single-class rule are equally specific -- and the reset
 * loads later, so it won. The sign-in item kept a rose border and a
 * rose colour in both header states.
 *
 * Repeating the class makes this two classes to their one, which wins
 * on weight rather than on load order, and does so without
 * !important -- so anything genuinely more specific, including
 * Elementor's own per-widget CSS, can still override it. !important
 * would have worked too and would have taken that away.
 */
.aurelle-hdr-account-item.aurelle-hdr-account-item {
	color: inherit;

	/*
	 * The shorthand first, as the floor. On a site without SmartHeader,
	 * or before its script has run, these items take the typography of
	 * whatever they sit in -- which is what they did before and is
	 * never wrong, only sometimes unlike the menu.
	 */
	font: inherit;
	line-height: inherit;

	/*
	 * Then the menu's own typography, where SmartHeader has published
	 * it. It reads the values off a real menu link, so changing the
	 * menu's font in Elementor changes these too with nothing to keep
	 * in step.
	 *
	 * These must come after the shorthand: `font` resets every one of
	 * them, so the same declarations written above it would be wiped.
	 * Each falls back to inherit, so an absent property leaves the
	 * shorthand's value standing.
	 */
	font-family: var(--sh-link-font-family, inherit);
	font-size: var(--sh-link-font-size, inherit);
	font-weight: var(--sh-link-font-weight, inherit);
	letter-spacing: var(--sh-link-letter-spacing, inherit);
	line-height: var(--sh-link-line-height, inherit);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/*
 * Hover has to answer everything the reset sets on hover, not only the
 * colour.
 *
 * The theme's reset includes:
 *   [type="button"]:hover { background-color: #cc3366; color: #fff }
 *
 * so a rule that sets only a colour leaves the rose fill behind, and
 * the item turns into a block the moment the pointer touches it.
 *
 * The colour comes from --sh-link-hover, which SmartHeader publishes on
 * the header for exactly this. A hover state cannot be inherited --
 * there is no inheriting :hover -- so `color: inherit` here would give
 * the resting colour and the item could never follow the header's hover
 * colour at all. It falls back to inherit where that property does not
 * exist, which is what happens with no SmartHeader on the site.
 */
.aurelle-hdr-account-item.aurelle-hdr-account-item:hover,
.aurelle-hdr-account-item.aurelle-hdr-account-item:focus {
	color: var(--sh-link-hover, inherit);
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	opacity: 1;
}

/*
 * The separator and the initial both draw themselves in currentColor,
 * which is the colour the link has been given at that moment. So they
 * follow the header from clear to solid without being told, and without
 * SmartHeader needing to know they exist.
 */
.aurelle-hdr-account-sep {
	width: 1px;
	height: 14px;
	background: currentColor;
	opacity: .3;
	flex-shrink: 0;
}

.aurelle-hdr-account-initial {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	/* An outline rather than a filled circle. A fill would need a second
	   colour for the letter inside it, and that second colour cannot be
	   inherited -- it would have to be declared, and would then be wrong
	   in one of the two header states. */
	box-shadow: inset 0 0 0 1px currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1;
	flex-shrink: 0;
}

/* Signing out is the lesser of the two, so it reads that way without
   needing a colour of its own. */
.aurelle-hdr-account-out { opacity: .72; font-weight: 500; }
.aurelle-hdr-account-item.aurelle-hdr-account-out:hover,
.aurelle-hdr-account-item.aurelle-hdr-account-out:focus { opacity: 1; }

@media (max-width: 782px) {
	.aurelle-hdr-account { gap: 12px; }
	.aurelle-hdr-account-sep { display: none; }
}

/* ── Gift cards for customers ──────────────────────────────────────── */

/* Several rules below set display, which would beat the browser's own
   [hidden] rule and leave an empty result showing. */
.aurelle-gcb [hidden],
.aurelle-gcm [hidden] {
	display: none !important;
}

.aurelle-account-status-pill.is-active { background: rgba(59, 109, 17, .1); color: #3B6D11; }
.aurelle-account-status-pill.is-used { background: rgba(142, 147, 153, .15); color: #5E6368; }
.aurelle-account-status-pill.is-closed { background: rgba(186, 129, 23, .12); color: #854F0B; }
.aurelle-account-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Checking a balance
   ─────────────────────────────────────────────────────────────────────
   Two sides (2.76.0): the form on the left, the card it finds on the
   right, in a box up to 1200px wide. The layout follows the width of the
   box rather than the screen (container queries), because the same
   markup sits in the full-width page section and in the narrower notice
   a broken card link shows. Under 760px the sides stack: form, card,
   then the next step. */
.aurelle-account.aurelle-gcb {
	max-width: 1200px;
	width: 100%;
	box-sizing: border-box;
}
/* The sign-in prompt shares the class, and stays the size it always was. */
.aurelle-account.aurelle-gcb-signin { max-width: 560px; }
.aurelle-account h3.aurelle-gcb-title {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 20px;
	margin: 0 0 4px;
}
.aurelle-gcb-lead { font-size: 13px; color: var(--aurelle-login-muted, #8E9399); margin: 0 0 16px; }
.aurelle-gcb-signin { text-align: center; }
.aurelle-gcb-signin .aurelle-gcb-lead { max-width: 42ch; margin: 0 auto 14px; }

.aurelle-gcb .aurelle-gcb-panel {
	container-type: inline-size;
	container-name: aurelle-gcb;
	width: 100%;
}
/* Inline-size containment makes the panel report a natural width of
   zero, so anywhere the shortcode is sized to its content the whole box
   collapses to its 2px border. Elementor does exactly that when a
   container's items are centered: the widget shrinks to fit, and the
   Gift Cards page showed an empty column with a thin line down it.
   Stretching the widget gives the box the container's width to fill;
   the max-width and auto margins above still cap it at 1200px and
   centre it. Elementor-only because that is where the shrinking parent
   comes from; anywhere else the block already takes the full width. */
.elementor-widget:has(.aurelle-account.aurelle-gcb) {
	align-self: stretch;
}
.aurelle-gcb-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "side" "stage" "next";
	border: 1px solid var(--aurelle-gcb-line, #E7DCD6);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}
.aurelle-gcb-side { grid-area: side; padding: 24px 20px 4px; }
.aurelle-gcb:not(.is-found) .aurelle-gcb-side { padding-bottom: 24px; }
.aurelle-gcb-stage {
	grid-area: stage;
	container-type: inline-size;
	padding: 24px 20px;
	background: var(--aurelle-gcb-band, #F6F2EF);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 26px;
	min-width: 0;
}
.aurelle-gcb-next { grid-area: next; padding: 22px 20px 24px; border-top: 1px solid var(--aurelle-gcb-line, #E7DCD6); }

@container aurelle-gcb (min-width: 760px) {
	.aurelle-gcb-box {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "side stage" "next stage";
	}
	.aurelle-gcb-side { padding: 40px 44px 0; }
	.aurelle-gcb-next { align-self: end; margin: 26px 44px 0; padding: 22px 0 40px; }
	.aurelle-gcb-stage { padding: 40px 44px; justify-content: space-between; }
	.aurelle-gcb:not(.is-found) .aurelle-gcb-stage { justify-content: center; }
	.aurelle-gcb:not(.is-found) .aurelle-gcb-side { padding-bottom: 40px; }
	/* The result fills the side, the history sits at its foot, so its last
	   line meets the last thing under the form. */
	.aurelle-gcb-result { flex: 1 1 auto; }
	.aurelle-gcb-hist { margin-top: auto; }
}

/* The form, sized like the rest of the page */
.aurelle-gcb .aurelle-gcb-side h3.aurelle-gcb-title { font-size: 26px; margin: 0 0 6px; }
.aurelle-gcb-side .aurelle-gcb-lead { font-size: 15px; color: var(--aurelle-login-muted-strong, #6E6167); margin: 0 0 20px; }
.aurelle-gcb-form .aurelle-gcb-field { margin: 0; }
.aurelle-gcb-field span { font-size: 13px; }
.aurelle-gcb .aurelle-gcb-field input {
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 16px;
	padding: 11px 12px !important;
}
.aurelle-gcb-form .aurelle-account-btn.aurelle-gcb-submit {
	width: 100% !important;
	margin: 12px 0 0 !important;
	padding: 11px 20px !important;
	font-size: 15px;
}
.aurelle-gcb-help { font-size: 13.5px; color: var(--aurelle-login-muted, #8E9399); margin: 10px 0 0; }
.aurelle-gcb .aurelle-gcb-error { margin: 14px 0 0; }

/* The next step, under the form */
.aurelle-gcb .aurelle-gcb-next-title { font-family: Georgia, "Times New Roman", serif; font-size: 19px; margin: 0 0 4px; }
.aurelle-gcb .aurelle-gcb-next-text { font-size: 14.5px; line-height: 1.5; color: var(--aurelle-login-muted-strong, #6E6167); margin: 0 0 14px; }
.aurelle-gcb a.aurelle-account-btn.aurelle-gcb-next-btn {
	width: 100% !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 11px 20px !important;
	text-align: center;
	text-decoration: none;
	font-size: 15px;
}
.aurelle-gcb a.aurelle-account-btn.aurelle-gcb-next-btn.is-quiet {
	background: #fff !important;
	color: var(--aurelle-login-accent-hover, #AC717D) !important;
	border-color: rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .5) !important;
}

/* The card's place before there is a card */
.aurelle-gcb-ghost { text-align: center; }
.aurelle-gcb-ghost-card {
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1.6;
	margin: 0 auto 12px;
	border: 2px dashed rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .45);
	border-radius: 10px;
	display: grid;
	place-items: center;
	color: var(--aurelle-login-muted, #8E9399);
	font-size: 13px;
	box-sizing: border-box;
}
.aurelle-gcb-ghost p { margin: 0; font-size: 13.5px; color: var(--aurelle-login-muted-strong, #6E6167); }

/* The result */
.aurelle-gcb-result { display: flex; flex-direction: column; gap: 26px; }
.aurelle-gcb.is-found .aurelle-gcb-ghost { display: none; }
.aurelle-gcb-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
@container (min-width: 560px) {
	.aurelle-gcb-summary { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
}
/* Holds the card as it was designed. The card draws its own size, radius,
   artwork and text at 300px; gift-balance.js scales it down to fit when
   there is less room than that. */
.aurelle-gcb-card {
	width: 100%;
	max-width: 300px;
	justify-self: center;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 14px 30px rgb(var(--aurelle-login-text-rgb, 69 58 64) / .18), 0 2px 6px rgb(var(--aurelle-login-text-rgb, 69 58 64) / .08);
}
.aurelle-gcb-card > * { transform-origin: 0 0; }
.aurelle-gcb.is-used .aurelle-gcb-card { filter: grayscale(.55); opacity: .85; }

.aurelle-gcb-balrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.aurelle-gcb-balance { font-family: Georgia, serif; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.aurelle-gcb-of { font-size: 14px; color: var(--aurelle-login-muted, #8E9399); }
.aurelle-gcb-meter { height: 7px; border-radius: 99px; overflow: hidden; margin: 12px 0; background: rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .18); }
.aurelle-gcb-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--aurelle-login-accent, #C4818E); }
@media (prefers-reduced-motion: no-preference) {
	.aurelle-gcb-meter i { transition: width .4s ease; }
}
.aurelle-gcb-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.aurelle-gcb-facts em { font-style: normal; color: var(--aurelle-login-muted, #8E9399); margin-right: 5px; }
.aurelle-gcb .aurelle-gcb-status { font-size: 12.5px; font-weight: 600; }

/* History: two lines at a time, newest first */
.aurelle-gcb-hhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; min-height: 32px; }
.aurelle-gcb .aurelle-gcb-htitle {
	margin: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aurelle-login-muted-strong, #6E6167);
}
.aurelle-gcb-pager { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--aurelle-login-muted-strong, #6E6167); font-variant-numeric: tabular-nums; }
.aurelle-gcb-range { min-width: 66px; text-align: center; }
/* Doubled class: Hello Elementor styles every button and loads later. */
.aurelle-gcb .aurelle-gcb-page.aurelle-gcb-page {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .4);
	border-radius: 8px;
	background: #fff;
	color: var(--aurelle-login-accent-hover, #AC717D);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.aurelle-gcb .aurelle-gcb-page.aurelle-gcb-page:hover:not(:disabled),
.aurelle-gcb .aurelle-gcb-page.aurelle-gcb-page:focus-visible { background: rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .1); color: var(--aurelle-login-accent-hover, #AC717D); }
.aurelle-gcb .aurelle-gcb-page.aurelle-gcb-page:disabled { opacity: .35; cursor: default; }

.aurelle-gcb .aurelle-gcb-rows { list-style: none; margin: 0; padding: 2px 16px; background: #fff; border-radius: 12px; }
.aurelle-gcb .aurelle-gcb-rows li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 12px;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid #E9DFDA;
}
.aurelle-gcb .aurelle-gcb-rows li:last-child { border-bottom: 0; }
.aurelle-gcb-row-label { font-size: 15px; overflow-wrap: anywhere; }
.aurelle-gcb-row-amount { font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aurelle-gcb-row-amount.is-in { color: #3B6D11; }
.aurelle-gcb-row-date { font-size: 13px; color: var(--aurelle-login-muted, #8E9399); }
.aurelle-gcb-row-after { font-size: 12.5px; color: var(--aurelle-login-muted, #8E9399); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The cards in an account */
.aurelle-gcm { margin-top: 28px; }
.aurelle-account h3.aurelle-gcm-h {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 12px;
}
.aurelle-gcm-h a { font-size: 13px; font-weight: 600; color: var(--aurelle-login-accent-hover, #AC717D); text-decoration: none; }
.aurelle-gcm-h a:hover { text-decoration: underline; }
.aurelle-gcm-list {
	background: #fff;
	border: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .18);
	border-radius: 12px;
	overflow: hidden;
}
.aurelle-gcm-item + .aurelle-gcm-item { border-top: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .1); }
.aurelle-gcm-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	font-size: 13.5px;
}
summary.aurelle-gcm-row { cursor: pointer; list-style: none; }
summary.aurelle-gcm-row::-webkit-details-marker { display: none; }
summary.aurelle-gcm-row:focus-visible { outline: 2px solid var(--aurelle-login-accent, #C4818E); outline-offset: -2px; }
details[open] > summary.aurelle-gcm-row { background: rgb(var(--aurelle-login-bg-rgb, 243 211 214) / .25); }
.aurelle-gcm-main { display: grid; min-width: 0; }
.aurelle-gcm-code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; letter-spacing: .04em; }
.aurelle-gcm-sub { font-size: 11.5px; color: var(--aurelle-login-muted, #8E9399); }
.aurelle-gcm-money { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.aurelle-gcm-money span { font-size: 11.5px; color: var(--aurelle-login-muted, #8E9399); }
.aurelle-gcm-activity { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.aurelle-gcm-activity td { padding: 8px 14px; border-top: 1px solid rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .1); }
.aurelle-gcm-activity .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) {
	.aurelle-gcm-row { grid-template-columns: minmax(0, 1fr) auto; }
	.aurelle-gcm-row .aurelle-account-status-pill { grid-column: 1; justify-self: start; }
	.aurelle-gcm-money { grid-column: 2; grid-row: 1 / span 2; }
}

/* ═══ The customer portal ═══════════════════════════════════════════
 *
 * Built to be restyled without touching the plugin.
 *
 * Everything visual comes from the custom properties on .aurelle-acct
 * below, so a theme can retheme the whole portal by redeclaring a
 * handful of them in Additional CSS:
 *
 *   .aurelle-acct { --aurelle-acct-accent: #6B4457; --aurelle-acct-radius: 4px; }
 *
 * Every section carries .aurelle-acct-view--<name> and data-view, and
 * every panel inside one carries .aurelle-acct-panel--<name>, so one
 * part can be changed without catching the others:
 *
 *   .aurelle-acct-view--security .aurelle-acct-panel--password { ... }
 *
 * Selectors are single-class on purpose. Nothing here needs !important
 * to override, and there are no inline styles in the markup - the one
 * style attribute carries a number (the completeness meter) as a
 * variable, not as styling.
 *
 * Sizes are relative throughout. This renders inside whatever container
 * the theme gives it, so no rule measures the viewport, and the one
 * breakpoint asks about the column rather than the window.
 * ═══════════════════════════════════════════════════════════════════ */

.aurelle-acct {
	/* Colour */
	--aurelle-acct-ink: var(--aurelle-login-text, #453A40);
	--aurelle-acct-muted: var(--aurelle-login-muted, #8E9399);
	--aurelle-acct-accent: var(--aurelle-login-accent, #C4818E);
	--aurelle-acct-accent-deep: #AC717D;
	--aurelle-acct-on-accent: #fff;
	--aurelle-acct-surface: #fff;
	--aurelle-acct-sunk: #FBF5F3;
	--aurelle-acct-line: rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .2);
	--aurelle-acct-good: #2F7D5B;
	--aurelle-acct-good-bg: #E8F3EE;
	--aurelle-acct-bad: #A32D2D;
	--aurelle-acct-bad-bg: rgba(226, 75, 74, .1);
	--aurelle-acct-wait: #7A4B00;
	--aurelle-acct-wait-bg: #FBEFD9;

	/* Shape and rhythm */
	--aurelle-acct-radius: 14px;
	--aurelle-acct-radius-sm: 10px;
	--aurelle-acct-pad: 24px;
	--aurelle-acct-gap: 20px;
	--aurelle-acct-field-h: 44px;

	/* Layout */
	--aurelle-acct-side-w: 232px;
	--aurelle-acct-split: 48px;

	/* Type */
	/* Cormorant for headings and Roboto for text, as on the rest of the site. Each falls back
	   to Georgia or the system font on a page that does not load it. */
	--aurelle-acct-head-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--aurelle-acct-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* Gift card money - on the card face, the total and the card details - is set as the
	   cards themselves are drawn on the Gift Cards page: Georgia, regular. */
	--aurelle-gc-money-font: Georgia, "Times New Roman", serif;

	display: grid;
	grid-template-columns: var(--aurelle-acct-side-w) minmax(0, 1fr);
	gap: var(--aurelle-acct-split);
	align-items: start;
	width: 100%;
	max-width: 100%;
	color: var(--aurelle-acct-ink);
	font-family: var(--aurelle-acct-font);
	/* Cormorant's default numerals are old-style: each digit a different width, and
	   3, 4, 5, 7 and 9 drop below the line like lowercase letters. In "$100.00" or
	   "3 of 5" that reads as uneven. Lining figures sit level at full height. Roboto
	   already draws its numbers this way, and rules that set their own figure style
	   (gift card prices, tables) keep theirs. */
	font-variant-numeric: lining-nums;
}

.aurelle-acct *,
.aurelle-acct *::before,
.aurelle-acct *::after { box-sizing: border-box; }

/* ── Sidebar ─────────────────────────────────────────────────────── */

.aurelle-acct-side { position: sticky; top: 24px; min-width: 0; }

.aurelle-acct-me {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--aurelle-acct-gap);
	min-width: 0;
}
.aurelle-acct-face { flex: 0 0 auto; line-height: 0; }
.aurelle-acct-face img {
	width: 44px;
	height: 44px;
	max-width: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var(--aurelle-acct-sunk);
}
.aurelle-acct-face--big img { width: 88px; height: 88px; }
.aurelle-acct-who { min-width: 0; }
.aurelle-acct-name {
	display: block;
	font-weight: 600;
	font-size: 14.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aurelle-acct-since { font-size: 12.5px; color: var(--aurelle-acct-muted); }

/* ── Theme-proofing for the portal's buttons ───────────────────────
 * Hello Elementor's reset.css gives every button ([type=button], button,
 * [type=submit]) a #c36 border and colour, padding, centred no-wrap text,
 * and a solid #c36 fill on :hover and :focus. It loads AFTER this file, and
 * an attribute selector weighs the same as a class, so on equal footing the
 * theme won: all 25 buttons in the portal were rendering in its pink.
 *
 * Two measures, both needed:
 * 1. This block clears the theme's button look for the portal's own four
 *    button types. Limited to those classes on purpose, so a form or widget
 *    from elsewhere placed inside the portal is not flattened.
 * 2. Every portal button rule below is scoped under .aurelle-acct, which
 *    outweighs the theme regardless of which stylesheet loads last, and each
 *    type now defines its own :hover and :focus so no state is left to the
 *    theme.
 * ─────────────────────────────────────────────────────────────────── */
.aurelle-acct :is(.aurelle-acct-navlink, .aurelle-acct-btn, .aurelle-acct-link, .aurelle-gcard-modalclose) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: inherit;
	text-align: inherit;
	white-space: normal;
	-webkit-user-select: auto;
	user-select: auto;
	transition: none;
}

.aurelle-acct-nav { display: flex; flex-direction: column; gap: 2px; }
.aurelle-acct .aurelle-acct-navlink {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	width: 100%;
	min-height: 42px;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--aurelle-acct-radius-sm);
	background: none;
	color: var(--aurelle-acct-muted);
	font: inherit;
	font-size: 14.5px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.aurelle-acct .aurelle-acct-navlink:focus { background: none; color: var(--aurelle-acct-muted); }
.aurelle-acct .aurelle-acct-navlink:focus-visible { outline: 2px solid var(--aurelle-acct-accent-deep); outline-offset: 2px; }
.aurelle-acct .aurelle-acct-navlink:hover { background: var(--aurelle-acct-sunk); color: var(--aurelle-acct-ink); }
.aurelle-acct .aurelle-acct-navlink[aria-current="page"] {
	background: var(--aurelle-acct-sunk);
	color: var(--aurelle-acct-ink);
	font-weight: 600;
}
.aurelle-acct .aurelle-acct-navlink--out { margin-top: 10px; border-top: 1px solid var(--aurelle-acct-line); border-radius: 0; }

/* Menu icons: line drawings in currentColor, so each follows its link's colour. */
.aurelle-acct .aurelle-acct-navicon { flex: 0 0 18px; display: inline-flex; color: var(--aurelle-acct-muted); }
.aurelle-acct .aurelle-acct-navicon svg { display: block; width: 18px; height: 18px; }
.aurelle-acct .aurelle-acct-navlink:hover .aurelle-acct-navicon { color: var(--aurelle-acct-ink); }
.aurelle-acct .aurelle-acct-navlink[aria-current="page"] .aurelle-acct-navicon { color: var(--aurelle-acct-accent); }

/* The current section is marked with a short rose bar as well as its background. */
.aurelle-acct .aurelle-acct-navlink[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 2px;
	background: var(--aurelle-acct-accent);
}

/* ── Main column ─────────────────────────────────────────────────── */

.aurelle-acct-main { min-width: 0; }

.aurelle-acct-head { margin-bottom: var(--aurelle-acct-gap); }
.aurelle-acct-title {
	margin: 0;
	font-family: var(--aurelle-acct-head-font);
	font-weight: 600;
	font-size: 34px;
	line-height: 1.2;
	color: var(--aurelle-acct-ink);
}
.aurelle-acct-lede { margin: 6px 0 0; color: var(--aurelle-acct-muted); font-size: 14px; }

.aurelle-acct-panel {
	border: 1px solid var(--aurelle-acct-line);
	border-radius: var(--aurelle-acct-radius);
	padding: var(--aurelle-acct-pad);
	background: var(--aurelle-acct-surface);
	margin-bottom: var(--aurelle-acct-gap);
}
.aurelle-acct-panelhead {
	margin: 0 0 4px;
	font-family: var(--aurelle-acct-head-font);
	font-weight: 600;
	font-size: 23px;
	color: var(--aurelle-acct-ink);
}
.aurelle-acct-why { margin: 0 0 16px; color: var(--aurelle-acct-muted); font-size: 13px; line-height: 1.55; }
.aurelle-acct-why--wide { grid-column: 1 / -1; margin: 0; }
.aurelle-acct-why--meter { margin: 8px 0 0; }

/* An event somebody hosted.
 *
 * Shown only where the night was opened up beforehand, so most accounts
 * never see this at all.
 */

.aurelle-acct-hosted + .aurelle-acct-hosted {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--aurelle-acct-line);
}

.aurelle-acct-hostedhead {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 0 0 10px;
	font-size: 15px;
}
.aurelle-acct-hostedhead span { font-size: 13px; font-weight: 400; color: var(--aurelle-acct-muted); }

.aurelle-acct-hostedlines { list-style: none; margin: 0; padding: 0; }
.aurelle-acct-hostedlines li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px solid var(--aurelle-acct-line);
	font-size: 13.5px;
}
.aurelle-acct-hostedlines li:last-child { border-bottom: 0; }
.aurelle-acct-hostedlines b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The figure the whole setting exists for, so it is not a list row. */
.aurelle-acct-hostedtotal {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin: 12px 0 0;
	padding-top: 11px;
	border-top: 2px solid var(--aurelle-acct-line);
	font-size: 15px;
	font-weight: 600;
}
.aurelle-acct-hostedtotal b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aurelle-acct-hostedtotal + .aurelle-acct-why { margin: 8px 0 0; }


/* ── Notices ─────────────────────────────────────────────────────── */

.aurelle-acct-note {
	margin: 0 0 var(--aurelle-acct-gap);
	padding: 11px 14px;
	border-radius: var(--aurelle-acct-radius-sm);
	font-size: 13.5px;
	line-height: 1.55;
}
.aurelle-acct-note--good { background: var(--aurelle-acct-good-bg); color: var(--aurelle-acct-good); }
.aurelle-acct-note--bad { background: var(--aurelle-acct-bad-bg); color: var(--aurelle-acct-bad); }
.aurelle-acct-note--wait { background: var(--aurelle-acct-wait-bg); color: var(--aurelle-acct-wait); }

/* ── Forms ───────────────────────────────────────────────────────── */

.aurelle-acct-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 14px;
	align-items: start;
}
.aurelle-acct-field { display: block; min-width: 0; }
.aurelle-acct-field--wide { grid-column: 1 / -1; }
.aurelle-acct-label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--aurelle-acct-muted); }

.aurelle-acct-field input[type="text"],
.aurelle-acct-field input[type="email"],
.aurelle-acct-field input[type="tel"],
.aurelle-acct-field input[type="password"],
.aurelle-acct-field select {
	width: 100%;
	max-width: 100%;
	height: var(--aurelle-acct-field-h);
	padding: 0 12px;
	border: 1px solid var(--aurelle-acct-line);
	border-radius: var(--aurelle-acct-radius-sm);
	background: var(--aurelle-acct-surface);
	color: var(--aurelle-acct-ink);
	font: inherit;
}
.aurelle-acct-field input:focus,
.aurelle-acct-field select:focus {
	outline: none;
	border-color: var(--aurelle-acct-accent);
	box-shadow: 0 0 0 3px rgb(var(--aurelle-login-accent-rgb, 196 129 142) / .18);
}
.aurelle-acct-field input[readonly] { background: var(--aurelle-acct-sunk); color: var(--aurelle-acct-muted); }
.aurelle-acct-field--file input { width: 100%; max-width: 100%; font-size: 13px; }

.aurelle-acct-code { letter-spacing: .5em; font-variant-numeric: tabular-nums; }

.aurelle-acct-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 4px 0 0;
}

.aurelle-acct .aurelle-acct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--aurelle-acct-accent);
	border-radius: 999px;
	background: var(--aurelle-acct-accent);
	color: var(--aurelle-acct-on-accent);
	font: inherit;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}
.aurelle-acct .aurelle-acct-btn:hover,
.aurelle-acct .aurelle-acct-btn:focus {
	background: var(--aurelle-acct-accent-deep);
	border-color: var(--aurelle-acct-accent-deep);
	color: var(--aurelle-acct-on-accent);
}
.aurelle-acct .aurelle-acct-btn--ghost {
	background: var(--aurelle-acct-surface);
	color: var(--aurelle-acct-ink);
	border-color: var(--aurelle-acct-line);
}
.aurelle-acct .aurelle-acct-btn--ghost:hover,
.aurelle-acct .aurelle-acct-btn--ghost:focus {
	background: var(--aurelle-acct-sunk);
	border-color: var(--aurelle-acct-accent);
	color: var(--aurelle-acct-ink);
}
.aurelle-acct .aurelle-acct-btn--quiet {
	background: none;
	border-color: transparent;
	color: var(--aurelle-acct-muted);
}
.aurelle-acct .aurelle-acct-btn--quiet:hover,
.aurelle-acct .aurelle-acct-btn--quiet:focus { background: var(--aurelle-acct-sunk); border-color: transparent; color: var(--aurelle-acct-ink); }

.aurelle-acct .aurelle-acct-link {
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--aurelle-acct-accent-deep);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.aurelle-acct .aurelle-acct-link:hover,
.aurelle-acct .aurelle-acct-link:focus {
	background: none;
	border: 0;
	color: var(--aurelle-acct-ink);
	text-decoration: underline;
}

.aurelle-acct-form--cancel { display: block; margin-top: 8px; }

/* ── Facts, pills, meter ─────────────────────────────────────────── */

.aurelle-acct-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px 18px;
	margin: 0;
	font-size: 14px;
}
.aurelle-acct-facts dt { color: var(--aurelle-acct-muted); }
.aurelle-acct-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.aurelle-acct-missing { color: var(--aurelle-acct-muted); }

.aurelle-acct-pill {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--aurelle-acct-sunk);
	color: var(--aurelle-acct-muted);
	font-size: 11.5px;
	font-weight: 600;
}
.aurelle-acct-pill--good { background: var(--aurelle-acct-good-bg); color: var(--aurelle-acct-good); }
.aurelle-acct-pill--wait { background: var(--aurelle-acct-wait-bg); color: var(--aurelle-acct-wait); }

.aurelle-acct-meter {
	height: 6px;
	margin: 18px 0 0;
	border-radius: 3px;
	background: var(--aurelle-acct-line);
	overflow: hidden;
}
.aurelle-acct-meter span {
	display: block;
	height: 100%;
	/* Set by the server as a variable on the element, so the styling
	   itself stays here. */
	width: var(--aurelle-acct-meter, 0%);
	background: var(--aurelle-acct-accent);
}

/* ── Preferences ─────────────────────────────────────────────────── */

.aurelle-acct-pref {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid var(--aurelle-acct-line);
	cursor: pointer;
}
.aurelle-acct-pref:first-of-type { border-top: 0; padding-top: 0; }
.aurelle-acct-pref--service { cursor: default; }
.aurelle-acct-prefwhat { min-width: 0; }
.aurelle-acct-prefwhat b { display: block; font-size: 14.5px; font-weight: 600; }
.aurelle-acct-prefwhat small { display: block; margin-top: 2px; color: var(--aurelle-acct-muted); font-size: 13px; line-height: 1.5; }

.aurelle-acct-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.aurelle-acct-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.aurelle-acct-switch span {
	position: absolute;
	inset: 0;
	border-radius: 13px;
	background: #D9D2CF;
	transition: background .15s;
	pointer-events: none;
}
.aurelle-acct-switch span::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	transition: transform .15s;
}
.aurelle-acct-switch input:checked + span { background: var(--aurelle-acct-accent); }
.aurelle-acct-switch input:checked + span::after { transform: translateX(20px); }
.aurelle-acct-switch input:disabled + span { opacity: .55; }
.aurelle-acct-switch input:focus-visible + span { outline: 2px solid var(--aurelle-acct-accent-deep); outline-offset: 2px; }

/* ── Tables ──────────────────────────────────────────────────────── */

/* A wide table scrolls inside its own box. The page itself never
   scrolls sideways, whatever the column is doing. */
.aurelle-acct-scroll { overflow-x: auto; max-width: 100%; }
.aurelle-acct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.aurelle-acct-table th {
	padding: 0 12px 10px 0;
	border-bottom: 1px solid var(--aurelle-acct-line);
	color: var(--aurelle-acct-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
.aurelle-acct-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--aurelle-acct-line); vertical-align: top; }
.aurelle-acct-table tr:last-child td { border-bottom: 0; }

/* ── One column ──────────────────────────────────────────────────────
 *
 * The question is how wide the CONTAINER is, not the window: on this
 * site the portal sits in a 1200px column inside a full-width wrapper,
 * so a viewport-width rule would be answering about the wrong thing.
 * Container queries where they are supported, and a width query as the
 * fallback for browsers without them.
 * ─────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.aurelle-acct { grid-template-columns: minmax(0, 1fr); gap: var(--aurelle-acct-gap); }
	.aurelle-acct-side { position: static; }
	.aurelle-acct-nav {
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-width: none;
	}
	.aurelle-acct-nav::-webkit-scrollbar { display: none; }
	.aurelle-acct .aurelle-acct-navlink {
		flex: 0 0 auto;
		width: auto;
		min-height: 40px;
		padding: 0 14px;
		border: 1px solid var(--aurelle-acct-line);
		border-radius: 999px;
		line-height: 38px;
	}
	.aurelle-acct .aurelle-acct-navlink--out { display: none; }
	.aurelle-acct .aurelle-acct-navicon,
	.aurelle-acct .aurelle-acct-navlink[aria-current="page"]::before { display: none; }
	.aurelle-acct-title { font-size: 28px; }
}

@supports (container-type: inline-size) {
	.aurelle-acct { container-type: inline-size; container-name: aurelle-acct; }

	@container aurelle-acct (max-width: 900px) {
		.aurelle-acct { grid-template-columns: minmax(0, 1fr); gap: var(--aurelle-acct-gap); }
		.aurelle-acct-side { position: static; }
		.aurelle-acct-nav { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
		.aurelle-acct .aurelle-acct-navlink {
			flex: 0 0 auto;
			width: auto;
			min-height: 40px;
			padding: 0 14px;
			border: 1px solid var(--aurelle-acct-line);
			border-radius: 999px;
			line-height: 38px;
		}
		.aurelle-acct .aurelle-acct-navlink--out { display: none; }
		.aurelle-acct .aurelle-acct-navicon,
		.aurelle-acct .aurelle-acct-navlink[aria-current="page"]::before { display: none; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.aurelle-acct * { transition: none !important; }
}

/* ═══ Gift cards in the portal ══════════════════════════════════════
 *
 * Same contract as the rest: every piece has a class, sizes come from
 * the portal's variables, and the two knobs below are the ones worth
 * changing. A card is a <details>, so folding is the browser's own and
 * the whole section works with no script at all.
 * ═══════════════════════════════════════════════════════════════════ */

.aurelle-gcards {
	/* The width render_gift_card_html() is called with in gift_card_for_portal(). */
	--aurelle-gcard-min: 320px;
	--aurelle-gcard-radius: var(--aurelle-acct-radius, 14px);
}

/*
 * The label and the sum, together. They used to be pushed to opposite
 * ends of the whole column, which left the total marooned on the far
 * right with nothing beside it.
 */
.aurelle-gcards-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 16px;
}
.aurelle-gcards-totallabel { font-size: 12.5px; color: var(--aurelle-acct-muted, #8E9399); }
.aurelle-gcards-totalsum {
	font-family: var(--aurelle-gc-money-font, Georgia, serif);
	font-size: 28px;
	color: var(--aurelle-acct-ink, #453A40);
	font-variant-numeric: tabular-nums;
}

/*
 * A column is the width the card is drawn at, so in the ordinary case
 * the artwork is shown at its own size and nothing has to be scaled at
 * all. Narrower than that -- a phone -- and the scaling below takes
 * over. justify-content keeps a half-empty last row to the left instead
 * of spreading two cards across the whole width.
 */
.aurelle-gcards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--aurelle-gcard-min), 100%), var(--aurelle-gcard-min)));
	justify-content: start;
	gap: 18px;
	align-items: start;
}

.aurelle-gcard {
	border: 1px solid var(--aurelle-acct-line, rgba(196, 129, 142, .2));
	border-radius: var(--aurelle-gcard-radius);
	background: var(--aurelle-acct-surface, #fff);
	overflow: hidden;
	min-width: 0;
}

/* Open, a card takes the whole row: its ledger is a table, and a table
   in a 260px column is a column of stumps. */
.aurelle-gcard[open] { grid-column: 1 / -1; }

.aurelle-gcard-face { display: block; position: relative; cursor: pointer; list-style: none; }
.aurelle-gcard-face::-webkit-details-marker { display: none; }

/*
 * The artwork is drawn at a fixed size, because the same renderer draws
 * it into an email where there is no stylesheet: it writes its width in
 * pixels and positions everything inside it in pixels to match.
 *
 * So it is scaled rather than stretched. Forcing the outer box wider
 * left the picture inside at its original size, which is what clipped
 * it; scaling the whole thing takes the picture, the gradient and every
 * inch of the layout with it.
 *
 * 320 is the width render_gift_card_html() is called with in
 * gift_card_for_portal(). The two have to agree.
 */
.aurelle-gcard-art {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1.6;
	line-height: 0;
	container-type: inline-size;
}
.aurelle-gcard-art > div {
	transform-origin: top left;
	border-radius: 0 !important;
}

@supports (container-type: inline-size) {
	.aurelle-gcard-art > div { transform: scale(calc(100cqw / 320)); }
}

/* Without container queries the card sits at its drawn size rather than
   being stretched out of shape; the column is wide enough for it. */
@supports not (container-type: inline-size) {
	.aurelle-gcard-art { aspect-ratio: auto; }
	.aurelle-gcard-art > div { margin: 0 auto; }
}

/*
 * The balance and the card number sit over the artwork, each pinned to
 * its own corner: the number bottom left, where a card carries one.
 */
/*
 * Exactly over the artwork, not over the whole tile.
 *
 * It used to be inset:0 against the summary, which stretches past the
 * picture and down over the name -- so the card number, set in white
 * for a dark card, was being drawn in white on the white body. The
 * ratio here is the card's own, so this box is the picture's box.
 */
.aurelle-gcard-over {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 1.6;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
	pointer-events: none;
}
.aurelle-gcard-balance {
	position: absolute;
	top: 14px;
	left: 14px;
	font-family: var(--aurelle-gc-money-font, Georgia, serif);
	font-size: 24px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.aurelle-gcard-num {
	position: absolute;
	left: 14px;
	bottom: 13px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .08em;
}

/* ── The card's own page, in a popup ─────────────────────────────── */

.aurelle-gcard-modal {
	width: min(440px, calc(100% - 32px));
	max-width: 100%;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--aurelle-acct-radius, 14px);
	background: var(--aurelle-acct-surface, #fff);
	overflow: hidden;
}
.aurelle-gcard-modal::backdrop { background: rgba(46, 39, 43, .55); }
.aurelle-gcard-modalbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 10px 12px 18px;
	border-bottom: 1px solid var(--aurelle-acct-line, rgba(196, 129, 142, .2));
}
.aurelle-gcard-modalname {
	font-family: var(--aurelle-acct-head-font, Georgia, serif);
	font-weight: 600;
	font-size: 21px;
	color: var(--aurelle-acct-ink, #453A40);
}
.aurelle-acct .aurelle-gcard-modalclose {
	width: 40px;
	height: 40px;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--aurelle-acct-ink, #453A40);
	font: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.aurelle-acct .aurelle-gcard-modalclose:hover,
.aurelle-acct .aurelle-gcard-modalclose:focus { background: var(--aurelle-acct-sunk, #FBF5F3); color: var(--aurelle-acct-ink, #453A40); }
.aurelle-gcard-modalacts { display: flex; align-items: center; gap: 10px; flex: none; }
.aurelle-gcard-frame { display: block; width: 100%; height: min(70vh, 620px); border: 0; }

.aurelle-gcard-body { display: block; padding: 14px 16px 16px; }
.aurelle-gcard-name { display: block; font-weight: 600; color: var(--aurelle-acct-ink, #453A40); }
.aurelle-gcard-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--aurelle-acct-muted, #8E9399);
}
.aurelle-gcard-open {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aurelle-acct-accent-deep, #AC717D);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.aurelle-gcard[open] .aurelle-gcard-open::after { content: " \2014 close"; }

/* A card that cannot be spent says so by being quieter, not by
   shouting: the pill inside already names the reason. */
.aurelle-gcard--is-used .aurelle-gcard-art,
.aurelle-gcard--is-closed .aurelle-gcard-art { opacity: .55; }

.aurelle-gcard-detail { padding: 4px 16px 18px; border-top: 1px solid var(--aurelle-acct-line, rgba(196, 129, 142, .2)); }

.aurelle-gcard-left { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 0; }
.aurelle-gcard-leftsum {
	font-family: var(--aurelle-gc-money-font, Georgia, serif);
	font-size: 26px;
	font-variant-numeric: tabular-nums;
	color: var(--aurelle-acct-ink, #453A40);
}
.aurelle-gcard-leftof { font-size: 13px; color: var(--aurelle-acct-muted, #8E9399); }

.aurelle-gcard-meter {
	height: 6px;
	margin: 10px 0 18px;
	border-radius: 3px;
	background: var(--aurelle-acct-line, rgba(196, 129, 142, .2));
	overflow: hidden;
}
.aurelle-gcard-meter span {
	display: block;
	height: 100%;
	width: var(--aurelle-gcard-left, 0%);
	background: var(--aurelle-acct-accent, #C4818E);
}

.aurelle-gcard-facts { margin-bottom: 18px; }
.aurelle-gcard-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aurelle-gcard-code code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 14px;
	letter-spacing: .06em;
	overflow-wrap: anywhere;
}
.aurelle-gcard-message { font-style: italic; }

.aurelle-gcard-activityhead {
	margin: 0 0 10px;
	font-family: var(--aurelle-acct-head-font, Georgia, serif);
	font-weight: 600;
	font-size: 19px;
	color: var(--aurelle-acct-ink, #453A40);
}
.aurelle-gcard-activity td:nth-child(3),
.aurelle-gcard-activity td:nth-child(4),
.aurelle-gcard-activity th:nth-child(3),
.aurelle-gcard-activity th:nth-child(4) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Adding one by code */
.aurelle-gcard--add { border-style: dashed; border-color: var(--aurelle-acct-accent, #C4818E); background: var(--aurelle-acct-sunk, #FBF5F3); }
.aurelle-gcard-addface {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 180px;
	padding: 20px;
	color: var(--aurelle-acct-accent-deep, #AC717D);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	list-style: none;
}
.aurelle-gcard-addface::-webkit-details-marker { display: none; }
.aurelle-gcard--add[open] .aurelle-gcard-addface { min-height: 0; }
.aurelle-gcard-addmark { font-size: 26px; line-height: 1; }

.aurelle-gcards-check { margin: 16px 0 0; font-size: 13px; }

/*
 * Unfolded, a card takes the whole row so its ledger has room. The
 * artwork must not be blown up to match -- it is a picture drawn at a
 * fixed size, and stretched across a full-width row it would be both
 * enormous and soft.
 */
.aurelle-gcard[open] .aurelle-gcard-face { max-width: var(--aurelle-gcard-min); }

/* ═══ Overview ══════════════════════════════════════════════════════
 *
 * Three tiles and a feed, both fluid and both stacking inside a narrow
 * container. The knobs are here; everything else comes from the
 * portal's own variables.
 * ═══════════════════════════════════════════════════════════════════ */

.aurelle-acct-view--overview {
	--aurelle-acct-tile-min: 150px;
	--aurelle-acct-feed-mark: 30px;
}

.aurelle-acct-head--greet {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
}
.aurelle-acct-greet { min-width: 0; }

.aurelle-acct-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--aurelle-acct-tile-min), 100%), 1fr));
	gap: 14px;
	margin-bottom: var(--aurelle-acct-gap, 20px);
}
.aurelle-acct-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
	padding: 16px 18px;
	border: 1px solid var(--aurelle-acct-line, rgba(196, 129, 142, .2));
	border-radius: var(--aurelle-acct-radius, 14px);
	background: var(--aurelle-acct-sunk, #FBF5F3);
}
.aurelle-acct-tilelabel {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--aurelle-acct-accent-deep, #AC717D);
}
.aurelle-acct-tilevalue {
	margin-top: 6px;
	font-family: var(--aurelle-acct-head-font, Georgia, serif);
	font-weight: 600;
	font-size: 27px;
	line-height: 1.1;
	color: var(--aurelle-acct-ink, #453A40);
	overflow-wrap: anywhere;
}
.aurelle-acct-tilenote { font-size: 13px; color: #6B5B62; }
.aurelle-acct-tile.is-empty .aurelle-acct-tilevalue { font-size: 22px; color: var(--aurelle-acct-muted, #8E9399); }

/* Activity on the left, the details panel beside it. */
.aurelle-acct-split {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: var(--aurelle-acct-gap, 20px);
	align-items: start;
}
.aurelle-acct-split > * { min-width: 0; margin-bottom: 0; }

.aurelle-acct-feed { list-style: none; margin: 0; padding: 0; }
.aurelle-acct-feedrow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--aurelle-acct-line, rgba(196, 129, 142, .2));
}
.aurelle-acct-feedrow:first-child { border-top: 0; padding-top: 0; }
.aurelle-acct-feedmark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--aurelle-acct-feed-mark);
	height: var(--aurelle-acct-feed-mark);
	flex: none;
	border-radius: 50%;
	background: var(--aurelle-acct-sunk, #FBF5F3);
	color: var(--aurelle-acct-accent-deep, #AC717D);
	font-size: 14px;
	line-height: 1;
}

/*
 * What kind of thing happened, drawn rather than written, so the feed
 * can be read down its left edge without reading every line.
 */
.aurelle-acct-feedrow--booking .aurelle-acct-feedmark::before { content: "\2713"; }
.aurelle-acct-feedrow--card .aurelle-acct-feedmark::before { content: "\25CF"; font-size: 10px; }
.aurelle-acct-feedrow--account .aurelle-acct-feedmark::before { content: "\2022"; }

.aurelle-acct-feedwhat { min-width: 0; }
.aurelle-acct-feedwhat b { display: block; font-weight: 600; font-size: 14px; }
.aurelle-acct-feedwhat span { display: block; font-size: 12.5px; color: var(--aurelle-acct-muted, #8E9399); }
.aurelle-acct-feedsum {
	margin-left: auto;
	padding-left: 10px;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.aurelle-acct-feedsum.is-up { color: var(--aurelle-acct-good, #2F7D5B); }

@media (max-width: 900px) {
	.aurelle-acct-split { grid-template-columns: minmax(0, 1fr); }
}

@supports (container-type: inline-size) {
	@container aurelle-acct (max-width: 760px) {
		.aurelle-acct-split { grid-template-columns: minmax(0, 1fr); }
		.aurelle-acct-book { width: 100%; }
	}
}

/* ── Devices, and the data tools ─────────────────────────────────── */

.aurelle-acct-devices { list-style: none; margin: 0 0 4px; padding: 0; }
.aurelle-acct-device {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 13px 0;
	border-top: 1px solid var(--aurelle-acct-line, rgba(196, 129, 142, .2));
}
.aurelle-acct-device:first-child { border-top: 0; padding-top: 0; }
.aurelle-acct-devicewhat { min-width: 0; margin-right: auto; }
.aurelle-acct-devicewhat b { display: block; font-weight: 600; font-size: 14.5px; }
.aurelle-acct-devicewhat span { display: block; font-size: 12.5px; color: var(--aurelle-acct-muted, #8E9399); }
.aurelle-acct-device.is-here .aurelle-acct-pill { background: var(--aurelle-acct-good-bg, #E8F3EE); color: var(--aurelle-acct-good, #2F7D5B); }

.aurelle-acct-form--signout { display: block; margin-top: 14px; }

/* Two buttons that do very different things, so they do not sit as a
   matched pair: one is a copy, the other is the end of an account. */
.aurelle-acct-panel--data .aurelle-acct-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aurelle-acct-form--export,
.aurelle-acct-form--erase { display: block; }

/* ── A booking, as a card with its date ──────────────────────────── */

.aurelle-acct-view--bookings { --aurelle-acct-date-w: 84px; }

.aurelle-acct-booking {
	display: grid;
	grid-template-columns: var(--aurelle-acct-date-w) minmax(0, 1fr) auto;
	gap: 18px;
	align-items: start;
}
.aurelle-acct-date {
	display: block;
	padding: 10px 6px;
	border-radius: var(--aurelle-acct-radius-sm, 10px);
	background: var(--aurelle-acct-sunk, #FBF5F3);
	text-align: center;
}
.aurelle-acct-datemonth,
.aurelle-acct-dateweekday {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--aurelle-acct-accent-deep, #AC717D);
}
.aurelle-acct-dateday {
	display: block;
	font-family: var(--aurelle-acct-head-font, Georgia, serif);
	font-weight: 600;
	font-size: 32px;
	line-height: 1.1;
	color: var(--aurelle-acct-ink, #453A40);
}

.aurelle-acct-bookingwhat { min-width: 0; }
.aurelle-acct-bookingwhat .aurelle-acct-panelhead { margin-bottom: 8px; }
.aurelle-acct-bookingfacts {
	list-style: none;
	display: grid;
	gap: 3px;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	color: #6B5B62;
}
.aurelle-acct-bookingpills { margin: 10px 0 0; }
.aurelle-acct-bookingacts { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* Narrow: the date keeps its place beside the name, and the buttons
   drop underneath rather than squeezing the middle to nothing. */
@media (max-width: 560px) {
	.aurelle-acct-booking { grid-template-columns: 64px minmax(0, 1fr); }
	.aurelle-acct-bookingacts { grid-column: 1 / -1; flex-direction: row; align-items: center; }
	.aurelle-acct-dateday { font-size: 28px; }
}

@supports (container-type: inline-size) {
	@container aurelle-acct (max-width: 560px) {
		.aurelle-acct-booking { grid-template-columns: 64px minmax(0, 1fr); }
		.aurelle-acct-bookingacts { grid-column: 1 / -1; flex-direction: row; align-items: center; }
	}
}

/* ── A data request already waiting ──────────────────────────────── */

.aurelle-acct-requests { list-style: none; margin: 0 0 16px; padding: 0; }
.aurelle-acct-request {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--aurelle-acct-line, rgba(196, 129, 142, .2));
	border-radius: var(--aurelle-acct-radius-sm, 10px);
	background: var(--aurelle-acct-sunk, #FBF5F3);
}
.aurelle-acct-request + .aurelle-acct-request { margin-top: 8px; }
.aurelle-acct-requestwhat { min-width: 0; margin-right: auto; }
.aurelle-acct-requestwhat b { display: block; font-weight: 600; font-size: 14px; }
.aurelle-acct-requestwhat span { display: block; font-size: 12.5px; color: var(--aurelle-acct-muted, #8E9399); }
.aurelle-acct-request.is-confirmed { border-color: rgba(47, 125, 91, .3); background: var(--aurelle-acct-good-bg, #E8F3EE); }
.aurelle-acct-form--cancel { display: block; margin: 0; }
.aurelle-acct .aurelle-acct-requestacts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.aurelle-acct .aurelle-acct-requestacts:empty { display: none; }
.aurelle-acct .aurelle-acct-form--again { display: block; margin: 0; }


/* ── [aurelle_account_greeting]: the banner greeting ────────────────
 * Sits in an Elementor Shortcode widget over the My Account hero. White
 * by default for the dark photo; tone="dark" for a light background.
 * Colours and font are custom properties so a theme can retune them.
 * ─────────────────────────────────────────────────────────────────── */
.aurelle-greet {
	--aurelle-greet-ink: #FFFFFF;
	--aurelle-greet-soft: rgb(255 255 255 / .85);
	--aurelle-greet-accent: #F3D3D6;
	--aurelle-greet-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	color: var(--aurelle-greet-ink);
}
.aurelle-greet--light { text-shadow: 0 1px 14px rgb(0 0 0 / .35); }
.aurelle-greet--dark {
	--aurelle-greet-ink: var(--aurelle-login-text, #453A40);
	--aurelle-greet-soft: var(--aurelle-login-muted, #6B6167);
	--aurelle-greet-accent: #9B5F6C;
}
.aurelle-greet__eyebrow {
	display: block;
	margin: 0 0 10px;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--aurelle-greet-accent);
}
.aurelle-greet .aurelle-greet__title {
	margin: 0;
	font-family: var(--aurelle-greet-font);
	font-size: clamp(34px, 4.5vw, 48px);
	font-weight: 600;
	line-height: 1.1;
	color: var(--aurelle-greet-ink);
}
.aurelle-greet .aurelle-greet__line {
	margin: 8px 0 0;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
	font-size: 14.5px;
	color: var(--aurelle-greet-soft);
}


/* ── Where you are signed in: one line per device ─────────────────── */
.aurelle-acct .aurelle-acct-deviceout { margin: 0; flex: none; }
.aurelle-acct .aurelle-acct-deviceout .aurelle-acct-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.aurelle-acct .aurelle-acct-moredevices { margin: 6px 0 4px; }
.aurelle-acct .aurelle-acct-moredevices > summary { display: inline-block; list-style: none; cursor: pointer; }
.aurelle-acct .aurelle-acct-moredevices > summary::-webkit-details-marker { display: none; }
.aurelle-acct .aurelle-acct-moredevices[open] > summary { margin-bottom: 8px; }


/* ── Two things the theme was deciding for the portal ─────────────── */

/* A plain link with no class of its own takes the portal's link colour,
   not the theme's (#c36). */
.aurelle-acct a:not([class]) { color: var(--aurelle-acct-accent-deep); text-underline-offset: 3px; }
.aurelle-acct a:not([class]):hover { color: var(--aurelle-acct-ink); }

/* After a section switch the script focuses its heading, so a screen reader
   announces where it landed. The heading isn't something to press, so the
   browser's default focus ring on it is only a stray box on screen. */
.aurelle-acct .aurelle-acct-title[tabindex="-1"]:focus { outline: none; }


/* ── Ways to sign in ───────────────────────────────────────────────── */
.aurelle-acct .aurelle-acct-ways { list-style: none; margin: 0; padding: 0; }
.aurelle-acct .aurelle-acct-way { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--aurelle-acct-line); }
.aurelle-acct .aurelle-acct-way:first-child { border-top: 0; padding-top: 0; }
.aurelle-acct .aurelle-acct-wayicon { flex: 0 0 36px; height: 36px; border-radius: var(--aurelle-acct-radius-sm); background: var(--aurelle-acct-sunk); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--aurelle-acct-ink); letter-spacing: .05em; }
.aurelle-acct .aurelle-acct-waywhat { min-width: 0; margin-right: auto; }
.aurelle-acct .aurelle-acct-waywhat b { display: block; font-weight: 600; font-size: 14.5px; }
.aurelle-acct .aurelle-acct-waywhat span { display: block; font-size: 12.5px; color: var(--aurelle-acct-muted); overflow-wrap: anywhere; }
.aurelle-acct .aurelle-acct-wayform { margin: 0; flex: none; }
.aurelle-acct .aurelle-acct-wayform .aurelle-acct-btn,
.aurelle-acct .aurelle-acct-wayconnect { min-height: 34px; padding: 0 14px; font-size: 13px; flex: none; }
.aurelle-acct .aurelle-acct-waynote { flex: none; font-size: 12.5px; color: var(--aurelle-acct-muted); }

/* ── Your pieces ──────────────────────────────────────────────── */

/* Four to a page fills this grid at laptop width and halves cleanly
   on a tablet, so a page never ends with one card alone in a row. */
.aurelle-pieces {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aurelle-piece {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--aurelle-line, rgba(196, 129, 142, .3));
	border-radius: var(--aurelle-radius, 14px);
	overflow: hidden;
	background: var(--aurelle-surface, #fff);
}

.aurelle-piece-art {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-bottom: 1px solid var(--aurelle-line, rgba(196, 129, 142, .3));
	background: var(--aurelle-tint, #FBF5F3);
}

/* Says so rather than leaving a hole, because most pieces will have
   no photograph until the catalogue has been gone through. */
.aurelle-piece-art--none {
	display: grid;
	place-items: center;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aurelle-silver, #8E9399);
}

.aurelle-piece-b {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .15rem;
	padding: .85rem .9rem;
	min-width: 0;
}

.aurelle-piece-name {
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.aurelle-piece-meta {
	font-size: .78rem;
	color: var(--aurelle-silver, #8E9399);
	overflow-wrap: break-word;
}

.aurelle-piece-paid {
	font-size: .75rem;
	color: var(--aurelle-rose-deep, #AC717D);
}

.aurelle-piece-f {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: .65rem;
}

.aurelle-piece-cover {
	padding: .3rem .5rem;
	border-radius: var(--aurelle-radius-pill, 999px);
	background: var(--aurelle-tint, #FBF5F3);
	color: var(--aurelle-rose-deep, #AC717D);
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
}

.aurelle-piece-price {
	font-size: .85rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ── Paging through them ──────────────────────────────────────── */

.aurelle-pieces-pager {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--aurelle-line, rgba(196, 129, 142, .3));
}

.aurelle-pieces-said {
	font-size: .82rem;
	color: var(--aurelle-silver, #8E9399);
}

.aurelle-pieces-said b {
	color: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.aurelle-pieces-go {
	display: flex;
	gap: .35rem;
	align-items: center;
}

/* Big enough to press with a thumb, since most of these are read on
   a phone. */
.aurelle-pieces-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .6rem;
	border: 1px solid var(--aurelle-line, rgba(196, 129, 142, .3));
	border-radius: var(--aurelle-radius-sm, 8px);
	background: var(--aurelle-surface, #fff);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	color: inherit;
}

.aurelle-pieces-step.is-on {
	background: var(--aurelle-rose, #C4818E);
	border-color: var(--aurelle-rose, #C4818E);
	color: #fff;
}

.aurelle-pieces-step.is-off {
	color: var(--aurelle-faint, #c9ccce);
	background: var(--aurelle-bg, #F6F1ED);
}

.aurelle-pieces-dots {
	display: flex;
	gap: .45rem;
	align-items: center;
}

.aurelle-pieces-dot {
	width: .5rem;
	height: .5rem;
	border-radius: var(--aurelle-radius-pill, 999px);
	background: var(--aurelle-line, rgba(196, 129, 142, .3));
}

.aurelle-pieces-dot.is-on {
	width: 1.4rem;
	background: var(--aurelle-rose, #C4818E);
}

.aurelle-pieces-more {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 1.15rem;
	border: 1px solid var(--aurelle-line, rgba(196, 129, 142, .3));
	border-radius: var(--aurelle-radius-pill, 999px);
	background: var(--aurelle-surface, #fff);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.aurelle-pieces-empty b {
	display: block;
	margin-bottom: .3rem;
}

/*
 * Where a piece stands under the Limited Weld Warranty.
 *
 * Covered reads as reassurance, ended reads as a price rather than a
 * warning - an old piece is not a problem, it is simply past its free
 * period. Neither leans on colour alone; the words carry the state.
 */
.aurelle-piece-cover.is-covered {
	color: #3B6D11;
}

.aurelle-piece-cover.is-ended {
	color: #8E9399;
}

/* ── Texts, in Communication ───────────────────────────────────────────
 *
 * The two text choices sit in their own block with a line saying where
 * texts go - or why there are no switches: no mobile number yet, or the
 * number replied STOP and only START can turn texts back on.
 * ------------------------------------------------------------------ */
.aurelle-acct .aurelle-acct-texts {
	/*
	 * Across the form, as the rows above and below it are. The form
	 * is an auto-fit grid of 220px tracks and every .aurelle-acct-pref
	 * spans it; this block did not, so it sat in one 220px column and
	 * the text choices wrapped to a third of the width of the email
	 * ones beside them.
	 */
	grid-column: 1 / -1;
	margin: 4px 0 0;
}
.aurelle-acct .aurelle-acct-textsnote {
	margin: 0 0 10px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--aurelle-acct-tint, rgba(196, 129, 142, .10));
	font-size: 13.5px;
	color: var(--aurelle-acct-muted, #8E9399);
}
.aurelle-acct .aurelle-acct-textsnote b {
	color: var(--aurelle-acct-ink, #453A40);
	font-weight: 600;
}
.aurelle-acct .aurelle-acct-textsnote.is-stopped {
	background: #FBEFD9;
	color: #7A4B00;
}
.aurelle-acct .aurelle-acct-textsnote.is-stopped b {
	color: #7A4B00;
}
.aurelle-acct .aurelle-acct-texts .aurelle-acct-prefwhat small {
	line-height: 1.55;
}

/* ── Can we stay in touch? (Overview, one time) ──────────────────────
   Shown only to accounts older than the question itself. Outlined
   rather than tinted, so it reads as a question rather than a warning.

   Its rows are the same .aurelle-acct-pref + .aurelle-acct-switch as
   Communication. There used to be a second, unscoped .aurelle-acct-pref
   rule here for a bare checkbox; it never reset the first rule's
   justify-content: space-between, so the checkbox sat on the far left
   and its words were pushed to the far right. It also put a 3px top
   margin on Communication's switch inputs. Only card spacing lives
   here now, scoped to the card. */
.aurelle-acct-prefsask {
	border: 1px solid var(--aurelle-line, rgba(196,129,142,.24));
	border-radius: 14px;
	padding: 20px 22px;
	margin: 0 0 22px;
}
.aurelle-acct-prefsask .aurelle-acct-panelhead + .aurelle-acct-why { margin: 0 0 6px; }
.aurelle-acct-prefsask .aurelle-acct-pref { align-items: center; padding: 14px 0; }
.aurelle-acct-prefsask .aurelle-acct-pref:first-of-type { padding-top: 8px; }
.aurelle-acct-prefsask .aurelle-acct-why--wide { margin: 6px 0 0; }
.aurelle-acct-prefsask .aurelle-acct-actions { gap: 18px; margin-top: 16px; }

/* Its "Ask me later" button sits in the card (form="…"); this form only
   carries the nonce and action, so it takes no room. */
.aurelle-acct-prefslater { display: none; }

/* ── How was your visit ──────────────────────────────────────────────
   Only appears once somebody has actually been to something. */
.aurelle-acct-review {
	border: 1px solid var(--aurelle-line, rgba(196,129,142,.24));
	border-radius: 14px;
	padding: 20px 22px;
	margin: 0 0 22px;
	box-shadow: 0 0 0 3px rgba(196, 129, 142, .14);
}

.aurelle-acct-review .aurelle-acct-actions {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 14px;
	flex-wrap: wrap;
}

/*
 * The line saying when news and offers were agreed to, above the
 * button rather than adrift under the panel. Both span the form's
 * grid, so they stack instead of sharing a 220px track.
 */
.aurelle-acct .aurelle-acct-form--prefs .aurelle-acct-why {
	grid-column: 1 / -1;
	margin: 16px 0 0;
}
.aurelle-acct .aurelle-acct-form--prefs .aurelle-acct-actions {
	grid-column: 1 / -1;
	margin-top: 14px;
}