/* Eventive remains the transaction UI. These variables are the shared theme seam. */
.Eventive--Dialog.eventive-widget-container,
.Eventive--Checkout,
.Eventive--LoginPage,
.eventive-account-container,
.eventive-ticket-barcode-modal,
.eventive-show-pass-barcode-modal,
.eventive-edit-pass-modal {
	--slo-ec-surface: var(--sloff-surface-1, #111111);
	--slo-ec-surface-raised: var(--sloff-surface-2, #1a1a1a);
	--slo-ec-text: var(--sloff-text, #ffffff);
	--slo-ec-muted: var(--sloff-text-muted, rgba(255, 255, 255, .68));
	--slo-ec-line: var(--sloff-line-strong, rgba(255, 255, 255, .24));
	--slo-ec-line-input: var(--sloff-line-input, rgba(255, 255, 255, .42));
	--slo-ec-accent: var(--sloff-fest-accent, #bbc238);
	--slo-ec-radius: 14px;
	--slo-ec-font: var(--sloff-font, Montserrat, system-ui, sans-serif);
	color: var(--slo-ec-text);
	font-family: var(--slo-ec-font);
}

.Eventive--Dialog.eventive-widget-container.slo-ec-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	width: 100% !important;
	height: 100vh !important;
	height: 100dvh !important;
	max-height: 100dvh !important;
	box-sizing: border-box;
	padding: clamp(12px, 3vh, 32px) 16px !important;
	background: rgba(0, 0, 0, .76) !important;
	overscroll-behavior: contain !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.slo-ec-overlay [data-iframe-height] {
	width: min(100%, 720px) !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 auto !important;
	padding-bottom: 0 !important;
	transform: none !important;
}

.slo-ec-overlay .eventive-background-container,
.slo-ec-overlay .eventive-content-container {
	position: relative;
	box-sizing: border-box;
	background: var(--slo-ec-surface);
	color: var(--slo-ec-text);
	border: 1px solid var(--slo-ec-line);
	border-radius: var(--slo-ec-radius);
}

.Eventive--Dialog.eventive-widget-container.slo-ec-overlay .slo-ec-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	width: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--slo-ec-line);
	border-radius: 999px;
	background: var(--slo-ec-surface);
	color: var(--slo-ec-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.slo-ec-overlay .Eventive--Checkout,
.slo-ec-overlay .Eventive--LoginPage {
	box-sizing: border-box;
	width: min(100%, 720px);
	margin-inline: auto;
	padding: clamp(16px, 3vw, 28px);
	background: var(--slo-ec-surface);
	color: var(--slo-ec-text);
	font-family: var(--slo-ec-font);
}

.Eventive--Checkout h1,
.Eventive--Checkout h2,
.Eventive--Checkout h3,
.Eventive--LoginPage h1,
.Eventive--LoginPage h2,
.Eventive--LoginPage h3,
.eventive-account-container h1,
.eventive-account-container h2,
.eventive-account-container h3 {
	color: var(--slo-ec-text);
	font-family: var(--slo-ec-font);
}

.Eventive--Checkout button,
.Eventive--LoginPage button,
.eventive-account-container button,
.eventive-ticket-barcode-modal button,
.eventive-show-pass-barcode-modal button,
.eventive-edit-pass-modal button {
	min-height: 44px;
	border-color: var(--slo-ec-line);
	border-radius: 999px;
	font-family: var(--slo-ec-font);
}

.Eventive--Checkout input,
.Eventive--Checkout select,
.Eventive--LoginPage input,
.Eventive--LoginPage select,
.eventive-account-container input,
.eventive-account-container select,
.eventive-edit-pass-modal input {
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid var(--slo-ec-line-input);
	border-radius: 8px;
	background: var(--slo-ec-surface-raised);
	color: var(--slo-ec-text);
}

.Eventive--Checkout a,
.Eventive--LoginPage a,
.eventive-account-container a,
.eventive-ticket-barcode-modal a,
.eventive-show-pass-barcode-modal a {
	color: var(--slo-ec-accent);
}

.eventive-account-container .eventive-ticket-card,
.eventive-account-container .eventive-pass-card,
.eventive-account-container .account-tickets,
.eventive-account-container .account-passes,
.eventive-account-container .account-details {
	background-color: var(--slo-ec-surface);
	color: var(--slo-ec-text);
}

.eventive-account-container [data-slo-ec-account-tab][aria-selected="true"] {
	border-color: var(--slo-ec-accent);
	color: var(--slo-ec-accent);
}

.eventive-ticket-barcode-modal,
.eventive-show-pass-barcode-modal,
.eventive-edit-pass-modal {
	background: var(--slo-ec-surface);
	color: var(--slo-ec-text);
}

.eventive-ticket-barcode-modal img,
.eventive-show-pass-barcode-modal img {
	max-width: 100%;
	height: auto;
}

/* Shared visual pass: presentation only; Eventive retains every action and value. */
.Eventive--Checkout,
.Eventive--LoginPage,
.eventive-account-container {
	font-size: 16px;
	line-height: 1.5;
}

.Eventive--Checkout h1,
.Eventive--LoginPage h1,
.eventive-account-container h1 {
	font-size: clamp(26px, 4vw, 36px);
	line-height: 1.12;
}

.Eventive--Checkout h2,
.Eventive--LoginPage h2,
.eventive-account-container h2 {
	font-size: clamp(20px, 3vw, 26px);
	line-height: 1.2;
}

.Eventive--Checkout .eventive-ticket-card,
.Eventive--Checkout .eventive-pass-card,
.eventive-account-container .eventive-ticket-card,
.eventive-account-container .eventive-pass-card,
.eventive-account-container .account-tickets,
.eventive-account-container .account-passes,
.eventive-account-container .account-details,
.eventive-ticket-barcode-modal,
.eventive-show-pass-barcode-modal,
.eventive-edit-pass-modal {
	border: 1px solid var(--slo-ec-line);
	border-radius: var(--slo-ec-radius);
	background: var(--slo-ec-surface-raised);
}

.Eventive--Checkout button,
.Eventive--Checkout [role="button"],
.Eventive--LoginPage button,
.Eventive--LoginPage [role="button"],
.eventive-account-container button,
.eventive-ticket-barcode-modal button,
.eventive-show-pass-barcode-modal button,
.eventive-edit-pass-modal button {
	padding-inline: 18px;
	background-color: var(--slo-ec-surface-raised);
	color: var(--slo-ec-text);
	font-size: 14px;
	font-weight: 700;
}

.Eventive--Checkout button:focus-visible,
.Eventive--Checkout a:focus-visible,
.Eventive--Checkout input:focus-visible,
.Eventive--Checkout select:focus-visible,
.Eventive--LoginPage button:focus-visible,
.Eventive--LoginPage a:focus-visible,
.Eventive--LoginPage input:focus-visible,
.Eventive--LoginPage select:focus-visible,
.eventive-account-container button:focus-visible,
.eventive-account-container a:focus-visible,
.eventive-account-container input:focus-visible,
.eventive-account-container select:focus-visible,
.eventive-ticket-barcode-modal button:focus-visible,
.eventive-show-pass-barcode-modal button:focus-visible,
.eventive-edit-pass-modal button:focus-visible,
.eventive-edit-pass-modal input:focus-visible {
	outline: 3px solid var(--slo-ec-accent);
	outline-offset: 3px;
}

.Eventive--Checkout input::placeholder,
.Eventive--LoginPage input::placeholder,
.eventive-account-container input::placeholder,
.eventive-edit-pass-modal input::placeholder {
	color: var(--slo-ec-muted);
	opacity: 1;
}

@media (max-width: 767px) {
	.Eventive--Dialog.eventive-widget-container.slo-ec-overlay {
		padding: 48px 0 0 !important;
		/* iPhone Safari tints its bottom bar from what's behind the bottom edge; through the see-through backdrop
		   that was the page (a suggested pass's yellow outline turned it yellow). Dimmed page at the top only. */
		background: linear-gradient(rgba(0, 0, 0, .76) 0 64px, #000000 64px) !important;
	}

	.slo-ec-overlay .eventive-background-container,
	.slo-ec-overlay .eventive-content-container,
	.slo-ec-overlay .Eventive--Checkout,
	.slo-ec-overlay .Eventive--LoginPage {
		width: 100%;
		max-width: none;
		border-radius: var(--slo-ec-radius);
	}
	/* Only the panel fills the screen; the checkout inside it used to get the same minimum height on top of the
	   panel's padding, so the sheet always ran 48 px past the bottom of the screen. */
	.slo-ec-overlay .eventive-content-container { min-height: calc(100dvh - 60px); }

	.slo-ec-overlay [data-iframe-height] {
		width: 100% !important;
		min-height: calc(100dvh - 60px) !important;
	}
}

/* ==========================================================================
   Checkout and log-in restyle (festival mockups Ck* / DeskCk*).
   Presentation only: Eventive keeps every step, word, value and action.
   Eventive renders Material UI markup with inline styles, so declarations use
   !important. Generic rules sit inside :where() (zero specificity) so the
   specific rules below them win without escalating selectors.
   Eventive prints the order table three ways (wide table, wide table with
   label cells, stacked rows on narrow screens); all three are laid out on one
   four-column grid: name / price + fee on the left, the stepper on the right.
   ========================================================================== */
/* Type scale for every checkout window (checkout, log-in, pass details, menus, confirmation), one role per size:
   xl titles and the order total · lg names, section labels and fields · md body text and button labels ·
   sm secondary text, notices and links · xs eyebrows, chips and hints. Weights: 500 text, 700 links/notices,
   800 headings/buttons, 900 titles. */
:root {
	--slo-ec-text-xl: 24px;
	--slo-ec-text-lg: 15px;
	--slo-ec-text-md: 14px;
	--slo-ec-text-sm: 13px;
	--slo-ec-text-xs: 12px;
	--slo-ec-text-input: 15px;
}
/* iPhone Safari zooms the page into any field under 16 px when it gets focus. */
@media (max-width: 767px) {
	:root { --slo-ec-text-input: 16px; }
	.eventive-account-container :is(input, select, textarea),
	.eventive-edit-pass-modal :is(input, select, textarea) { font-size: 16px !important; }
}
.Eventive--Dialog.slo-ec-overlay {
	--slo-ec-panel: var(--slo-ec-surface);
	--slo-ec-field: #000000;
	--slo-ec-accent-ink: var(--sloff-fest-accent-ink, #000000);
	--slo-ec-accent-hover: var(--sloff-fest-accent-hover, #d6dc5a);
	--slo-ec-member: var(--sloff-palm-orange, #e95421);
	--slo-ec-member-bg: var(--sloff-palm-orange-bg, #2a1409);
	--slo-ec-error: #ff8a80;
	--slo-ec-step-1: var(--slo-ec-accent);
	--slo-ec-step-2: var(--slo-ec-line);
	--slo-ec-step-3: var(--slo-ec-line);
}

/* The panel is always the dark surface, so secondary text can be dimmed text colour even when a year
   Look sets --sloff-text-muted to full text colour for its own backgrounds (mockups: grey fee lines,
   intros, "or"). Declared on the inner roots too, because the theme block above re-declares it there. */
.Eventive--Dialog.slo-ec-overlay,
.slo-ec-overlay .Eventive--Checkout,
.slo-ec-overlay .Eventive--LoginPage {
	--slo-ec-muted: rgba(255, 255, 255, .68);
	--slo-ec-muted: color-mix(in srgb, var(--slo-ec-text) 68%, transparent);
}

/* Motion. Eventive's Material UI wrappers carry inline `transition: all 450ms`, and our overlay class
   lands one frame after Eventive paints, so the dialog used to flash in Eventive's own look and then
   morph (width, padding, position) into ours over half a second. Hold the unstyled first frame back,
   drop Eventive's transitions, and show the styled dialog at once (no opening motion). The hold ends by itself
   after .4 s, so a dialog our script never claims still shows. */
@keyframes slo-ec-await { from, to { opacity: 0; } }
.Eventive--Dialog.eventive-widget-container:not(.slo-ec-overlay):has(.Eventive--Checkout, .Eventive--LoginPage, .eventive-background-container) { animation: slo-ec-await .4s linear; }
.Eventive--Dialog.slo-ec-overlay,
.Eventive--Dialog.slo-ec-overlay > div,
.Eventive--Dialog.slo-ec-overlay > div > div,
.Eventive--Dialog.slo-ec-overlay [data-iframe-height],
.Eventive--Dialog.slo-ec-overlay .eventive-background-container,
.Eventive--Dialog.slo-ec-overlay .eventive-content-container,
.Eventive--Dialog.slo-ec-overlay .eventive-content-container *,
.Eventive--Dialog.slo-ec-overlay .eventive-background-container * { transition: none !important; }
/* Ryan (round 7): everything in this flow should appear at once, so the claimed dialog opens with no motion. */

/* Panel */
.Eventive--Dialog.slo-ec-overlay [data-iframe-height] { width: min(100%, 600px) !important; }
.Eventive--Dialog.slo-ec-overlay .eventive-background-container {
	border: 0 !important;
	border-radius: 20px !important;
	background: transparent !important;
}
.Eventive--Dialog.slo-ec-overlay .eventive-content-container {
	padding: 28px !important;
	border: 1px solid var(--slo-ec-line) !important;
	border-radius: 20px !important;
	background: var(--slo-ec-panel) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
	text-align: left !important;
}
.Eventive--Dialog.slo-ec-overlay .Eventive--Checkout,
.Eventive--Dialog.slo-ec-overlay .Eventive--LoginPage {
	width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
	text-align: left !important;
}
.Eventive--Dialog.eventive-widget-container.slo-ec-overlay .slo-ec-close {
	top: 24px;
	right: 24px;
	width: 40px;
	min-width: 40px;
	height: 40px;
	min-height: 40px;
	border-color: var(--slo-ec-line);
	background: transparent;
	font-size: 20px;
}
.Eventive--Dialog.eventive-widget-container.slo-ec-overlay .slo-ec-close:hover { border-color: var(--slo-ec-text); }

/* Type and inline colours: one font, Eventive's light-theme colours neutralised. */
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(*:not([class^="icon-"]):not([class*=" icon-"]):not(iframe)) {
	font-family: var(--slo-ec-font) !important;
}
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where([style*="color"]) { color: inherit !important; }
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where([style*="background"]) {
	background-color: transparent !important;
	box-shadow: none !important;
}
/* Base text weight: Eventive leaves most text at 400; the scale's body weight is 500. */
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container, body .eventive-login-modal .eventive-login-form) { font-weight: 500; }
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(p, li, label) { color: var(--slo-ec-muted); font-size: var(--slo-ec-text-md); font-weight: 500; line-height: 1.5; }
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(h3) { margin: 18px 0 8px !important; color: var(--slo-ec-text) !important; font-size: var(--slo-ec-text-lg) !important; font-weight: 800 !important; }
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(a) { color: var(--slo-ec-accent) !important; font-weight: 700; text-decoration: none !important; }
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(a:hover) { text-decoration: underline !important; }
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(hr) { display: none !important; }

/* Title + three-step progress bar (order → account → payment / done). */
.slo-ec-overlay .Eventive--Checkout > h2:first-child,
.slo-ec-overlay .Eventive--Checkout > div > h2:first-child,
.slo-ec-overlay .Eventive--LoginPage > h2:first-child {
	position: relative;
	margin: 0 56px 20px 0 !important;
	padding: 6px 0 22px !important;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-xl) !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	letter-spacing: -.01em;
	text-align: left !important;
	text-transform: none !important;
}
.slo-ec-overlay .Eventive--Checkout > h2:first-child::after,
.slo-ec-overlay .Eventive--Checkout > div > h2:first-child::after,
.slo-ec-overlay .Eventive--LoginPage > h2:first-child::after {
	content: "";
	position: absolute;
	right: -56px;
	bottom: 0;
	left: 0;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--slo-ec-step-1) 0 32.6%, transparent 32.6% 33.7%, var(--slo-ec-step-2) 33.7% 66.3%, transparent 66.3% 67.4%, var(--slo-ec-step-3) 67.4% 100%);
}
/* Pinned header: on a long checkout (phones, short laptop screens) the title, progress bar and × used to
   scroll away. The title row sticks to the top of the scrolling dialog on the panel colour, edge to edge
   (it takes back the panel padding, --slo-ec-pad), and the × sticks beside it. */
.Eventive--Dialog.slo-ec-overlay .eventive-content-container { --slo-ec-pad-top: 28px; --slo-ec-pad-x: 28px; overflow: visible !important; /* Eventive's inline overflow would stop the header sticking */ }
/* The gap above the panel moves from the dialog's padding (scrolled content showed through it above the pinned
   header) to the panel's margin. */
.Eventive--Dialog.eventive-widget-container.slo-ec-overlay { padding-top: 0 !important; }
.Eventive--Dialog.slo-ec-overlay [data-iframe-height] { margin-top: clamp(12px, 3vh, 32px) !important; }
.Eventive--Dialog.slo-ec-overlay .Eventive--Checkout > h2:first-child,
.Eventive--Dialog.slo-ec-overlay .Eventive--Checkout > div > h2:first-child,
.Eventive--Dialog.slo-ec-overlay .Eventive--LoginPage > h2:first-child {
	position: sticky !important;
	top: 0;
	z-index: 3;
	margin: calc(-1 * var(--slo-ec-pad-top)) calc(-1 * var(--slo-ec-pad-x)) 6px !important;
	padding: calc(var(--slo-ec-pad-top) + 6px) calc(var(--slo-ec-pad-x) + 56px) 36px var(--slo-ec-pad-x) !important;
	border-radius: 20px 20px 0 0;
	background: var(--slo-ec-panel) !important;
}
.Eventive--Dialog.slo-ec-overlay .Eventive--Checkout > h2:first-child::after,
.Eventive--Dialog.slo-ec-overlay .Eventive--Checkout > div > h2:first-child::after,
.Eventive--Dialog.slo-ec-overlay .Eventive--LoginPage > h2:first-child::after { right: var(--slo-ec-pad-x); bottom: 14px; left: var(--slo-ec-pad-x); }
/* The × is the first thing in the panel: sticky in the flow, with a bottom margin that lifts the title row
   back up to the panel's top edge (adjoining negative margins don't add up, so this one carries both). */
.Eventive--Dialog.eventive-widget-container.slo-ec-overlay .eventive-content-container > .slo-ec-close {
	position: sticky;
	top: var(--slo-ec-pad-top);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	min-width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0 0 -40px auto;
}
.Eventive--Dialog.eventive-widget-container.slo-ec-overlay .eventive-content-container:has(.Eventive--Checkout > h2:first-child, .Eventive--Checkout > div > h2:first-child, .Eventive--LoginPage > h2:first-child) > .slo-ec-close {
	margin-bottom: calc(-40px - var(--slo-ec-pad-top));
}
.slo-ec-overlay .Eventive--LoginPage,
.slo-ec-overlay .Eventive--Checkout:has(.account-creation-form, input[type="password"]:not([name="hiddenPassword"])) { --slo-ec-step-2: var(--slo-ec-accent); }
.slo-ec-overlay .Eventive--Checkout:has(.Eventive--OrderPaymentWizard, .eventive-button-cancel, .StripeElement, #Eventive--orderSummary--orderSuccess) {
	--slo-ec-step-2: var(--slo-ec-accent);
	--slo-ec-step-3: var(--slo-ec-accent);
}
/* Signed in ("Currently logged in as…"): the account step is done. */
.slo-ec-overlay .Eventive--Checkout:has([style*="255, 241, 118"]) { --slo-ec-step-2: var(--slo-ec-accent); }
/* Nothing in the order (every quantity 0): all three steps empty, whatever Eventive shows below.
   (:has() can't be nested, so quantity cells are found by Eventive's order-quantity-quantity-N class.)
   :not(#slo-ec-step-reset) only adds ID weight, to outrank the rule above (its :has() lists an ID). */
.Eventive--Dialog.slo-ec-overlay .Eventive--Checkout:has(td[class^="order-quantity-quantity-"] input):not(:has(td[class^="order-quantity-quantity-"] input:not([value="0"]))):not(#slo-ec-step-reset) {
	--slo-ec-step-1: var(--slo-ec-line);
	--slo-ec-step-2: var(--slo-ec-line);
	--slo-ec-step-3: var(--slo-ec-line);
}

/* Order table → grid */
.slo-ec-overlay .Eventive--OrderQuantitySelect table:has(> thead) { display: none !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect table {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect tbody {
	display: grid !important;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 0;
	border: 0 !important;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect tr { display: contents !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td {
	display: block;
	width: auto !important;
	height: auto !important;
	min-width: 0;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-md) !important;
	line-height: 1.4 !important;
	text-align: left !important;
}
/* Hidden: label cells, separators, per-line totals, empty filler cells. */
.slo-ec-overlay .Eventive--OrderQuantitySelect tr:not(:has(> td[class^="order-quantity-total-total-"])) > td[class*="-label-"],
.slo-ec-overlay .Eventive--OrderQuantitySelect tr[class*="-separator-"],
.slo-ec-overlay .Eventive--OrderQuantitySelect tr:has(> td[class*="order-quantity-total-amount-"]),
.slo-ec-overlay .Eventive--OrderQuantitySelect tr:has(.icon-minus) > td[class^="order-quantity-total-"],
.slo-ec-overlay .Eventive--OrderQuantitySelect td:empty:not([class^="order-quantity-name-"]) { display: none !important; }
/* Item: name, then "price + fee fee"; stepper on the right across both lines. */
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-name-"]:not(:empty),
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-quantity-item-name-"] {
	grid-column: 1 / 4;
	padding: 16px 12px 2px 0 !important;
	border-top: 1px solid var(--slo-ec-line) !important;
	font-size: var(--slo-ec-text-lg) !important;
	font-weight: 800 !important;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-name-"] div,
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-quantity-item-name-"] div { font-weight: inherit; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-name-"] div div + div,
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-quantity-item-name-"] div div + div {
	margin-top: 3px;
	color: var(--slo-ec-muted);
	font-size: var(--slo-ec-text-sm) !important; /* Eventive sets 0.8em inline */
	font-weight: 500;
	line-height: 1.4 !important;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.icon-minus) {
	grid-column: 4;
	grid-row: span 2;
	align-self: stretch;
	display: flex;
	align-items: center;
	padding: 12px 0 !important;
	border-top: 1px solid var(--slo-ec-line) !important;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class*="variable-price-"],
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-price-amount-"],
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-fee-"]:not([class*="-label-"]) {
	padding-bottom: 16px !important;
	color: var(--slo-ec-muted) !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 500 !important;
	white-space: nowrap;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class*="variable-price-"],
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-price-amount-"] { grid-column: 1; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-fee-"]:not([class*="-label-"]) { grid-column: 2; padding-left: 4px !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-fee-"]:not([class*="-label-"])::before { content: "+ "; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-fee-"]:not([class*="-label-"])::after { content: " fee"; }

/* Quantity stepper */
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.icon-minus) > div {
	display: inline-flex !important;
	align-items: center;
	gap: 2px;
	height: 44px;
	padding: 0 2px;
	border: 1px solid var(--slo-ec-line-input);
	border-radius: 999px;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.icon-minus) > div > div { width: auto !important; height: auto !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.icon-minus) button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	min-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--slo-ec-text) !important;
	cursor: pointer;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.icon-minus) button:hover { background: rgba(255, 255, 255, .08) !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.icon-minus) button[disabled] { opacity: .35; cursor: default; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.icon-minus) [class^="icon-"] { color: var(--slo-ec-text) !important; font-size: 10px !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.icon-minus) input {
	width: 28px !important;
	min-width: 0 !important;
	height: 40px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-input) !important;
	font-weight: 800 !important;
	text-align: center !important;
}

/* Donation */
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.subitem-name) {
	grid-column: 1 / -1;
	padding: 18px 0 10px !important;
	border-top: 1px solid var(--slo-ec-line) !important;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect .subitem-name { color: var(--slo-ec-text) !important; font-size: var(--slo-ec-text-lg) !important; font-weight: 800 !important; line-height: 1.35 !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect .subitem-subname { margin-top: 4px; color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-sm) !important; font-weight: 500 !important; line-height: 1.45 !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.subitem-donations) { grid-column: 1 / -1; padding-bottom: 18px !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect .subitem-donations {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
	gap: 8px;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect .subitem-donations button {
	width: 100% !important;
	min-width: 0 !important;
	height: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--slo-ec-line-input) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--slo-ec-text) !important;
	cursor: pointer;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect .subitem-donations button:hover { border-color: var(--slo-ec-text) !important; }
/* The chosen amount: Eventive gives it black text (rgb(0, 0, 0)); the others are rgb(33, 33, 33). Its background
   tint can't be used: hovering any pill tints it too, which made hovering "Other" open the amount field, grow the
   panel and flicker. (" color:" with the space can't match background-color or border-color.) */
.slo-ec-overlay .Eventive--OrderQuantitySelect .subitem-donations button[style*=" color: rgb(0, 0, 0)"] {
	border-color: var(--slo-ec-text) !important;
	background: var(--slo-ec-text) !important;
	color: #000000 !important;
}
.slo-ec-overlay .Eventive--OrderQuantitySelect .subitem-donations button * { color: inherit !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect .subitem-donations button span {
	padding: 0 !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
/* Custom amount field: only after "Other" (the last choice) is picked. */
.slo-ec-overlay .Eventive--OrderQuantitySelect td:has(.subitem-total) { display: none !important; grid-column: 1 / -1; padding-bottom: 18px !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect:has(.subitem-donations button:last-child[style*=" color: rgb(0, 0, 0)"]) td:has(.subitem-total) { display: block !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect .subitem-total > div { width: 160px !important; height: auto !important; }

/* Order total */
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-name-"]:empty,
.slo-ec-overlay .Eventive--OrderQuantitySelect tr:has(> td[class^="order-quantity-total-total-"]) > td[class*="-label-"] {
	grid-column: 1 / 4;
	align-self: stretch;
	display: flex !important;
	align-items: center;
	padding: 18px 0 !important;
	border-top: 1px solid var(--slo-ec-line) !important;
	font-size: var(--slo-ec-text-lg) !important;
	font-weight: 800 !important;
}
/* Eventive prints "TOTAL" in capitals on narrow screens and nothing on wide ones; show "Total" in both. */
.slo-ec-overlay .Eventive--OrderQuantitySelect tr:has(> td[class^="order-quantity-total-total-"]) > td[class*="-label-"] { font-size: 0 !important; }
.slo-ec-overlay .Eventive--OrderQuantitySelect tr:has(> td[class^="order-quantity-total-total-"]) > td[class*="-label-"]::before,
.slo-ec-overlay .Eventive--OrderQuantitySelect td[class^="order-quantity-name-"]:empty::before { content: "Total"; font-size: var(--slo-ec-text-lg); text-transform: none; }
.slo-ec-overlay .Eventive--OrderQuantitySelect tr:not(:has(.icon-minus, .subitem-name, .subitem-donations, .subitem-total)) > td[class^="order-quantity-total-"]:not(:empty):not([class*="label"]) {
	grid-column: 4;
	align-self: stretch;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	padding: 18px 0 !important;
	border-top: 1px solid var(--slo-ec-line) !important;
	color: var(--slo-ec-accent) !important;
	font-size: var(--slo-ec-text-xl) !important;
	font-weight: 900 !important;
	text-align: right !important;
	white-space: nowrap;
}

/* Discount code / gift links */
.slo-ec-overlay .Eventive--Checkout :is(div, span):has(> a.eventive-discount-code) {
	display: block;
	margin: 0 !important;
	text-align: left !important;
}
.slo-ec-overlay .Eventive--Checkout div:has(> div > a.eventive-discount-code),
.slo-ec-overlay .Eventive--Checkout div:has(> div > div > a.eventive-discount-code) {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 4px 0 18px !important;
	text-align: left !important;
}
.slo-ec-overlay .Eventive--Checkout div:has(> div > div > a.eventive-discount-code) > div:has(> div > a.eventive-discount-code) { margin: 0 !important; }
.slo-ec-overlay .Eventive--Checkout a.eventive-discount-code,
.slo-ec-overlay .Eventive--Checkout a.eventive-discount-code span { color: var(--slo-ec-accent) !important; font-size: var(--slo-ec-text-sm) !important; font-weight: 700 !important; }
.slo-ec-overlay .Eventive--Checkout div:has(> div > div > a.eventive-discount-code) a:not(.eventive-discount-code),
.slo-ec-overlay .Eventive--Checkout div:has(> a.eventive-discount-code) a:not(.eventive-discount-code) { color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-sm) !important; }

/* Fields (Material UI floating-label text fields → label above a boxed input) */
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(div:has(> input):has(> div > hr, > hr)) {
	position: relative !important;
	display: flex !important;
	flex-direction: column;
	gap: 6px;
	width: 100% !important;
	height: auto !important;
	margin: 0 0 14px !important;
}
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(div:has(> input):has(> div > hr, > hr)) > :where(div:first-child:not(:has(*)), label) {
	position: static !important;
	order: -1;
	opacity: 1 !important;
	transform: none !important;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	pointer-events: auto;
}
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(input:not([type="hidden"], [type="checkbox"], [type="radio"], [name="hiddenPassword"]), select, textarea) {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid var(--slo-ec-line-input) !important;
	border-radius: 10px !important;
	background: var(--slo-ec-field) !important;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-input) !important;
	opacity: 1 !important;
	-webkit-text-fill-color: currentColor;
}
/* Focus is drawn inside the field (accent border + 1 px inset ring): an outside outline was pushed 3 px out by
   the site's focus rule and clipped by Eventive's overflow, so it never fit the box. */
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(input, select, textarea):focus {
	border-color: var(--slo-ec-accent) !important;
	outline: none !important;
	box-shadow: inset 0 0 0 1px var(--slo-ec-accent) !important;
}
/* Browser autofill paints fields pale yellow with dark text; keep the dark field. */
/* (Specific selectors on purpose: the :focus rule above outranks anything inside :where(), and box-shadow is
   what hides the browser's own pale autofill background.) */
.Eventive--Dialog.slo-ec-overlay .eventive-content-container input:-webkit-autofill,
.Eventive--Dialog.slo-ec-overlay .eventive-content-container input:-webkit-autofill:hover {
	box-shadow: inset 0 0 0 100px var(--slo-ec-field) !important;
	-webkit-text-fill-color: var(--slo-ec-text) !important;
	caret-color: var(--slo-ec-text);
	transition: background-color 600000s 0s, color 600000s 0s !important;
}
.Eventive--Dialog.slo-ec-overlay .eventive-content-container input:-webkit-autofill:focus {
	box-shadow: inset 0 0 0 1px var(--slo-ec-accent), inset 0 0 0 100px var(--slo-ec-field) !important;
}
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(input[disabled], input[readonly]) { color: var(--slo-ec-muted) !important; }

/* Buttons. Default = primary (accent pill, full width). Icon buttons, stepper and donation buttons are styled above. */
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(div:has(> button)) {
	display: block !important;
	float: none !important;
	width: 100% !important;
	height: auto !important;
}
/* Icon-only buttons (order settings cog) keep Eventive's small floated placement. */
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(div:has(> button > div > [class^="icon-"], > button > div > [class*=" icon-"])) {
	display: inline-block !important;
	float: right !important;
	width: auto !important;
}
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(button:not(.slo-ec-close):not(:has([class^="icon-"], [class*=" icon-"]))) {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	margin: 8px 0 0 !important;
	padding: 0 20px !important;
	border: 1px solid var(--slo-ec-accent) !important;
	border-radius: 999px !important;
	background: var(--slo-ec-accent) !important;
	color: var(--slo-ec-accent-ink) !important;
	line-height: 1 !important;
	cursor: pointer;
}
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(button:not(.slo-ec-close):not(:has([class^="icon-"], [class*=" icon-"]))) :where(div) {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100% !important;
	background: transparent !important;
}
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(button:not(.slo-ec-close):not(:has([class^="icon-"], [class*=" icon-"]))) :where(span) {
	padding: 0 !important;
	color: inherit !important;
	font-size: var(--slo-ec-text-md) !important;
	font-weight: 800 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
}
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(button:not(.slo-ec-close):not(:has([class^="icon-"], [class*=" icon-"]))) > :where(div) > :where(span:first-child:empty) { display: none !important; }
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(button:not(.slo-ec-close):hover) { filter: brightness(1.08); }
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(button[disabled]) { opacity: .45; cursor: default; filter: none; }
:where(.Eventive--Dialog.slo-ec-overlay .eventive-content-container) :where(button:focus-visible) { outline: 3px solid var(--slo-ec-text) !important; outline-offset: 3px; }
/* Secondary (outline): cancel, go back, home. */
.slo-ec-overlay .eventive-content-container :is(.eventive-button-cancel, .login-home button, .login-back button) {
	border-color: var(--slo-ec-line-input) !important;
	background: transparent !important;
	color: var(--slo-ec-text) !important;
}
/* Cancel sits under the buy button. */
.slo-ec-overlay .eventive-content-container div:has(> .eventive-button-cancel) {
	display: flex !important;
	flex-direction: column-reverse;
	gap: 2px;
	margin-top: 16px !important;
}
/* "Edit email" becomes an inline Change link inside the email box. */
.slo-ec-overlay .eventive-content-container button.account-creation-edit-email {
	position: absolute !important;
	top: auto !important;
	right: 6px !important;
	bottom: 12px !important; /* the field's wrapper runs 6 px below the field; centred on the field (checked live 2026-10-22) */
	width: auto !important;
	height: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--slo-ec-accent) !important;
}
.slo-ec-overlay .eventive-content-container button.account-creation-edit-email span { font-size: var(--slo-ec-text-xs) !important; text-transform: none !important; letter-spacing: 0 !important; }
.slo-ec-overlay .eventive-content-container .account-creation-email input { padding-right: 96px !important; }

/* Email / account step */
.slo-ec-overlay .account-creation-container { margin-top: 4px !important; text-align: left !important; }
/* New account (seen live 2026-10-22 with a reserved example.com address; Register not pressed): Eventive sizes
   the form min-width 70 % / width 200px / centred and its field wrapper max-width 380px, so on a phone it was a
   narrow centred column with "edit email" over the address and large centred terms. */
.slo-ec-overlay .account-creation-container .account-creation-form,
.slo-ec-overlay .account-creation-container .account-creation-form > div:not([class]) { width: 100% !important; min-width: 0 !important; max-width: none !important; margin-right: 0 !important; margin-left: 0 !important; }
.slo-ec-overlay .account-creation-container .account-creation-intro { margin: 0 0 16px !important; color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-md) !important; text-align: left !important; }
.slo-ec-overlay .account-creation-container .account-creation-terms-and-privacy,
.slo-ec-overlay .account-creation-container .account-creation-terms-and-privacy * { color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-sm) !important; line-height: 1.5 !important; text-align: left !important; }
.slo-ec-overlay .account-creation-container .account-creation-terms-and-privacy { margin: 16px 0 18px !important; }
.slo-ec-overlay .account-creation-container .account-creation-terms-and-privacy a { color: var(--slo-ec-accent) !important; font-weight: 700 !important; }
.slo-ec-overlay .account-creation-container :not(iframe) { text-align: left !important; }
.slo-ec-overlay .account-creation-container div:has(> iframe) { text-align: center !important; }
.slo-ec-overlay .account-creation-container > div,
.slo-ec-overlay .account-creation-container .account-inner,
.slo-ec-overlay .account-creation-container form > div { max-width: none !important; margin-right: 0 !important; margin-left: 0 !important; }
.slo-ec-overlay .account-creation-container > div:first-child > div:first-child:not(:has(input)),
.slo-ec-overlay .account-creation-intro,
.slo-ec-overlay .password-guidance,
.slo-ec-overlay .account-creation-terms-and-privacy {
	margin: 0 0 14px !important;
	color: var(--slo-ec-muted) !important;
	font-size: var(--slo-ec-text-md) !important;
	line-height: 1.5 !important;
}
/* "or" divider before Facebook: a line either side of the word, whatever Eventive's inline offsets. */
.slo-ec-overlay .account-creation-container div:has(> span):not(:has(input, button)):not(button *) {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100% !important;
	height: auto !important;
	margin: 18px 0 !important;
	border: 0 !important;
}
.slo-ec-overlay .account-creation-container div:has(> span):not(:has(input, button)):not(button *)::before,
.slo-ec-overlay .account-creation-container div:has(> span):not(:has(input, button)):not(button *)::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--slo-ec-line);
}
.slo-ec-overlay .account-creation-container div:has(> span):not(:has(input, button)):not(button *) > span {
	position: static !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--slo-ec-muted) !important;
	font-size: var(--slo-ec-text-xs) !important;
	font-style: normal !important;
	font-weight: 700 !important;
	text-transform: uppercase;
}
.slo-ec-overlay .account-creation-container iframe { margin: 0 auto; }
/* Facebook. Eventive first prints its own fallback button (.kep-login-facebook); about half a second later
   Facebook's iframe replaces it with the same button drawn by Facebook (flat #4c69ba, square, 35 px). The
   fallback used to pick up our yellow pill and then swap; it now looks exactly like what replaces it.
   Facebook's iframe itself can't be restyled. */
.slo-ec-overlay .account-creation-container div:has(> button.kep-login-facebook) {
	display: flex !important;
	justify-content: center;
	width: 100% !important;
}
.slo-ec-overlay .account-creation-container button.kep-login-facebook {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto !important;
	height: 35px !important;
	min-height: 35px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	border: 1px solid #4c69ba !important;
	border-radius: 0 !important;
	background: #4c69ba !important;
	color: #ffffff !important;
	font-family: Helvetica, Arial, sans-serif !important;
	font-size: var(--slo-ec-text-md) !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	filter: none !important;
	/* Eventive's iframe (login.eventive.org/facebook_button) replaces this fallback ~0.5 s after opening, and its
	   button's size depends on the iframe's width, so no look-alike matches at every width. Keep the fallback's
	   35 px of space but invisible, so Facebook's button just appears in place; if the iframe never loads, the
	   fallback shows after 1.5 s and still works. */
	animation: slo-ec-await 1.5s linear;
}
.slo-ec-overlay .account-creation-container button.kep-login-facebook * { font-family: inherit !important; }
.slo-ec-overlay .account-creation-container button.kep-login-facebook svg { width: 14px; height: 14px; fill: currentColor; }

/* Discount code / gift card (035): label on the left, the field with an outline APPLY pill beside it,
   "Never mind" under it, all in one bordered box. Eventive prints the box as label+field, button, link. */
.slo-ec-overlay .Eventive--Checkout > div > div:not(.account-creation-container, .Eventive--OrderQuantitySelect) > div:has(> div > input):has(> div > button) {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 8px 10px;
	margin: 4px 0 18px !important;
	padding: 14px !important;
	border: 1px solid var(--slo-ec-line) !important;
	border-radius: 14px;
	text-align: left !important;
}
.slo-ec-overlay .Eventive--Checkout > div > div:not(.account-creation-container, .Eventive--OrderQuantitySelect) > div:has(> div > input):has(> div > button) > * {
	grid-column: 1 / -1;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	text-align: left !important;
}
.slo-ec-overlay .Eventive--Checkout > div > div:not(.account-creation-container, .Eventive--OrderQuantitySelect) > div:has(> div > input):has(> div > button) > div:has(> input) { grid-column: 1; max-width: none !important; /* a 60 % cap from outside our CSS left it ~145 px wide on phones */ }
.slo-ec-overlay .Eventive--Checkout > div > div:not(.account-creation-container, .Eventive--OrderQuantitySelect) > div:has(> div > input):has(> div > button) > div:has(> input) > div:has(> hr) { display: none !important; }
.slo-ec-overlay .Eventive--Checkout > div > div:not(.account-creation-container, .Eventive--OrderQuantitySelect) > div:has(> div > input):has(> div > button) > div:has(> input) > div:first-child { text-align: left !important; }
.slo-ec-overlay .Eventive--Checkout > div > div:not(.account-creation-container, .Eventive--OrderQuantitySelect) > div:has(> div > input):has(> div > button) > div:has(> button) { grid-column: 2; }
.slo-ec-overlay .Eventive--Checkout > div > div:not(.account-creation-container, .Eventive--OrderQuantitySelect) > div:has(> div > input):has(> div > button) > div:has(> button) button {
	width: auto !important;
	min-width: 96px;
	margin: 0 !important;
	padding: 0 22px !important;
	border-color: var(--slo-ec-line-input) !important;
	background: transparent !important;
	color: var(--slo-ec-text) !important;
}
.slo-ec-overlay .Eventive--Checkout > div > div:not(.account-creation-container, .Eventive--OrderQuantitySelect) > div:has(> div > input):has(> div > button) > div:has(> button) button:hover { border-color: var(--slo-ec-text) !important; filter: none; }
.slo-ec-overlay .Eventive--Checkout > div > div:not(.account-creation-container, .Eventive--OrderQuantitySelect) > div:has(> div > input):has(> div > button) a { color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-sm) !important; font-weight: 700; }

/* Notices Eventive paints yellow (signed in as…, saved card, $0 order) → member-orange note. */
.slo-ec-overlay .eventive-content-container [style*="255, 241, 118"] {
	margin: 0 0 8px !important;
	padding: 10px 14px !important;
	border: 1px solid var(--slo-ec-member) !important;
	border-radius: 10px !important;
	background: var(--slo-ec-member-bg) !important;
	color: var(--slo-ec-member) !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
}
.slo-ec-overlay .eventive-content-container [style*="255, 241, 118"] * { font-size: inherit !important; font-weight: inherit !important; }
.slo-ec-overlay .eventive-content-container .Eventive--Checkout [style*="255, 241, 118"] a:not(.eventive-discount-code) { color: inherit !important; text-decoration: underline !important; }
.slo-ec-overlay .eventive-content-container [style*="255, 241, 118"] a { color: inherit !important; text-decoration: underline !important; }

/* Terms (the festival's own text, Eventive's tenant-injected-html) and "I accept the above terms.": Eventive
   indents the block 1em, spaces paragraphs with empty <p><br></p> lines and sets the label in plain 14 px.
   Now: a bordered box of small grey text, then the checkbox row in body text. */
.slo-ec-overlay .eventive-content-container div:has(> .tenant-injected-html) { margin: 20px 0 0 !important; }
.slo-ec-overlay .eventive-content-container .tenant-injected-html {
	padding: 14px 16px !important;
	border: 1px solid var(--slo-ec-line) !important;
	border-radius: 12px !important;
	background: var(--slo-ec-surface-raised) !important;
}
.slo-ec-overlay .eventive-content-container .tenant-injected-html :is(p, li) {
	margin: 0 0 10px !important;
	color: var(--slo-ec-muted) !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
}
.slo-ec-overlay .eventive-content-container .tenant-injected-html > :last-child { margin-bottom: 0 !important; }
.slo-ec-overlay .eventive-content-container .tenant-injected-html p:has(> br:only-child) { display: none !important; }
.slo-ec-overlay .eventive-content-container div:has(> .tenant-injected-html) > div:has(> input[type="checkbox"]) { margin: 16px 0 4px !important; }
.slo-ec-overlay .eventive-content-container div:has(> input[type="checkbox"]) > div { align-items: center; }
.slo-ec-overlay .eventive-content-container div:has(> input[type="checkbox"]) > div > div:first-child { margin: 0 12px 0 0 !important; }
.slo-ec-overlay .eventive-content-container div:has(> input[type="checkbox"]) label {
	width: auto !important;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-md) !important;
	font-weight: 700 !important;
	line-height: 24px !important;
}
/* Material UI hint on a disabled button ("Please check the box…"): 10 px → the hint size. */
.slo-ec-overlay .eventive-content-container [style*="font-size: 10px"][style*="z-index: 1200"] { font-size: var(--slo-ec-text-xs) !important; font-weight: 700 !important; }

/* Payment */
.slo-ec-overlay .Eventive--OrderPaymentWizard { margin-top: 8px; }
/* Stripe's card form is an iframe Eventive draws in Stripe's light theme (dark labels, white fields); on our
   black field box its labels were unreadable (Ryan's phone, 2026-10-22). It sits on a white card instead. */
.slo-ec-overlay .eventive-content-container .StripeElement {
	box-sizing: border-box;
	min-height: 52px;
	padding: 16px !important;
	border: 1px solid #ffffff !important;
	border-radius: 14px !important;
	background: #ffffff !important;
}
.slo-ec-overlay .eventive-content-container .StripeElement--focus { border-color: var(--slo-ec-accent) !important; }
.slo-ec-overlay .eventive-content-container .StripeElement--invalid { border-color: var(--slo-ec-error) !important; }
.slo-ec-overlay .eventive-content-container :is([role="alert"], .eventive-error, .error, [style*="color: rgb(244, 67, 54)"]) {
	color: var(--slo-ec-error) !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 700 !important;
}

/* Confirmation */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess,
.slo-ec-overlay #Eventive--orderSummary--orderSuccess * { text-align: left !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess [style*="rgb(204, 204, 204)"] { border-color: var(--slo-ec-line) !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess [style*="border: 1px solid rgb(204, 204, 204)"] { border-radius: 14px; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess [style*="border: 1px solid rgb(204, 204, 204)"] > div > div:first-child { color: var(--slo-ec-text) !important; font-size: var(--slo-ec-text-lg) !important; font-weight: 800 !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess [style*="height: 36px"]:not(button, button *) { height: auto !important; color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-sm) !important; font-weight: 500 !important; line-height: 1.5 !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess [style*="font-size: 12pt"]:not(button, button *) { color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-md) !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess h2 { color: var(--slo-ec-text) !important; font-size: var(--slo-ec-text-lg) !important; font-weight: 800 !important; }
/* Eventive prints the order number in monospace with -1px tracking. */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess h2 span { font-family: inherit !important; letter-spacing: .02em !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess h3 { color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-sm) !important; font-weight: 500 !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div > h3:first-child {
	margin-top: 18px !important;
	color: var(--slo-ec-muted) !important;
	font-size: var(--slo-ec-text-xs) !important;
	font-weight: 800 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.slo-ec-overlay #Eventive--orderSummary--orderSuccess [style*="rgb(204, 204, 204)"] > div { padding: 20px !important; }
/* Eventive's list item pads its own content 16 px inside our 20 px; drop the inner padding. */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess [style*="border: 1px solid rgb(204, 204, 204)"] > div > div > div > div { padding: 0 !important; }
/* "First things first, name your passes…" sat on its heading (Eventive's -0.75em top margin). */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div > h3:first-child + p { margin: 6px 0 16px !important; color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-md) !important; line-height: 1.5 !important; }
/* "Your order has been completed successfully…": full-strength body text, not small grey. */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess [style*="font-size: 12pt"] > div > div > p:not([style]) {
	margin: 16px 0 20px !important;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-md) !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
}
/* Pass pick-up note (account-layer.js → addPickupNote; text from Festival Settings → Links). */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess .slo-ec-pickup-note {
	margin: 0 0 20px !important;
	padding: 14px 16px !important;
	border: 1px solid var(--slo-ec-line) !important;
	border-left: 3px solid var(--slo-ec-accent) !important;
	border-radius: 10px !important;
	background: var(--slo-ec-surface-raised) !important;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-md) !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
}
/* "Please name your pass before continuing." (Eventive's red line): an orange status note with room above Go back. */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess [style*="color: rgb(255, 65, 54)"] {
	margin: 0 0 24px !important;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--slo-ec-member-bg) !important;
	color: var(--slo-ec-member) !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 700 !important;
	text-align: center !important;
}
/* Go back's wrapper is pulled up 12 px onto whatever precedes it. */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div[style*="margin-top: -12px"]:has(> div > button) { margin-top: 0 !important; }
/* Wallet badges: Eventive's image paths only work on eventive.org; account-layer.js repoints them (and preloads both
   when checkout opens). Until then the broken image stays invisible at its final size, so nothing jumps. */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess a > img[alt*="Apple Wallet"] { width: 142px !important; height: 44px !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess a > img[alt*="Google Wallet"] { width: 159px !important; height: 44px !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess a > img[alt*="Wallet"]:not([src^="https://"]) { visibility: hidden; }
.slo-ec-overlay .Eventive--Checkout[style*="text-align: center"] div[style*="text-align: center"] { text-align: left !important; }
/* Order settings (cog): opens nothing for festival orders (no menu appears); Ryan asked to drop it. Order actions
   stay in My account. */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> button .icon-cog) { display: none !important; }

/* "Name your pass" on the confirmation: Eventive's one row — name field, then SAVE NAME beside it. The full-width
   button rule had stacked the button and pushed it 12 px past the edge. */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	margin: 0 0 14px !important;
}
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) > div:has(> input) { display: block !important; flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0; height: 44px !important; margin: 0 !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) > div:has(> button) { flex: none; width: auto !important; margin: 0 !important; line-height: 0; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) button { width: auto !important; margin: 0 !important; padding: 0 22px !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) button,
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) button > div { height: 44px !important; min-height: 44px !important; line-height: 44px !important; }
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) input {
	box-sizing: border-box !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid var(--slo-ec-line-input) !important;
	border-radius: 10px !important;
	background: var(--slo-ec-field) !important;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-input) !important;
	font-weight: 500 !important;
}
.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) input::placeholder { font-weight: 500 !important; }
@media (max-width: 480px) {
	/* Stacked: field, then SAVE NAME, both full width (the row's centring had shrunk both to their content). */
	.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
	.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) > div:has(> input),
	.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) > div:has(> button) { flex: none !important; width: 100% !important; }
	.slo-ec-overlay #Eventive--orderSummary--orderSuccess div:has(> div > input[type="text"]):has(> div > button) button { width: 100% !important; }
}

/* Disabled buttons (Go back / Save name until the pass is named, Confirm pass details): a muted outline instead of
   a 45 %-opacity yellow pill with pale text. */
.slo-ec-overlay .eventive-content-container button[disabled]:not(.slo-ec-close) {
	border-color: var(--slo-ec-line) !important;
	background: transparent !important;
	color: var(--slo-ec-muted) !important;
	opacity: 1 !important;
	filter: none !important;
	cursor: not-allowed !important;
}
.slo-ec-overlay .eventive-content-container button[disabled]:not(.slo-ec-close) * { color: inherit !important; }

/* "Get the app" (account-layer.js → addAppButton) sits in the Wallet row and matches those badges: 44 px, black,
   grey hairline, rounded. */
.slo-ec-overlay #Eventive--orderSummary--orderSuccess .slo-ec-app-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 44px;
	margin: 4px 6px;
	padding: 0 18px;
	border: 1px solid #a6a6a6;
	border-radius: 9px;
	background: #000000;
	color: #ffffff !important;
	font-size: var(--slo-ec-text-md) !important;
	font-weight: 800 !important;
	letter-spacing: .02em;
	line-height: 1 !important;
	text-decoration: none !important;
	vertical-align: middle;
}
.slo-ec-overlay #Eventive--orderSummary--orderSuccess .slo-ec-app-link:hover { border-color: #ffffff; text-decoration: none !important; }

/* Terms checkbox: Eventive's Material UI box is drawn in near-black SVG, invisible on the panel. */
.slo-ec-overlay .eventive-content-container div:has(> input[type="checkbox"]) svg { fill: var(--slo-ec-accent) !important; color: var(--slo-ec-accent) !important; }

/* EventiveWP's own log-in modal (My account → Log in, the Passes member box): a white card with the
   site's near-white text and a debug "EventiveWP Custom Login" flag. Same panel as checkout. */
body .eventive-login-modal { background: rgba(0, 0, 0, .76) !important; }
body .eventive-login-modal .eventive-login-form {
	position: relative;
	box-sizing: border-box;
	width: min(100% - 32px, 440px) !important;
	max-width: 440px !important;
	padding: 28px !important;
	border: 1px solid var(--slo-ec-line, rgba(255, 255, 255, .24)) !important;
	border-radius: 20px !important;
	background: var(--sloff-surface-1, #111111) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
	color: var(--sloff-text, #ffffff) !important;
	font-family: var(--sloff-font, Montserrat, system-ui, sans-serif) !important;
	text-align: left !important;
}
body .eventive-login-modal .eventive-login-modal-flag { display: none !important; }
/* EventiveWP stacks the form as a height-capped flex column, so on a short screen it squeezed every row and
   cut the footer off; rows keep their height and the form scrolls instead. */
body .eventive-login-modal .eventive-login-form > * { flex-shrink: 0 !important; }
@media (max-width: 767px) {
	/* A bottom sheet, like checkout. */
	body .eventive-login-modal { align-items: flex-end !important; padding: 48px 0 12px !important; background: linear-gradient(rgba(0, 0, 0, .76) 0 64px, #000000 64px) !important; }
	body .eventive-login-modal .eventive-login-form {
		width: 100% !important;
		max-width: none !important;
		height: calc(100dvh - 60px) !important;
		max-height: calc(100dvh - 60px) !important;
		padding: 20px 16px 0 !important;
		border-radius: 22px !important;
	}
	body .eventive-login-modal .eventive-modal-close { top: 16px !important; right: 16px !important; }
	body .eventive-login-modal .eventive-modal-footer { margin: auto -16px 0 !important; padding: 14px 16px 22px !important; border-radius: 0 0 22px 22px !important; }
}
body .eventive-login-modal .eventive-modal-close {
	position: absolute !important;
	top: 24px !important;
	right: 24px !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, .24) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--sloff-text, #ffffff) !important;
	font-size: 20px !important;
	line-height: 1 !important;
}
body .eventive-login-modal .eventive-modal-title {
	margin: 6px 56px 22px 0 !important;
	text-align: left !important;
	color: var(--sloff-text, #ffffff) !important;
	font-size: var(--slo-ec-text-xl) !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
}
body .eventive-login-modal .eventive-login-form label {
	display: block;
	margin: 0 0 6px !important;
	color: var(--sloff-text, #ffffff) !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 700 !important;
}
body .eventive-login-modal .eventive-login-form input {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 52px !important;
	margin: 0 0 14px !important;
	padding: 0 16px !important;
	border: 1px solid rgba(255, 255, 255, .42) !important;
	border-radius: 10px !important;
	background: #000000 !important;
	color: var(--sloff-text, #ffffff) !important;
	font-size: var(--slo-ec-text-input) !important;
	-webkit-text-fill-color: currentColor;
}
body .eventive-login-modal .eventive-login-form input:focus {
	border-color: var(--sloff-fest-accent, #bbc238) !important;
	outline: none !important;
	box-shadow: inset 0 0 0 1px var(--sloff-fest-accent, #bbc238) !important;
}
body .eventive-login-modal .eventive-login-form input:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 100px #000000 !important;
	-webkit-text-fill-color: var(--sloff-text, #ffffff) !important;
}
body .eventive-login-modal [id^="eventive-login-error"] {
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #ff8a80 !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 700 !important;
}
body .eventive-login-modal [id^="eventive-login-error"]:empty { display: none !important; }
body .eventive-login-modal .eventive-forgot-password {
	display: block;
	margin: 0 0 18px !important;
	color: var(--sloff-fest-accent, #bbc238) !important;
	font-size: var(--slo-ec-text-sm) !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-decoration: none !important;
}
body .eventive-login-modal .button-row { display: grid !important; gap: 10px; }
body .eventive-login-modal .button-row button {
	width: 100% !important;
	height: 52px !important;
	margin: 0 !important;
	border: 1px solid var(--sloff-fest-accent, #bbc238) !important;
	border-radius: 999px !important;
	background: var(--sloff-fest-accent, #bbc238) !important;
	color: var(--sloff-fest-accent-ink, #000000) !important;
	font-family: inherit !important;
	font-size: var(--slo-ec-text-md) !important;
	font-weight: 800 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	opacity: 1 !important;
}
body .eventive-login-modal .button-row button[id^="eventive-cancel-button"] {
	border-color: rgba(255, 255, 255, .42) !important;
	background: transparent !important;
	color: var(--sloff-text, #ffffff) !important;
}
body .eventive-login-modal .eventive-modal-footer {
	margin: 18px -28px -28px !important;
	padding: 14px 28px 18px !important;
	border-top: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 0 0 20px 20px;
	background: transparent !important;
	color: rgba(255, 255, 255, .6) !important;
	font-size: var(--slo-ec-text-xs) !important;
}
body .eventive-login-modal .eventive-modal-footer a { color: rgba(255, 255, 255, .6) !important; }

/* Body copy Eventive colours dark grey through its own classes (pass-details intro, terms at checkout),
   which beat the zero-specificity text rule above and left it near-invisible on the dark panel. */
.slo-ec-overlay .eventive-content-container p:not([style*="color"]):not([style*="255, 241, 118"] *) { color: var(--slo-ec-muted) !important; }

/* Pass holder details (logged-in pass checkout): a full-width card; "edit details" is the action,
   "details needed!" a status chip (Eventive prints both as red/grey links that looked the same). */
.slo-ec-overlay .eventive-content-container div[style*="max-width: 400px"][style*="margin: 0px auto"] { max-width: none !important; margin: 4px 0 0 !important; text-align: left !important; }
.slo-ec-overlay .eventive-content-container div[style*="border: 1px solid rgb(204, 204, 204)"] {
	border-color: var(--slo-ec-line) !important;
	border-radius: 14px;
	background: var(--slo-ec-surface-raised) !important;
}
.slo-ec-overlay .eventive-content-container div[style*="border: 1px solid rgb(204, 204, 204)"] div[style*="line-height: 16px"][style*="padding"] { padding: 16px !important; }
.slo-ec-overlay .eventive-content-container div:has(> a[style*="229, 57, 53"]),
.slo-ec-overlay .eventive-content-container div:has(> a[style*="0, 0, 0, 0.54"]) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-lg) !important;
	font-weight: 800;
	line-height: 1.3 !important;
}
.slo-ec-overlay .eventive-content-container div:has(> a[style*="229, 57, 53"]) + p,
.slo-ec-overlay .eventive-content-container div:has(> a[style*="0, 0, 0, 0.54"]) + p { height: auto !important; margin-top: 6px !important; color: var(--slo-ec-muted) !important; font-size: var(--slo-ec-text-sm) !important; line-height: 1.4 !important; }
.slo-ec-overlay .eventive-content-container a[style*="0, 0, 0, 0.54"] {
	order: 3;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px !important;
	border: 1px solid var(--slo-ec-accent);
	border-radius: 999px;
	color: var(--slo-ec-accent) !important;
	font-size: var(--slo-ec-text-xs) !important;
	font-weight: 800;
	letter-spacing: .04em;
	text-decoration: none !important;
	text-transform: uppercase;
}
.slo-ec-overlay .eventive-content-container a[style*="0, 0, 0, 0.54"]:hover { background: var(--slo-ec-accent) !important; color: var(--slo-ec-accent-ink) !important; }
.slo-ec-overlay .eventive-content-container a[style*="229, 57, 53"] {
	order: 2;
	padding: 3px 9px !important;
	border: 1px solid var(--slo-ec-member);
	border-radius: 999px;
	background: var(--slo-ec-member-bg) !important;
	color: var(--slo-ec-member) !important;
	font-size: var(--slo-ec-text-xs) !important;
	font-weight: 800;
	letter-spacing: .04em;
	text-decoration: none !important;
	text-transform: uppercase;
	cursor: default;
}

/* Pass menu (038): what a signed-in member sees on a pass's buy button — "Order using … The Palmie discount ($…)"
   or "Order without using discount ($…)" (also redeem-or-buy for pass holders). Eventive opens it as a white
   Material UI popover inside its own full-screen layer; scoped to that fixed popover because the site header also
   uses role="menuitem". */
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]) {
	overflow: hidden !important;
	border: 1px solid rgba(255, 255, 255, .24) !important;
	border-radius: 14px !important;
	background: var(--sloff-surface-2, #1a1a1a) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .6) !important;
}
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]) [role="menu"] { padding: 0 !important; }
/* Material UI grows and fades the menu in over ~250 ms; show it at once like the rest of the checkout. */
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]),
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]) * { transition: none !important; }
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]) [role="menuitem"] {
	display: block !important;
	padding: 15px 18px !important;
	background: transparent !important;
	cursor: pointer;
}
/* A divider between rows, whether or not Eventive wraps each row. */
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]) div[role="menu"] > * + * [role="menuitem"],
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]) div[role="menu"] > * + [role="menuitem"],
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]) div[role="menu"] > * > * + [role="menuitem"] { border-top: 1px solid rgba(255, 255, 255, .12) !important; }
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]) [role="menuitem"]:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .07) !important; outline: none; }
div[style*="position: fixed"]:has(> div[role="presentation"] div[role="menu"] [role="menuitem"]) [role="menuitem"] * {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--sloff-text, #ffffff) !important;
	font-family: var(--sloff-font, Montserrat, system-ui, sans-serif) !important;
	font-size: var(--slo-ec-text-md) !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	white-space: normal !important;
}

/* Signing in from a pass checkout (account-layer.js → resumeAfterSignIn): Eventive would reopen the order it began
   before sign-in, without the member discount. While the adapter clears it out of sight, a small status panel shows
   instead of a blank page; then the pass's own menu (member discount or not) opens. */
html.slo-ec-resuming .Eventive--Dialog.eventive-widget-container { opacity: 0 !important; pointer-events: none !important; }
.slo-ec-resume {
	position: fixed;
	inset: 0;
	z-index: 1000001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .76);
}
.slo-ec-resume[hidden] { display: none; }
.slo-ec-resume__panel {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 14px;
	background: var(--sloff-surface-1, #111111);
	color: var(--sloff-text, #ffffff);
	font-family: var(--sloff-font, Montserrat, system-ui, sans-serif);
	font-size: var(--slo-ec-text-lg);
	font-weight: 700;
}
.slo-ec-resume__panel::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .24);
	border-top-color: var(--sloff-fest-accent, #bbc238);
	border-radius: 50%;
	animation: slo-ec-spin .8s linear infinite;
}
@keyframes slo-ec-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.slo-ec-resume__panel::before { animation-duration: 2.4s; }
}

/* Dialogs Eventive stacks on the checkout (pass holder details): above it, same panel. Title, fields
   and the Cancel / Submit row sit in Eventive's background container, so that is the panel here. */
.Eventive--Dialog.eventive-widget-container.slo-ec-overlay.slo-ec-overlay--sub { z-index: 1000000 !important; }
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub > div > div { width: min(100%, 560px) !important; max-width: 560px !important; margin: 0 auto !important; transform: none !important; }
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-background-container {
	padding: 24px 28px 28px !important;
	border: 1px solid var(--slo-ec-line) !important;
	border-radius: 20px !important;
	background: var(--slo-ec-panel) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
	color: var(--slo-ec-text) !important;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none;
	color: var(--slo-ec-text) !important;
	animation: none;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-background-container > h3 {
	margin: 0 0 18px !important;
	padding: 0 !important;
	color: var(--slo-ec-text) !important;
	font-family: var(--slo-ec-font) !important;
	font-size: var(--slo-ec-text-xl) !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container :is(div, label) { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container label { display: block !important; margin: 0 0 6px !important; color: var(--slo-ec-text) !important; font-size: var(--slo-ec-text-sm) !important; font-weight: 700 !important; }
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container label * { color: inherit !important; }
/* Each field: label, then the field, 6 px apart. Eventive's fixed-height boxes and floating labels made the field
   overlap the label's last line; a column layout can't overlap. */
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container div:has(> label) {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 6px !important;
	height: auto !important;
	margin: 0 0 16px !important;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container div:has(> label) > * {
	margin: 0 !important;
	position: static !important;
	top: auto !important;
	transform: none !important;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container div:has(> label) > label { flex: none !important; }
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container label,
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container label * {
	position: static !important;
	height: auto !important;
	transform: none !important;
	font-size: var(--slo-ec-text-sm) !important;
	line-height: 1.35 !important;
	white-space: normal !important;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container div:has(> input) { height: auto !important; }
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container div:has(> input) > :is(hr, div:has(> hr)) { display: none !important; }
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container input { margin-bottom: 0 !important; }
/* Eventive's label text carries inline margin-top: 1em and a hidden helper with margin-bottom: -10px, which pushed
   the text 13 px below its own box and onto the field. */
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container label > * { margin: 0 !important; }
/* "Required fields are marked with a *." is absolutely positioned (bottom: 90px) and floated over a field: put it
   back in the flow as a small grey line after the last field. */
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container div:has(> div[style*="position: absolute"][style*="bottom"]) { display: flex !important; flex-direction: column !important; margin: 0 !important; }
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-content-container div[style*="position: absolute"][style*="bottom"] {
	position: static !important;
	order: 99;
	margin: 0 0 10px !important;
	color: var(--slo-ec-muted) !important;
	font-size: var(--slo-ec-text-xs) !important;
	line-height: 1.4 !important;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-background-container > div:last-child {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	padding: 8px 0 0 !important;
	border: 0 !important;
	background: transparent !important;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-background-container > div:last-child > * { margin: 0 !important; }
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-background-container > div:last-child button {
	min-width: 120px;
	height: 48px !important;
	padding: 0 22px !important;
	border: 1px solid var(--slo-ec-accent) !important;
	border-radius: 999px !important;
	background: var(--slo-ec-accent) !important;
	color: var(--slo-ec-accent-ink) !important;
	font-family: var(--slo-ec-font) !important;
	cursor: pointer;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-background-container > div:last-child > :first-child:not(:last-child) button,
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-background-container > div:last-child button:not(:last-of-type),
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-background-container > div:last-child > :not(:last-child) button {
	border-color: var(--slo-ec-line-input) !important;
	background: transparent !important;
	color: var(--slo-ec-text) !important;
}
.Eventive--Dialog.slo-ec-overlay.slo-ec-overlay--sub .eventive-background-container > div:last-child button * {
	background: transparent !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: var(--slo-ec-text-md) !important;
	font-weight: 800 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
}

/* Log-in step inside checkout (existing account: "Welcome back, …"). Eventive centres a 320 px column and
   offsets its Home / Go back buttons; lay it out like the rest of the panel: full width, left aligned. */
.slo-ec-overlay .Eventive--LoginPage :is(div, form, p):not(:has(> iframe)) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: left !important;
}
.slo-ec-overlay .Eventive--LoginPage :is(div, form):has(> button) { width: 100% !important; }
.slo-ec-overlay .Eventive--LoginPage em:first-child,
.slo-ec-overlay .Eventive--LoginPage > div > em,
.slo-ec-overlay .Eventive--LoginPage :is(h1, h2, h3, p, div) > em:only-child {
	display: block;
	margin: 0 56px 18px 0;
	color: var(--slo-ec-text);
	font-size: var(--slo-ec-text-xl);
	font-style: normal;
	font-weight: 900;
	line-height: 1.2;
}
/* Seen live 2026-10-22 (Ryan's test account, stopped at the password): Eventive caps this step at a centred
   320 px column (inline max-width / margin 30px auto) and prints the greeting as an italic 14pt div, not an em. */
.Eventive--Dialog.slo-ec-overlay .Eventive--LoginPage { max-width: none !important; margin: 0 !important; text-align: left !important; }
.Eventive--Dialog.slo-ec-overlay .Eventive--LoginPage > form { text-align: left !important; }
.Eventive--Dialog.slo-ec-overlay .Eventive--LoginPage > div:first-child[style*="italic"] {
	display: block;
	margin: 0 56px 22px 0 !important;
	padding-top: 6px;
	color: var(--slo-ec-text) !important;
	font-size: var(--slo-ec-text-xl) !important;
	font-style: normal !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
}
.slo-ec-overlay .Eventive--LoginPage :is(.login-home, .login-back) { margin-top: 10px !important; }
.slo-ec-overlay .Eventive--LoginPage :is(.login-home, .login-back) button { margin-top: 0 !important; }
.slo-ec-overlay .Eventive--LoginPage .login-forgot-password { display: block !important; margin-top: 14px !important; text-align: center !important; }
.slo-ec-overlay .Eventive--LoginPage :is(div, p):has(> .login-forgot-password) { text-align: center !important; }

/* Stand-alone Eventive log-in page */
.slo-ec-overlay .Eventive--LoginPage em { color: var(--slo-ec-muted); font-style: normal; }
.slo-ec-overlay .Eventive--LoginPage .login-forgot-password { display: inline-block; margin-top: 4px; font-size: var(--slo-ec-text-sm) !important; }
.slo-ec-overlay .eventive-login-footer { margin-top: 18px; color: var(--slo-ec-muted); font-size: var(--slo-ec-text-xs); }
.slo-ec-overlay .eventive-login-footer a { color: var(--slo-ec-muted) !important; font-weight: 700; }

@media (max-width: 767px) {
	.Eventive--Dialog.slo-ec-overlay .eventive-content-container {
		--slo-ec-pad-top: 20px;
		--slo-ec-pad-x: 16px;
	}
	/* A sheet with all four corners rounded (Ryan: the square bottom read as cut off), 48 px of page above it
	   and 12 px below. */
	.Eventive--Dialog.slo-ec-overlay [data-iframe-height] { margin-top: 48px !important; margin-bottom: 12px !important; }
	.Eventive--Dialog.slo-ec-overlay .eventive-content-container {
		padding: 20px 16px 28px !important;
		border-radius: 22px !important;
	}
	.slo-ec-overlay .Eventive--Checkout > h2:first-child,
	.slo-ec-overlay .Eventive--Checkout > div > h2:first-child,
	.slo-ec-overlay .Eventive--LoginPage > h2:first-child { font-size: var(--slo-ec-text-xl) !important; }
}