/*!
 * Slek & Co. design system (Slek Club plugin, assets/site/slek-site.css).
 *
 * 1. Tokens (custom properties on :root)
 * 2. Base style, only with body.slek-site and at the lowest priority:
 *    Elementor Site Settings and the theme customizer always win.
 * 3. Utility classes for the Elementor "CSS-klassen" field (slek-card, slek-btn, …).
 *    They work on plain HTML and on the Elementor wrapper of a widget or container.
 *    Selectors on Elementor widgets are ".elementor .slek-x .elementor-…": stronger
 *    than the Elementor global defaults, weaker than settings on the element itself.
 *    The colour classes also set Elementor's global colour variables on their element
 *    (see "Elementor colour bridge"), so the editor shows exactly what the site shows.
 * 4. Motion layer: reveals, load-in, bob/float/spin, scroll snail, slime, confetti.
 *    Everything is visible without JavaScript and calm with prefers-reduced-motion.
 * 5. Site patterns of the Slek Elementor kit (header, hero, ticket, tiles, reels,
 *    FAQ, loading animation, page fade).
 *
 * The sign-up form and stamp card (.slek-root …) have their own styles: the utility
 * classes that share a name with them (slek-card, slek-btn, slek-label) skip
 * everything inside .slek-root.
 */

/* ---------- 1. Tokens ---------- */
:root {
	--slek-green: #1e5a3c;
	--slek-green-deep: #143f2a;
	--slek-pink: #f49ac1;
	--slek-pink-deep: #b02f6b;
	--slek-cream: #fdf6e4;
	--slek-paper: #fffbf1;
	--slek-sand: #f2c98f;
	--slek-ink: #141414;
	--slek-muted: #5e5a50;
	--slek-line: #e3d8bf;
	--slek-display: "Bagel Fat One", "Arial Rounded MT Bold", "Arial Black", system-ui, sans-serif;
	--slek-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--slek-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--slek-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--slek-radius: 30px;
	--slek-radius-lg: 40px;
	--slek-radius-sm: 18px;
	--slek-line-w: 2px;
	--slek-shadow: 0 6px 0 var(--slek-ink);
	--slek-shadow-lg: 0 8px 0 var(--slek-ink);
	--slek-shadow-hover: 0 12px 0 var(--slek-ink);
	--slek-spring: cubic-bezier(.2, 1.4, .4, 1);
	--slek-out: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 2. Base (opt-in: body.slek-site; specificity of a type selector) ---------- */
html :where(body.slek-site) {
	background-color: var(--slek-cream);
	color: var(--slek-ink);
	font-family: var(--slek-sans);
	font-size: 17px;
	line-height: 1.6;
}

html :where(body.slek-site p a:not([class]), body.slek-site li a:not([class]):where(.elementor-widget-text-editor *)) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--slek-pink);
	text-underline-offset: 3px;
}

html :where(body.slek-site p a:not([class]):hover) {
	text-decoration-color: var(--slek-pink-deep);
}

/* Elementor removes the underline from every link (.elementor a); links inside running
   text keep it, so they still look like links. */
body.slek-site .elementor-widget-text-editor :is(p, li) a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--slek-pink);
	text-underline-offset: 3px;
}

body.slek-site .elementor-widget-text-editor :is(p, li) a:not([class]):hover {
	text-decoration-color: var(--slek-pink-deep);
}

/* No theme-reset link colours (#c36 / #336): links take the text colour,
   unless Elementor Site Settings or a widget set one. */
html :where(body.slek-site a) {
	color: inherit;
}

html :where(body.slek-site) a:is(:hover, :active) {
	color: inherit;
}

html :where(body.slek-site) ::selection {
	background: var(--slek-pink);
	color: var(--slek-ink);
}

/* Anchor links (/#faq) land below the sticky header and scroll smoothly. The same
   offset is used by the plugin's own scroll and focus targets (sign-up errors and
   thank-you, stamp-card messages, the drop): --slek-focus-offset. Without JavaScript
   the announcement bar stays in the sticky header, so the offset is larger. */
html:has(body.slek-site) { scroll-behavior: smooth; }
body.slek-site:has(.slek-header) { --slek-focus-offset: 150px; }
.slek-js body.slek-site:has(.slek-header) { --slek-focus-offset: 104px; }
html :where(body.slek-site .e-con[id]) { scroll-margin-top: var(--slek-focus-offset, 96px); }
html :where(body.slek-site [data-elementor-type="wp-page"]:focus) { outline: none; }

html :where(body.slek-site) :focus-visible {
	outline: 3px solid var(--slek-pink-deep);
	outline-offset: 3px;
}

/* ---------- 3. Utilities ---------- */

/* Screen-reader-only text. */
.slek-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Typography ------------------------------------------------------------- */
.slek-h-display,
.slek-h2,
.elementor .slek-h-display :is(.elementor-heading-title, p, h1, h2, h3, h4, h5, h6),
.elementor .slek-h2 :is(.elementor-heading-title, p, h1, h2, h3, h4, h5, h6) {
	font-family: var(--slek-display);
	font-weight: 400;
	font-style: normal;
	line-height: .92;
	letter-spacing: -.005em;
	text-transform: none;
	text-wrap: balance;
}

.slek-h-xl,
.elementor .slek-h-xl :is(.elementor-heading-title, p, h1, h2, h3, h4, h5, h6) {
	font-size: clamp(60px, 10vw, 150px);
	line-height: .84;
}

.slek-h-lg,
.slek-h2,
.elementor .slek-h-lg :is(.elementor-heading-title, p, h1, h2, h3, h4, h5, h6),
.elementor .slek-h2 :is(.elementor-heading-title, p, h1, h2, h3, h4, h5, h6) {
	font-size: clamp(42px, 6.4vw, 84px);
	line-height: .9;
}

.slek-h-md,
.elementor .slek-h-md :is(.elementor-heading-title, p, h1, h2, h3, h4, h5, h6) {
	font-size: clamp(30px, 4vw, 44px);
	line-height: .95;
}

.slek-h-sm,
.elementor .slek-h-sm :is(.elementor-heading-title, p, h1, h2, h3, h4, h5, h6) {
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1;
}

.slek-h2,
.elementor .slek-h2 :is(.elementor-heading-title, p, h1, h2, h3, h4, h5, h6) {
	color: var(--slek-green);
}

.slek-serif,
.elementor .slek-serif :is(.elementor-heading-title, p, h1, h2, h3, h4, h5, h6) {
	font-family: var(--slek-serif);
	font-style: italic;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: none;
}

.slek-mono,
.elementor .slek-mono :is(.elementor-heading-title, p, li) {
	font-family: var(--slek-mono);
	font-weight: 500;
}

.slek-note,
.elementor .slek-note :is(p, .elementor-heading-title) {
	font-size: 14px;
	color: var(--slek-muted);
}

/* Label: "EERSTE EDITIE · ELSLOO". */
.slek-label:where(:not(.slek-root *)),
.elementor .slek-label:where(:not(.slek-root *)) :is(.elementor-heading-title, p) {
	font-family: var(--slek-mono);
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--slek-pink-deep);
}

.slek-label--light:where(:not(.slek-root *)),
.elementor .slek-label--light :is(.elementor-heading-title, p) { color: var(--slek-pink); }
.slek-label--ink:where(:not(.slek-root *)),
.elementor .slek-label--ink :is(.elementor-heading-title, p) { color: var(--slek-ink); }
.slek-label--green:where(:not(.slek-root *)),
.elementor .slek-label--green :is(.elementor-heading-title, p) { color: var(--slek-green); }
.slek-label--cream:where(:not(.slek-root *)),
.elementor .slek-label--cream :is(.elementor-heading-title, p) { color: var(--slek-cream); }

.slek-label--pill:where(:not(.slek-root *)):not(.elementor-element),
.elementor .slek-label--pill :is(.elementor-heading-title, p) {
	display: inline-block;
	padding: 4px 11px;
	border: 1.5px solid var(--slek-ink);
	border-radius: 999px;
	background: var(--slek-pink);
	color: var(--slek-ink);
	font-size: 11px;
	letter-spacing: .12em;
}

/* Text colours. */
.slek-text-green, .elementor .slek-text-green :is(.elementor-heading-title, p, li) { color: var(--slek-green); }
.slek-text-pink, .elementor .slek-text-pink :is(.elementor-heading-title, p, li) { color: var(--slek-pink); }
.slek-text-pink-deep, .elementor .slek-text-pink-deep :is(.elementor-heading-title, p, li) { color: var(--slek-pink-deep); }
.slek-text-cream, .elementor .slek-text-cream :is(.elementor-heading-title, p, li) { color: var(--slek-cream); }
.slek-text-ink, .elementor .slek-text-ink :is(.elementor-heading-title, p, li) { color: var(--slek-ink); }
.slek-text-muted, .elementor .slek-text-muted :is(.elementor-heading-title, p, li) { color: var(--slek-muted); }

/* An accent word in a heading: <em> in Bagel stays upright; deep pink on light
   backgrounds, pink on dark ones, green on pink. */
.slek-h-display em, .slek-h2 em {
	font-style: normal;
	color: var(--slek-pink-deep);
}

:is(.slek-card--green, .slek-card--deep, .slek-card--ink, .slek-bg-green, .slek-bg-deep, .slek-bg-ink) :is(.slek-h-display, .slek-h2) em {
	color: var(--slek-pink);
}

:is(.slek-card--pink, .slek-bg-pink) :is(.slek-h-display, .slek-h2) em {
	color: var(--slek-green);
}

/* Elementor colour bridge. In the editor, Elementor prints the default global colour
   on every element with the same weight as a colour picked in the panel, so a class
   alone would look different in the editor than on the site. The classes therefore
   also set Elementor's global colour variables for their element: defaults follow
   the class, a colour picked in the panel still wins. */
.elementor-element.slek-h2 { --e-global-color-primary: var(--slek-green); }
.elementor-element.slek-label { --e-global-color-primary: var(--slek-pink-deep); --e-global-color-text: var(--slek-pink-deep); }
.elementor-element.slek-label--light { --e-global-color-primary: var(--slek-pink); --e-global-color-text: var(--slek-pink); }
.elementor-element:is(.slek-label--ink, .slek-label--pill) { --e-global-color-primary: var(--slek-ink); --e-global-color-text: var(--slek-ink); }
.elementor-element.slek-label--green { --e-global-color-primary: var(--slek-green); --e-global-color-text: var(--slek-green); }
.elementor-element.slek-label--cream { --e-global-color-primary: var(--slek-cream); --e-global-color-text: var(--slek-cream); }
.elementor-element:is(.slek-card--green, .slek-card--deep, .slek-card--ink, .slek-bg-green, .slek-bg-deep, .slek-bg-ink) {
	--e-global-color-primary: var(--slek-cream);
	--e-global-color-text: var(--slek-cream);
}
/* Light islands inside a dark card (slek-light, the hero ticket, the facts grid):
   back to the kit's own colours, kept on <body> before any card changed them. */
body[class*="elementor-kit-"] {
	--slek-kit-primary: var(--e-global-color-primary, var(--slek-green));
	--slek-kit-text: var(--e-global-color-text, var(--slek-ink));
}
.elementor-element:is(.slek-light, .slek-ticket, .slek-facts) {
	--e-global-color-primary: var(--slek-kit-primary);
	--e-global-color-text: var(--slek-kit-text);
}
.elementor-element.slek-text-green { --e-global-color-primary: var(--slek-green); --e-global-color-text: var(--slek-green); }
.elementor-element.slek-text-pink { --e-global-color-primary: var(--slek-pink); --e-global-color-text: var(--slek-pink); }
.elementor-element.slek-text-pink-deep { --e-global-color-primary: var(--slek-pink-deep); --e-global-color-text: var(--slek-pink-deep); }
.elementor-element.slek-text-cream { --e-global-color-primary: var(--slek-cream); --e-global-color-text: var(--slek-cream); }
.elementor-element.slek-text-ink { --e-global-color-primary: var(--slek-ink); --e-global-color-text: var(--slek-ink); }
.elementor-element.slek-text-muted { --e-global-color-primary: var(--slek-muted); --e-global-color-text: var(--slek-muted); }
.elementor-element.slek-btn { --e-global-color-accent: var(--slek-pink); }
.elementor-element.slek-btn--green { --e-global-color-accent: var(--slek-green); }
.elementor-element.slek-btn--ink { --e-global-color-accent: var(--slek-ink); }
.elementor-element.slek-btn--paper { --e-global-color-accent: var(--slek-paper); }
.elementor-element.slek-btn--ghost { --e-global-color-accent: transparent; }

/* Backgrounds ------------------------------------------------------------- */
.slek-bg-green { background-color: var(--slek-green); color: var(--slek-cream); }
.slek-bg-deep { background-color: var(--slek-green-deep); color: var(--slek-cream); }
.slek-bg-pink { background-color: var(--slek-pink); }
.slek-bg-sand { background-color: var(--slek-sand); }
.slek-bg-cream { background-color: var(--slek-cream); }
.slek-bg-paper { background-color: var(--slek-paper); }
.slek-bg-ink { background-color: var(--slek-ink); color: var(--slek-cream); }
.slek-band { border-block: var(--slek-line-w) solid var(--slek-ink); }

/* Cards ------------------------------------------------------------------- */
.slek-card:where(:not(.slek-root *)) {
	background-color: var(--slek-paper);
	color: var(--slek-ink);
	border-style: solid;
	border-color: var(--slek-ink);
	box-shadow: var(--slek-shadow);
}

.slek-card:where(:not(.slek-root *, .e-con)) {
	position: relative;
	padding: 30px;
	border-width: var(--slek-line-w);
	border-radius: var(--slek-radius);
}

/* On an Elementor container: set its own variables, so padding, border width,
   corners and position chosen in the panel still win. */
.e-con.slek-card {
	--border-radius: var(--slek-radius);
	--border-top-width: var(--slek-line-w);
	--border-right-width: var(--slek-line-w);
	--border-bottom-width: var(--slek-line-w);
	--border-left-width: var(--slek-line-w);
	--padding-top: 30px;
	--padding-right: 30px;
	--padding-bottom: 30px;
	--padding-left: 30px;
}

@media (max-width: 600px) {
	.slek-card:where(:not(.slek-root *, .e-con)) { padding: 24px; }
	.e-con.slek-card {
		--padding-top: 24px;
		--padding-right: 22px;
		--padding-bottom: 24px;
		--padding-left: 22px;
	}
}

.slek-card--pink:where(:not(.slek-root *)) { background-color: var(--slek-pink); }
.slek-card--sand:where(:not(.slek-root *)) { background-color: var(--slek-sand); }
.slek-card--cream:where(:not(.slek-root *)) { background-color: var(--slek-cream); }
.slek-card--paper:where(:not(.slek-root *)) { background-color: var(--slek-paper); }
.slek-card--green:where(:not(.slek-root *)) { background-color: var(--slek-green); color: var(--slek-cream); }
.slek-card--deep:where(:not(.slek-root *)) { background-color: var(--slek-green-deep); color: var(--slek-cream); }
.slek-card--ink:where(:not(.slek-root *)) { background-color: var(--slek-ink); color: var(--slek-cream); }

/* Dark cards: Elementor text and headings follow the cream text colour, unless
   a colour is set on the widget itself. */
.elementor :is(.slek-card--green, .slek-card--deep, .slek-card--ink, .slek-bg-green, .slek-bg-deep, .slek-bg-ink) :is(.elementor-heading-title, .elementor-widget-text-editor, .elementor-icon-list-text) {
	color: inherit;
}

.slek-card--lg:where(:not(.slek-root *)) { box-shadow: var(--slek-shadow-lg); }
.slek-card--lg:where(:not(.slek-root *, .e-con)) { border-radius: var(--slek-radius-lg); }
.e-con.slek-card--lg { --border-radius: var(--slek-radius-lg); }

.slek-card--flat:where(:not(.slek-root *)) { box-shadow: none; }

.slek-card--hover:where(:not(.slek-root *)),
.slek-lift {
	transition: transform .3s var(--slek-spring), box-shadow .3s ease;
}
.slek-card--hover:where(:not(.slek-root *)):hover,
.slek-lift:hover {
	transform: translateY(-6px) rotate(-.8deg);
	box-shadow: var(--slek-shadow-hover);
}

.slek-card--tilt:where(:not(.slek-root *)) { rotate: -1.2deg; }
.slek-card--tilt-right:where(:not(.slek-root *)) { rotate: 1.1deg; }
.slek-card--tilt:where(:not(.slek-root *)),
.slek-card--tilt-right:where(:not(.slek-root *)) {
	transition: rotate .3s var(--slek-spring), scale .3s var(--slek-spring), box-shadow .3s ease;
}
.slek-card--tilt:where(:not(.slek-root *)):hover,
.slek-card--tilt-right:where(:not(.slek-root *)):hover {
	rotate: 0deg;
	scale: 1.03;
	box-shadow: var(--slek-shadow-lg);
}

/* Buttons ------------------------------------------------------------------ */
.slek-btn:where(:not(.slek-root *)):not(.elementor-element),
.elementor .slek-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 14px 24px;
	font-family: var(--slek-sans);
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: var(--slek-ink);
	background: var(--slek-pink);
	fill: currentColor;
	border: var(--slek-line-w) solid var(--slek-ink);
	border-radius: 999px;
	box-shadow: 0 4px 0 var(--slek-ink);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Re-assert the colours on focus too: the theme reset paints focused buttons. */
.slek-btn:where(:not(.slek-root *)):not(.elementor-element):is(:hover, :focus, :focus-visible),
.elementor .slek-btn .elementor-button:is(:hover, :focus, :focus-visible) {
	color: var(--slek-ink);
	background: var(--slek-pink);
}

.slek-btn:where(:not(.slek-root *)):not(.elementor-element):is(:hover, :focus-visible),
.elementor .slek-btn .elementor-button:is(:hover, :focus-visible) {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 var(--slek-ink);
}

.slek-btn:where(:not(.slek-root *)):not(.elementor-element):active,
.elementor .slek-btn .elementor-button:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--slek-ink);
}

.elementor .slek-btn .elementor-button :is(.elementor-button-text, .elementor-button-content-wrapper) {
	color: inherit;
}

.slek-btn--green:where(:not(.slek-root *)):not(.elementor-element),
.slek-btn--green:where(:not(.slek-root *)):not(.elementor-element):is(:hover, :focus, :focus-visible),
.elementor .slek-btn--green .elementor-button,
.elementor .slek-btn--green .elementor-button:is(:hover, :focus, :focus-visible) {
	background: var(--slek-green);
	color: var(--slek-cream);
}

.slek-btn--ink:where(:not(.slek-root *)):not(.elementor-element),
.slek-btn--ink:where(:not(.slek-root *)):not(.elementor-element):is(:hover, :focus, :focus-visible),
.elementor .slek-btn--ink .elementor-button,
.elementor .slek-btn--ink .elementor-button:is(:hover, :focus, :focus-visible) {
	background: var(--slek-ink);
	color: var(--slek-cream);
	box-shadow: 0 4px 0 var(--slek-pink);
}

.slek-btn--paper:where(:not(.slek-root *)):not(.elementor-element),
.slek-btn--paper:where(:not(.slek-root *)):not(.elementor-element):is(:hover, :focus, :focus-visible),
.elementor .slek-btn--paper .elementor-button,
.elementor .slek-btn--paper .elementor-button:is(:hover, :focus, :focus-visible) {
	background: var(--slek-paper);
	color: var(--slek-ink);
}

.slek-btn--ghost:where(:not(.slek-root *)):not(.elementor-element),
.slek-btn--ghost:where(:not(.slek-root *)):not(.elementor-element):is(:hover, :focus, :focus-visible),
.elementor .slek-btn--ghost .elementor-button,
.elementor .slek-btn--ghost .elementor-button:is(:hover, :focus, :focus-visible) {
	background: transparent;
	color: var(--slek-cream);
	border-color: var(--slek-cream);
	box-shadow: none;
}

.slek-btn--ghost:where(:not(.slek-root *)):not(.elementor-element):is(:hover, :focus, :focus-visible),
.elementor .slek-btn--ghost .elementor-button:is(:hover, :focus, :focus-visible) {
	background: rgba(253, 246, 228, .12);
}

.slek-btn--small:where(:not(.slek-root *)):not(.elementor-element),
.elementor .slek-btn--small .elementor-button {
	padding: 9px 16px;
	font-size: 14px;
	box-shadow: 0 3px 0 var(--slek-ink);
}

.slek-btn--large:where(:not(.slek-root *)):not(.elementor-element),
.elementor .slek-btn--large .elementor-button {
	padding: 17px 32px;
	font-size: 18px;
}

@media (max-width: 380px) {
	.slek-btn:where(:not(.slek-root *)):not(.elementor-element),
	.elementor .slek-btn .elementor-button {
		white-space: normal;
		text-align: center;
	}
}

/* Images ------------------------------------------------------------------ */
.slek-photo img,
img.slek-photo {
	border: var(--slek-line-w) solid var(--slek-ink);
	border-radius: var(--slek-radius);
	box-shadow: var(--slek-shadow-lg);
}

.slek-photo {
	transition: transform .4s cubic-bezier(.2, 1.2, .4, 1);
}

.slek-photo:hover {
	transform: rotate(-1.2deg) scale(1.01);
}

/* Big pink sun behind the content of a container. Drawn with ::after, because
   Elementor uses a container's ::before for its background overlay. */
.slek-sun {
	overflow: hidden;
	isolation: isolate;
}
.slek-sun:where(:not(.e-con)) { position: relative; }
.e-con.slek-sun { --overflow: hidden; }

.slek-sun::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -18%;
	bottom: 0;
	width: var(--slek-sun-size, 70%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--slek-sun-color, var(--slek-pink));
	/* Sinks into the bottom edge by a share of its own size, so it looks the same in
	   short and tall containers. */
	transform: translateY(58%);
	pointer-events: none;
}

.slek-sun--left::after { right: auto; left: -18%; }
.slek-sun--top::after { bottom: auto; top: 0; transform: translateY(-58%); }
.slek-sun--lg::after { --slek-sun-size: 118%; right: -34%; transform: translateY(36%); }
.slek-sun--lg.slek-sun--left::after { right: auto; left: -34%; }
.slek-sun--lg.slek-sun--top::after { transform: translateY(-36%); }
.slek-sun--sand { --slek-sun-color: var(--slek-sand); }
.slek-sun--cream { --slek-sun-color: var(--slek-cream); }

/* Wavy pink line (a divider or an empty container). */
.slek-wave {
	display: block;
	min-height: 28px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28'%3E%3Cpath d='M0 14 C15 2 30 2 45 14 S75 26 90 14 S105 2 120 14' fill='none' stroke='%23F49AC1' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 120px 28px;
}

/* Lists. */
.slek-chips :where(ul),
ul.slek-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slek-chips :where(li),
ul.slek-chips > li {
	margin: 0;
	padding: 4px 14px;
	background: var(--slek-cream);
	color: var(--slek-ink);
	border: var(--slek-line-w) solid var(--slek-ink);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
}

.slek-list-stars :where(ul),
ul.slek-list-stars {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slek-list-stars :where(li),
ul.slek-list-stars > li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-weight: 700;
}

.slek-list-stars :where(li)::before,
ul.slek-list-stars > li::before {
	content: "\273A";
	flex: none;
	color: var(--slek-green);
	font-size: 14px;
}

:is(.slek-card--green, .slek-card--deep, .slek-card--ink, .slek-bg-green, .slek-bg-deep, .slek-bg-ink) :is(.slek-list-stars li, ul.slek-list-stars > li)::before {
	color: var(--slek-pink);
}

/* Navigation: pill links, the section in view is pink. */
.slek-nav :where(a) {
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.slek-nav a:not(.elementor-button):not(.slek-btn) {
	padding: 8px 14px;
	font-weight: 600;
	color: inherit;
}

.slek-nav a:not(.elementor-button):not(.slek-btn):hover {
	background-color: var(--slek-paper);
	color: inherit;
}

.slek-nav a.slek-is-current:not(.elementor-button):not(.slek-btn),
.elementor-nav-menu a.slek-is-current {
	background-color: var(--slek-pink);
	color: var(--slek-ink);
}

/* ---------- 4. Motion ---------- */

/* Scroll reveal. Hidden only once slek-site.js has added .slek-js to <html>
   (never in the Elementor editor), and only until the element is in view. */
.slek-js .slek-reveal:not(.slek-revealed) {
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, 1.1, .3, 1), rotate .8s ease, scale .8s ease;
	transition-delay: var(--slek-d, 0s);
}

.slek-js .slek-reveal:not(.slek-in) {
	opacity: 0;
	transform: translateY(32px);
}

.slek-js .slek-reveal--pop:not(.slek-in) { transform: scale(.86) rotate(-3deg); }
.slek-js .slek-reveal--left:not(.slek-in) { transform: translateX(-48px); }
.slek-js .slek-reveal--right:not(.slek-in) { transform: translateX(48px); }
.slek-js .slek-reveal--peek:not(.slek-in) { transform: translateY(140px) rotate(8deg); }
.slek-js .slek-reveal--fade:not(.slek-in) { transform: none; }

.slek-delay-1 { --slek-d: .1s; }
.slek-delay-2 { --slek-d: .2s; }
.slek-delay-3 { --slek-d: .3s; }
.slek-delay-4 { --slek-d: .45s; }
.slek-delay-5 { --slek-d: .6s; }
.slek-delay-6 { --slek-d: .75s; }
.slek-delay-7 { --slek-d: .9s; }

/* Load-in (no scrolling needed): hero copy. */
.slek-fade-up {
	animation: slek-fade-up .8s var(--slek-out) backwards;
	animation-delay: var(--slek-d, 0s);
}

@keyframes slek-fade-up {
	from { opacity: 0; transform: translateY(22px); }
}

/* Hero heading and intro: they move in, but never start invisible (they are the
   biggest text at the top: Google measures when they paint, LCP). */
.slek-hero-in {
	animation: slek-rise .6s var(--slek-out) backwards;
	animation-delay: var(--slek-d, 0s);
}

@keyframes slek-rise {
	from { transform: translateY(22px); }
}

/* Words of a heading jump in one by one (slek-site.js wraps them in .slek-w). */
.slek-w {
	display: inline-block;
	animation: slek-word-in .9s cubic-bezier(.2, 1.5, .4, 1) backwards;
	animation-delay: calc(var(--slek-i, 0) * .1s + .15s);
}

@keyframes slek-word-in {
	from { opacity: 0; transform: translateY(70%) rotate(8deg) scale(.85); }
}

/* Ambient motion (on an image widget the image itself moves). */
.slek-bob:not(.elementor-widget-image),
.slek-bob.elementor-widget-image img {
	animation: slek-bob 3.4s ease-in-out infinite;
}

.slek-float:not(.elementor-widget-image),
.slek-float.elementor-widget-image img {
	animation: slek-float 5s ease-in-out infinite;
}

.slek-spin:not(.elementor-widget-image),
.slek-spin.elementor-widget-image img {
	animation: slek-spin 18s linear infinite;
}

.slek-wiggle-hover:hover :where(img, .slek-mascot__img),
img.slek-wiggle-hover:hover {
	animation: slek-wiggle .55s ease-in-out infinite;
}

@keyframes slek-bob {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-12px) rotate(-1.5deg); }
}

@keyframes slek-float {
	50% { transform: translateY(-6px); }
}

@keyframes slek-spin {
	to { transform: rotate(360deg); }
}

@keyframes slek-wiggle {
	25% { transform: rotate(-7deg) translateY(-5px); }
	75% { transform: rotate(7deg); }
}

@keyframes slek-run-bob {
	to { transform: translateY(-6px) rotate(-3deg); }
}

/* Pace-o-meter link: the matching group card jumps up with "Jij!". */
.slek-pace-turbo,
.slek-pace-cruise {
	position: relative;
	transition: transform .3s var(--slek-spring), box-shadow .3s ease;
}

.slek-pace-turbo.slek-is-match,
.slek-pace-cruise.slek-is-match {
	transform: translateY(-10px) rotate(-1deg);
	box-shadow: 0 14px 0 var(--slek-ink);
}

.slek-pace-turbo::after,
.slek-pace-cruise::after {
	content: "Jij!";
	position: absolute;
	z-index: 3;
	top: -14px;
	right: 18px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--slek-ink);
	color: var(--slek-cream);
	font-family: var(--slek-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(8px) scale(.8);
	transition: opacity .25s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
	pointer-events: none;
}

.slek-pace-turbo.slek-is-match::after,
.slek-pace-cruise.slek-is-match::after {
	opacity: 1;
	transform: none;
}

/* Scroll snail (created by slek-site.js). */
.slek-site-progress {
	position: fixed;
	z-index: 9990;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease;
}

.admin-bar .slek-site-progress { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .slek-site-progress { top: 46px; }
}

.slek-progress-host { position: relative; }

/* In the sticky header: a thin cream lane under the header bar (part of the header,
   like its frosted bar), with the pink line along its bottom edge and a small snail
   riding on it. Content scrolls under the lane the way it scrolls under the header;
   nothing hangs over the page. */
.slek-progress-host > .slek-site-progress {
	position: absolute;
	top: 100%;
	height: 14px;
	background-color: color-mix(in srgb, var(--slek-cream) 90%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.slek-progress-host > .slek-site-progress .slek-site-progress__bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
}

.slek-progress-host > .slek-site-progress .slek-site-progress__snail {
	top: auto;
	bottom: 2px;
	left: calc(var(--slek-p, 0) * (100% - 20px));
	width: 20px;
}

.slek-site-progress.is-visible { opacity: 1; }

.slek-site-progress__bar {
	height: 100%;
	background: var(--slek-pink);
	border-radius: 0 4px 4px 0;
	transform-origin: 0 50%;
	transform: scaleX(var(--slek-p, 0));
}

.slek-site-progress__snail {
	position: absolute;
	top: 3px;
	left: calc(var(--slek-p, 0) * (100% - 38px));
	width: 38px;
	height: auto;
	max-width: none;
}

/* Slime trail canvas and confetti (created by slek-site.js). */
.slek-slime {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 9980;
	pointer-events: none;
}

.slek-confetti-bit {
	position: fixed;
	z-index: 9995;
	width: 10px;
	height: 14px;
	border: 1.5px solid var(--slek-ink);
	border-radius: 3px;
	pointer-events: none;
}

.slek-confetti-bit--round { border-radius: 50%; }

/* ---------- 5. Site patterns (the Slek & Co. Elementor kit, slek-kit.zip) ----------
   Looks that Elementor has no control for, used by the kit's pages, header and footer.
   Content, spacing, colours and fonts stay in the Elementor panel (Global Colors and
   Global Fonts); these classes only add the Slek shapes: outlines, shadows, tickets,
   suns, tiles and the motion. Every class also works on a new section an editor
   builds. Cheat sheet: Slek Club → Instellingen → Website (Elementor). */

/* Helpers ------------------------------------------------------------------ */
.slek-nw { white-space: nowrap; }
.slek-measure,
.e-con > .elementor-element.slek-measure { max-width: 38ch; }
.slek-measure-l,
.e-con > .elementor-element.slek-measure-l { max-width: 62ch; }
.slek-span-2 { grid-column: span 2; }
.slek-h-display em, .slek-h2 em { white-space: nowrap; }

.slek-show-s { display: none; }

@media (max-width: 600px) {
	.slek-hide-s { display: none; }
	.slek-show-s { display: inline; }
}

/* Elementor puts the gap between widgets on the container: no stray paragraph
   margin under the last paragraph of a text widget. */
body.slek-site .elementor-widget-text-editor > :last-child,
body.slek-site .elementor-widget-text-editor > :last-child > :last-child {
	margin-block-end: 0;
}

/* An outlined container: on .e-con the border width follows Elementor's own
   variables, so a border set in the panel still wins. */
.e-con.slek-card,
.e-con.slek-ticket,
.e-con.slek-product,
.e-con.slek-reel,
.e-con.slek-ig-soon {
	border-width: var(--border-top-width) var(--border-right-width) var(--border-bottom-width) var(--border-left-width);
}

/* Header ------------------------------------------------------------------- */
/* Sticky: the Theme Builder header (Pro) or a header section placed in a page.
   The announcement bar scrolls away, the bar with the logo stays (slek-site.js
   measures the bar into --slek-announce-h). */
.elementor-location-header:has(> .e-con.slek-header),
.e-con.slek-header {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--slek-announce-h, 0px));
	z-index: 100;
}

.slek-announce p { margin: 0; }
.slek-announce b,
.slek-announce a {
	color: var(--slek-pink);
	font-weight: 700;
}
.slek-announce a { text-decoration: underline; text-underline-offset: 3px; }
.slek-announce a:hover { color: var(--slek-cream); }
.slek-sep { opacity: .5; padding-inline: 1px; }

.slek-header__bar {
	background-color: color-mix(in srgb, var(--slek-cream) 90%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.slek-header__nav .elementor-icon-list-items { flex-wrap: nowrap; }
.slek-nav .elementor-icon-list-item > a {
	padding: 8px 14px;
	border-radius: 999px;
	transition: background-color .2s ease;
}
.slek-nav .elementor-icon-list-item > a:hover { background-color: var(--slek-paper); }
.slek-nav .elementor-icon-list-item > a.slek-is-current { background-color: var(--slek-pink); }
.slek-nav .elementor-icon-list-item > a.slek-is-current .elementor-icon-list-text { color: var(--slek-ink); }

/* Footer ------------------------------------------------------------------- */
.slek-foot-list a:hover .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 3px; }
.e-con.slek-legal { border-top: 1px solid rgba(253, 246, 228, .2); }
.slek-legal p { opacity: .8; }
.slek-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.slek-legal a:hover { color: var(--slek-pink); }

/* Hero --------------------------------------------------------------------- */
.slek-hero { isolation: isolate; }
/* Phones: the eyebrow wraps before the seal in the top-right corner. */
@media (max-width: 767px) {
	.slek-hero__eyebrow { padding-right: 84px; }
}

/* The hero H1 always breaks as "Social / Run #1": at laptop widths "Social Run" would
   otherwise fit on one line and run under the seal. */
.slek-hero__title .elementor-heading-title { max-width: 4.3em; }

/* Second line of the hero H1 ("in Elsloo"): Instrument Serif, smaller, in sand. */
.slek-hero__title .slek-hero__where {
	display: block;
	margin-top: .26em;
	font-size: .34em;
	line-height: 1;
	color: var(--slek-sand);
}
.slek-hero__copy { position: relative; }
.slek-hero__art { position: relative; }

.slek-hero__art.slek-sun::after {
	animation: slek-sun-pop 1.1s cubic-bezier(.2, 1.2, .3, 1) backwards, slek-sun-pulse 7s ease-in-out 1.2s infinite;
}

@keyframes slek-sun-pop {
	from { opacity: 0; scale: .2; }
}

@keyframes slek-sun-pulse {
	50% { scale: 1.04; }
}

.slek-spark { pointer-events: none; }
.slek-spark span { display: inline-block; animation: slek-spark 6s ease-in-out infinite; }
.slek-spark--b span { animation-delay: -2s; }
.slek-spark--c span { animation-delay: -4s; }

@keyframes slek-spark {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-14px) rotate(180deg); }
}

/* A small snail sprints along the bottom edge of its container now and then. */
.elementor-element.slek-zoomer {
	position: absolute;
	z-index: 3;
	bottom: 4px;
	left: -140px;
	pointer-events: none;
	animation: slek-zoom 11s cubic-bezier(.5, 0, .6, 1) 2.5s infinite;
}
.slek-zoomer .slek-mascot__img { animation: slek-run-bob .28s ease-in-out infinite alternate; }

@keyframes slek-zoom {
	0% { left: -140px; }
	20%, 100% { left: calc(100% + 40px); }
}

/* The pink line that draws itself along the bottom of the hero: a pseudo element of
   the hero card (class slek-hero--trail), so there is no empty container in the editor. */
.e-con.slek-hero--trail::before {
	content: "";
	position: absolute;
	z-index: 1;
	/* Elementor styles a container's ::before as its background overlay: undo that. */
	top: auto;
	inset-inline-start: 0;
	left: 0;
	bottom: 22px;
	width: 62%;
	height: 40px;
	border: 0;
	border-radius: 0;
	opacity: 1;
	mix-blend-mode: normal;
	transition: none;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C50 0 100 40 150 20 S250 0 300 20 S400 40 450 20 S550 0 600 20' fill='none' stroke='%23F49AC1' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 50% / 100% 100%;
	clip-path: inset(-10px 100% -10px 0);
	animation: slek-draw 1.8s cubic-bezier(.6, 0, .2, 1) .9s forwards;
}

@media (max-width: 900px) {
	.e-con.slek-hero--trail::before { display: none; }
}

/* Older kit versions: the same line as an empty container. */
.e-con.slek-trail {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 22px;
	width: 62%;
	height: 40px;
	min-height: 0;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C50 0 100 40 150 20 S250 0 300 20 S400 40 450 20 S550 0 600 20' fill='none' stroke='%23F49AC1' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 50% / 100% 100%;
	clip-path: inset(-10px 100% -10px 0);
	animation: slek-draw 1.8s cubic-bezier(.6, 0, .2, 1) .9s forwards;
}

@keyframes slek-draw {
	to { clip-path: inset(-10px 0 -10px 0); }
}

@media (max-width: 900px) {
	.e-con.slek-trail { display: none; }
}

/* Ticket (hero) and facts (sign-up page) ------------------------------------- */
.e-con.slek-ticket {
	--border-radius: 28px;
	--border-top-width: 2px;
	--border-right-width: 2px;
	--border-bottom-width: 2px;
	--border-left-width: 2px;
	border-style: solid;
	border-color: var(--slek-ink);
	background-color: var(--slek-paper);
	box-shadow: var(--slek-shadow);
}

.e-con.slek-ticket__cell {
	--padding-top: 18px;
	--padding-right: 22px;
	--padding-bottom: 18px;
	--padding-left: 22px;
	border-left: 2px dashed var(--slek-line);
}
.e-con.slek-ticket__cell:first-child { border-left: 0; }
.slek-ticket__value .elementor-heading-title { text-wrap: balance; }

.e-con.slek-ticket__stub {
	position: relative;
	background-color: var(--slek-pink);
	border-left: 2px dashed var(--slek-ink);
	border-radius: 0 26px 26px 0;
}

/* The two half-circle bites where the stub tears off. */
.e-con.slek-ticket__stub::before,
.e-con.slek-ticket__stub::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: -13px;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 2px solid var(--slek-ink);
	border-radius: 50%;
	background: var(--slek-page-bg, var(--slek-cream));
	opacity: 1;
	mix-blend-mode: normal;
	transition: none;
}
.e-con.slek-ticket__stub::before { top: -14px; bottom: auto; clip-path: inset(50% 0 0 0); }
.e-con.slek-ticket__stub::after { top: auto; bottom: -14px; clip-path: inset(0 0 50% 0); }

.slek-countdown-ink .slek-countdown { --slek-cd-digit: var(--slek-ink); --slek-cd-label: var(--slek-ink); gap: 6px; }
.slek-countdown-ink .slek-countdown__units { gap: 12px; }
.slek-countdown-ink .slek-countdown__unit { min-width: 40px; }

@media (max-width: 1024px) {
	.e-con.slek-ticket__stub {
		border-left: 0;
		border-top: 2px dashed var(--slek-ink);
		border-radius: 0 0 26px 26px;
	}
	.e-con.slek-ticket__stub::before { top: -13px; left: -14px; clip-path: inset(0 0 0 50%); }
	.e-con.slek-ticket__stub::after { top: -13px; bottom: auto; left: auto; right: -14px; clip-path: inset(0 50% 0 0); }
}

@media (max-width: 1024px) {
	.slek-ticket__stub .elementor-widget-slek-countdown { width: 100%; text-align: center; }
	.slek-ticket__stub .slek-align { justify-content: center; }
	.slek-ticket__stub .slek-countdown { flex-direction: row; align-items: center; justify-content: center; gap: 18px; }
	.slek-countdown-ink .slek-countdown__units { gap: 22px; }
}

@media (max-width: 767px) {
	.e-con.slek-ticket__cell { --padding-top: 14px; --padding-right: 16px; --padding-bottom: 14px; --padding-left: 16px; }
	.e-con.slek-ticket__cell:nth-child(odd) { border-left: 0; }
	.e-con.slek-ticket__cell:nth-child(n+3) { border-top: 2px dashed var(--slek-line); }
	.slek-countdown-ink .slek-countdown__units { gap: 8px; }
	.slek-countdown-ink .slek-countdown__unit { min-width: 36px; }
}

.e-con.slek-facts {
	background-color: var(--slek-paper);
	border: 2px solid var(--slek-ink);
	border-radius: 20px;
	overflow: hidden;
}
.e-con.slek-facts__cell { --padding-top: 11px; --padding-right: 14px; --padding-bottom: 11px; --padding-left: 14px; }
.e-con.slek-facts__cell:nth-child(even) { border-left: 2px dashed var(--slek-line); }
.e-con.slek-facts__cell:nth-child(n+3) { border-top: 2px dashed var(--slek-line); }

/* Countdown as a small pink chip: label on the left, digits on the right. */
.slek-countdown-chip { align-self: flex-start; }
.slek-countdown-chip .slek-countdown {
	--slek-cd-digit: var(--slek-ink);
	--slek-cd-label: var(--slek-ink);
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	background: var(--slek-pink);
	border: 2px solid var(--slek-ink);
	border-radius: 18px;
	box-shadow: 0 4px 0 var(--slek-ink);
}
.slek-countdown-chip .slek-countdown__label { font-size: 11px; }
.slek-countdown-chip .slek-countdown__units { gap: 10px; }
.slek-countdown-chip .slek-countdown__unit { min-width: 34px; gap: 2px; }
.slek-countdown-chip .slek-countdown__unit small { font-size: 9.5px; }

/* Section head ------------------------------------------------------------- */
.slek-sec-head--gap { margin-bottom: 24px; }
.slek-sec-head a { font-weight: 700; }
.slek-h2__serif {
	font-family: var(--slek-serif);
	font-style: italic;
	font-size: .62em;
	color: var(--slek-pink);
}

/* Pace cards --------------------------------------------------------------- */
.slek-pill {
	align-self: flex-start;
	padding: 3px 12px;
	border: 1.5px solid currentColor;
	border-radius: 14px;
}
.slek-pill p { white-space: nowrap; }
.slek-pace-list ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0 110px 0 18px;
}
.elementor-element.slek-pace-pose {
	position: absolute;
	z-index: 1;
	right: 14px;
	bottom: 14px;
	pointer-events: none;
}
.slek-pace-pose--run .slek-mascot__img { animation: slek-run-bob .35s ease-in-out infinite alternate; }
.slek-pace-card:hover .slek-pace-pose .slek-mascot__img,
.slek-pace-card.slek-is-match .slek-pace-pose .slek-mascot__img { animation: slek-wiggle .55s ease-in-out infinite; }

@media (max-width: 600px) {
	.slek-pill { padding: 3px 10px; }
	.slek-pill p { font-size: 12px; letter-spacing: -.01em; }
	.slek-pace-list ul { padding-right: 76px; }
}

/* Dashed note box ("Kletstempo?"). */
.e-con.slek-note-box {
	--padding-top: 16px;
	--padding-right: 20px;
	--padding-bottom: 16px;
	--padding-left: 20px;
	background-color: var(--slek-cream);
	border: 2px dashed var(--slek-ink);
	border-radius: 22px;
}
.slek-note-box b {
	font-family: var(--slek-display);
	font-weight: 400;
	font-size: 20px;
	color: var(--slek-green);
}
.slek-note-box__pose { flex: none; }

/* Timeline on a paper band: the dots get a paper ring. */
.slek-tl-on-paper,
.slek-box { --slek-page-bg: var(--slek-paper); }
.slek-tl-compact .slek-tl { --slek-tl-title: 20px; --slek-tl-gap: 14px; margin-left: 8px; }
.slek-tl-compact .slek-tl .slek-tl__step { padding-left: 22px; }
.slek-tl-compact .slek-tl__step::before { top: 5px; left: -10px; width: 17px; height: 17px; }
.slek-tl-compact .slek-tl__time { font-size: 12px; }
.slek-tl-compact .slek-tl .slek-tl__title { margin: 0; line-height: 1.05; }
.slek-tl-compact .slek-tl .slek-tl__text { font-size: 15px; }

/* ’t Hoes card: the sun rises from the bottom edge. */
.e-con.slek-hoes { min-height: 0; aspect-ratio: 4 / 5; }
.slek-sun--rise::after {
	left: -7.5%;
	right: auto;
	width: 115%;
	transform: translateY(67%);
}
.slek-hoes__title { max-width: 11ch; }
.elementor-element.slek-hoes__pose { margin-top: auto; }
.slek-hoes__pose .slek-mascot { justify-content: center; }

@media (min-width: 601px) and (max-width: 1024px) {
	/* Stacked under the timeline: a poster, not a full-width wall. */
	.e-con.slek-hoes { width: min(100%, 460px); margin-inline: auto; }
	.slek-photo--portrait { width: min(100%, 420px); margin-inline: auto; }
}

@media (max-width: 600px) {
	.e-con.slek-hoes { aspect-ratio: auto; min-height: 480px; }
}

/* Chips on paper instead of cream. */
.slek-chips--paper :where(li) { background: var(--slek-paper); font-size: 14px; padding: 4px 12px; }

/* Tiles: a list (text widget) as small outlined cards. <li><b>Titel</b>tekst</li> */
.slek-tiles ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 4px 0 6px;
	padding: 0;
	list-style: none;
}
.slek-tiles--1 ul { grid-template-columns: minmax(0, 1fr); margin: 0; }
.slek-tiles--4 ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.slek-tiles li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 14px 16px;
	background: var(--slek-paper);
	color: var(--slek-ink);
	border: 2px solid var(--slek-ink);
	border-radius: 18px;
	font-size: 15px;
	line-height: 1.4;
	transition: transform .25s cubic-bezier(.2, 1.5, .4, 1), background-color .2s ease;
}
.slek-tiles li:hover { transform: translateY(-3px) rotate(-.6deg); }
.slek-tiles li > span { display: block; }
.slek-tiles b {
	display: block;
	font-family: var(--slek-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.05;
	color: var(--slek-green);
}
.slek-tiles--cream li { background: var(--slek-cream); padding: 18px; border-radius: 20px; }
.slek-tiles--cream b { font-size: 22px; margin-bottom: 2px; }
.slek-tiles--hover li:hover { background: var(--slek-pink); }
.slek-tiles--outline li {
	padding: 20px;
	background: transparent;
	color: inherit;
	border: 1.5px solid rgba(253, 246, 228, .4);
	border-radius: 22px;
}
.slek-tiles--outline b { font-size: 24px; color: var(--slek-pink); margin-bottom: 4px; }
.slek-tiles a { font-weight: 700; }

@media (max-width: 1024px) {
	.slek-tiles--4 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.slek-tiles ul, .slek-tiles--4 ul { grid-template-columns: minmax(0, 1fr); }
}

/* Goodiebag illustration: the tote on a pink sun. */
.elementor-element.slek-goodie-art {
	position: relative;
	width: min(400px, 100%);
	margin-inline: auto;
}
.slek-goodie-art::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 22.7%;
	left: 8%;
	width: 84%;
	aspect-ratio: 1;
	border: 3px solid var(--slek-ink);
	border-radius: 50%;
	background: var(--slek-pink);
}
.slek-goodie-art::after {
	content: "\273A";
	position: absolute;
	z-index: 2;
	top: 15.5%;
	left: 13%;
	font-size: 30px;
	line-height: 1;
	color: var(--slek-pink-deep);
	/* The second star (green, right of the bag) is the same glyph as a shadow. */
	text-shadow: 288px 158px 0 var(--slek-green);
	animation: slek-float 5s ease-in-out infinite;
}
.slek-goodie-art img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 50% 100%;
	animation: slek-sway 5s ease-in-out infinite;
}

@keyframes slek-sway {
	50% { transform: rotate(-2.5deg); }
}

@media (max-width: 1024px) {
	.elementor-element.slek-goodie-art { width: min(300px, 80%); }
	.slek-goodie-art::after { font-size: 24px; text-shadow: 216px 118px 0 var(--slek-green); }
}

/* Product cards (Drop no. 1 teaser). */
.e-con.slek-product {
	--border-radius: 26px;
	--border-top-width: 2px;
	--border-right-width: 2px;
	--border-bottom-width: 2px;
	--border-left-width: 2px;
	overflow: hidden;
	border-style: solid;
	border-color: var(--slek-ink);
	background-color: var(--slek-cream);
	color: var(--slek-ink);
	box-shadow: var(--slek-shadow);
	transition: transform .3s var(--slek-spring), box-shadow .3s ease;
}
.e-con.slek-product:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--slek-shadow-hover); }
.slek-product__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .35s ease;
}
.slek-product:hover .slek-product__img img { transform: scale(1.05); }
.slek-product__img { overflow: hidden; border-bottom: 2px solid var(--slek-ink); }

/* Card grids become a swipeable strip on phones. */
@media (max-width: 767px) {
	.e-con.e-grid.slek-strip-mobile {
		grid-template-columns: none !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 78%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		margin-inline: -16px;
		padding: 6px 16px 14px;
		scroll-padding-inline: 16px;
		scrollbar-width: none;
	}
	.e-con.slek-strip-mobile::-webkit-scrollbar { display: none; }
	.e-con.slek-strip-mobile > .e-con,
	.e-con.slek-strip-mobile > .elementor-element { scroll-snap-align: start; }
	.slek-js .slek-strip-mobile .slek-reveal:not(.slek-in) { opacity: 1; transform: none; }
}

/* Rules: the pose wiggles on hover (slek-wiggle-hover on the card). */
.slek-rule__pose .slek-mascot { margin: -6px 0 2px -4px; }

/* Photo with a fixed portrait crop. */
.slek-photo--portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.slek-photo img { display: block; }

/* Instagram: reels and grid ------------------------------------------------- */
.e-con.slek-reel {
	--border-radius: 30px;
	--border-top-width: 2px;
	--border-right-width: 2px;
	--border-bottom-width: 2px;
	--border-left-width: 2px;
	position: relative;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	border-style: solid;
	border-color: var(--slek-ink);
	background-color: var(--slek-ink);
	box-shadow: var(--slek-shadow);
	text-decoration: none;
	transition: transform .35s var(--slek-spring), rotate .35s var(--slek-spring);
}
.slek-reels > .slek-reel:nth-child(1) { rotate: -1.5deg; }
.slek-reels > .slek-reel:nth-child(3) { rotate: 1.5deg; }
.e-con.slek-reel:hover { transform: translateY(-8px); rotate: 0deg; }

.elementor-element.slek-reel__tag {
	position: absolute;
	z-index: 2;
	top: 12px;
	left: 12px;
}
.slek-reel__tag .elementor-heading-title {
	padding: 4px 10px;
	background: var(--slek-cream);
	border: 1.5px solid var(--slek-ink);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: .12em;
}
.elementor-element.slek-reel__video,
.slek-reel__video .e-hosted-video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.slek-reel__video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.e-con.slek-reel--promo {
	justify-content: flex-start;
	background-color: var(--slek-green);
	color: var(--slek-cream);
	isolation: isolate;
}
.slek-sun--promo::after {
	left: -10%;
	right: auto;
	width: 120%;
	transform: translateY(46%);
}
.slek-reel__title em { font-style: normal; color: var(--slek-pink); }
.slek-reel__go {
	display: inline-block;
	padding: 7px 16px;
	background: var(--slek-pink);
	color: var(--slek-ink);
	border: 2px solid var(--slek-ink);
	border-radius: 999px;
	box-shadow: 0 3px 0 var(--slek-ink);
	font-weight: 700;
}
.elementor-element.slek-reel__pose {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 3%;
	width: 62%;
	translate: -50% 0;
}
.slek-reel__pose .slek-mascot__stage { width: 100%; }
.slek-reel--promo .elementor-widget-text-editor { position: relative; z-index: 2; }
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element.slek-reel__pose { width: 56%; bottom: -3%; }
}
.slek-reel--promo:hover .slek-reel__pose .slek-mascot__img { animation: slek-wiggle .55s ease-in-out infinite; }

@media (max-width: 767px) {
	.e-con.e-grid.slek-reels {
		grid-template-columns: none !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 72%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: -16px;
		padding: 6px 16px 14px;
		scrollbar-width: none;
	}
	.e-con.slek-reels::-webkit-scrollbar { display: none; }
	.slek-reels > .slek-reel { scroll-snap-align: center; rotate: 0deg !important; }
	.slek-js .slek-reels .slek-reveal:not(.slek-in) { opacity: 1; transform: none; }
}

.slek-ig-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1.5px solid var(--slek-ink);
	border-radius: 14px;
	transition: transform .3s cubic-bezier(.2, 1.4, .4, 1);
}
.slek-ig-img a:hover img,
.slek-ig-img img:hover { transform: scale(1.05) rotate(-2deg); }

.e-con.slek-ig-soon {
	--border-radius: 14px;
	--border-top-width: 1.5px;
	--border-right-width: 1.5px;
	--border-bottom-width: 1.5px;
	--border-left-width: 1.5px;
	--padding-top: 18px;
	--padding-right: 47%;
	--padding-bottom: 18px;
	--padding-left: 20px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-style: solid;
	border-color: var(--slek-ink);
	background-color: var(--slek-green);
	color: var(--slek-cream);
}
.e-con.slek-ig-soon::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -11%;
	bottom: -36%;
	width: 54%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--slek-pink);
}
.elementor-element.slek-ig-soon__pose {
	position: absolute;
	z-index: 1;
	right: 2%;
	bottom: -2%;
	width: 41%;
}
.slek-ig-soon__pose .slek-mascot__stage { width: 100%; }
/* The accent word on the green tile: Slek roze, never deep pink (that is for cream). */
.slek-ig-soon .elementor-heading-title em { color: var(--slek-pink); }
.slek-ig-soon__title .elementor-heading-title { font-size: clamp(18px, 2.4vw, 28px); }
/* The square crops keep the bottom wordmark of the posts. */
.slek-ig-img img { object-position: 50% 0; }

@media (max-width: 1024px) {
	.e-con.slek-ig-soon { --padding-top: 12px; --padding-bottom: 12px; --padding-left: 14px; }
	.slek-ig-soon .elementor-widget-heading:first-child .elementor-heading-title { font-size: 9.5px; letter-spacing: .12em; }
}

/* FAQ (Elementor nested accordion) ------------------------------------------ */
.elementor-widget-n-accordion.slek-faq {
	--n-accordion-padding: 18px 22px;
	--n-accordion-title-justify-content: space-between;
	--n-accordion-border-width: 0px;
	--n-accordion-item-title-space-between: 12px;
	--n-accordion-icon-gap: 0 16px;
}
.slek-faq .e-n-accordion-item {
	background: var(--slek-cream);
	border: 2px solid var(--slek-ink);
	border-radius: 22px;
	transition: box-shadow .25s ease, transform .25s ease;
}
.slek-faq .e-n-accordion-item[open] { box-shadow: 0 5px 0 var(--slek-ink); }
.slek-faq .e-n-accordion-item-title-text { margin: 0; text-wrap: balance; }
.slek-faq .e-n-accordion-item-title::after {
	content: "+";
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	box-sizing: border-box;
	border: 2px solid var(--slek-ink);
	border-radius: 50%;
	background: var(--slek-pink);
	color: var(--slek-ink);
	font-family: var(--slek-sans);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	transition: transform .3s cubic-bezier(.2, 1.5, .4, 1);
}
.slek-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: rotate(45deg); }
.slek-faq .e-n-accordion-item > [role="region"],
.slek-faq .e-n-accordion-item > .e-con { border: 0; }
.e-con.slek-faq__panel { --padding-top: 0px; --padding-right: 22px; --padding-bottom: 20px; --padding-left: 22px; max-width: 62ch; }
.slek-faq__panel a { font-weight: 700; }

@media (max-width: 600px) {
	.elementor-widget-n-accordion.slek-faq { --n-accordion-padding: 16px 18px; }
	.e-con.slek-faq__panel { --padding-right: 18px; --padding-bottom: 18px; --padding-left: 18px; }
}

/* A column that stays in view next to a long one (desktop only). */
@media (min-width: 1025px) {
	.e-con.slek-sticky-col { position: sticky; top: calc(var(--slek-focus-offset, 96px) + 8px); align-self: start; }
}

/* Join card (call to action) ------------------------------------------------ */
.e-con > .elementor-element.slek-join__pose { margin-top: auto; }
.slek-join__cta { align-self: center; }
.e-con.slek-join__cta { box-shadow: var(--slek-shadow); }
.slek-join__cta .slek-countdown { --slek-cd-label: var(--slek-pink-deep); }
.e-con.slek-join-sec { position: relative; }

/* Peeking, waving snail. */
.slek-peek .slek-mascot__img {
	transform-origin: 50% 100%;
	animation: slek-wave 2.6s ease-in-out infinite;
}

@keyframes slek-wave {
	0%, 60%, 100% { transform: rotate(0); }
	70% { transform: rotate(-6deg); }
	80% { transform: rotate(5deg); }
	90% { transform: rotate(-3deg); }
}

/* Sign-up page -------------------------------------------------------------- */
.slek-sun--corner::after {
	top: -46px;
	right: -56px;
	bottom: auto;
	width: 190px;
	transform: none;
	animation: slek-sun-pop 1s cubic-bezier(.2, 1.2, .3, 1) backwards;
}
.slek-intro__title .elementor-heading-title { max-width: calc(100% - 96px); }

@media (min-width: 600px) {
	.slek-sun--corner::after { top: -70px; right: -80px; width: 300px; }
	.slek-intro__title .elementor-heading-title { max-width: calc(100% - 160px); }
}
@media (min-width: 1025px) {
	.slek-sun--corner::after { top: -120px; right: -120px; width: 360px; }
	.slek-intro__title .elementor-heading-title { max-width: calc(100% - 140px); }
	.slek-intro .slek-countdown-chip { margin-top: auto; }
	.slek-intro__tag { margin-top: 10px; }
}

.slek-form-wide { --slek-form-max: 100%; }
.slek-box__text a { font-weight: 700; }

/* Stamp-card page ------------------------------------------------------------ */
/* A member's own card: no "Meld je aan" calls in the header (body class from
   site-assets.php), and the "Every run counts." intro steps aside for the card. */
body.slek-page-kaart .e-con.slek-announce,
body.slek-page-kaart .slek-header__bar .elementor-widget-button { display: none; }
body.slek-has-card .e-con.slek-card-hero { display: none; }
body.slek-has-card .e-con.e-grid.slek-kaart-grid { --e-con-grid-template-columns: minmax(0, 1fr); }

.e-con.slek-card-hero { isolation: isolate; }
.slek-card-hero__title .elementor-heading-title { max-width: calc(100% - 150px); }
.slek-card-hero .slek-sun--corner::after,
.e-con.slek-card-hero.slek-sun--corner::after { --slek-sun-color: var(--slek-pink); }

/* The card preview: paper, ten slots, three stamped, 5 and 10 the rewards. */
.slek-card-preview {
	margin-top: 6px;
	padding: 16px 18px 18px;
	background: var(--slek-paper);
	color: var(--slek-ink);
	border: 2px solid var(--slek-ink);
	border-radius: 22px;
	box-shadow: 0 5px 0 var(--slek-ink);
}
.slek-card-preview__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 12px;
	font-family: var(--slek-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slek-pink-deep);
}
.slek-card-preview__head b { font-weight: 500; color: var(--slek-green); }
.slek-card-preview ol {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.slek-card-preview li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	margin: 0;
	background: var(--slek-cream);
	border: 2px solid var(--slek-ink);
	border-radius: 50%;
	font-family: var(--slek-mono);
	font-size: 13px;
	line-height: 1;
	color: var(--slek-muted);
}
.slek-card-preview li.is-stamped {
	background: var(--slek-green);
	color: var(--slek-pink);
	font-size: 20px;
}
.slek-card-preview li.is-koffie { background: var(--slek-sand); color: var(--slek-ink); }
.slek-card-preview li.is-sokken { background: var(--slek-pink); color: var(--slek-ink); }
.slek-card-preview li.is-reward span { font-family: var(--slek-display); font-size: 17px; }
.slek-card-preview li small {
	margin-top: 3px;
	font-size: 8.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Numbered steps (Zo werkt het, Spelregels): a pink number, a bold title, one line. */
.slek-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: slek-step;
}
.slek-steps li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding-left: 44px;
	font-size: 15.5px;
	line-height: 1.45;
	counter-increment: slek-step;
}
.slek-steps li::before {
	content: counter(slek-step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--slek-pink);
	color: var(--slek-ink);
	border: 2px solid var(--slek-ink);
	border-radius: 50%;
	font-family: var(--slek-display);
	font-size: 15px;
	line-height: 1;
}
.slek-steps b {
	font-family: var(--slek-display);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--slek-green);
}
.slek-steps--rules li::before { background: transparent; border-color: transparent; color: var(--slek-pink-deep); font-size: 22px; }
.slek-steps--rules b { font-family: var(--slek-sans); font-size: 15.5px; font-weight: 700; color: var(--slek-ink); }
.slek-steps a { font-weight: 700; }

/* Sign-up page: the second line of the H1 ("voor Social Run #1"). */
.slek-intro__title .slek-intro__for {
	display: block;
	margin-top: .16em;
	font-size: .36em;
	line-height: 1.05;
	color: var(--slek-sand);
}

/* Long text (privacy statement) ------------------------------------------------ */
.slek-prose { max-width: 70ch; }
.slek-prose h2 {
	margin: 2.4rem 0 .6rem;
	font-family: var(--slek-display);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 400;
	line-height: 1.05;
	color: var(--slek-green);
}
.slek-prose h3 {
	margin: 1.6rem 0 .4rem;
	font-family: var(--slek-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--slek-green);
}
.slek-prose p { margin: 0 0 .9rem; }
.slek-prose ul { margin: 0 0 1rem; padding-left: 1.2em; }
.slek-prose li + li { margin-top: .3rem; }
.slek-prose a { color: var(--slek-pink-deep); text-decoration: underline; text-underline-offset: .15em; }
.slek-prose a:hover { color: var(--slek-green); }
.slek-prose table {
	width: 100%;
	margin: 0 0 1.2rem;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
}
.slek-prose :is(th, td) {
	padding: 10px 12px 10px 0;
	border: 0;
	border-bottom: 1.5px solid var(--slek-line);
	background: transparent;
	text-align: left;
	vertical-align: top;
}
.slek-prose th { font-family: var(--slek-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slek-pink-deep); }
.slek-prose tbody tr:nth-child(odd) :is(td, th) { background: transparent; }

/* Loading animation (first page view of a visit; see site-assets.php) ------------ */
.slek-loader { display: none; }
.slek-preload .slek-loader {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--slek-cream);
	/* Safety net: gone after 1.5 s even if a script fails. */
	animation: slek-loader-out .35s ease 1.5s forwards;
}
.slek-preload-out .slek-loader { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.slek-loader__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	width: clamp(220px, 24vw, 360px);
}
.slek-loader__mark { display: block; width: 100%; height: auto; }
.slek-loader__track {
	position: relative;
	width: 100%;
	height: 72px;
}
/* The track: a sand line the full width of the wordmark; the pink slime fills it. */
.slek-loader__track::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 100%;
	height: 6px;
	border-radius: 6px;
	background: var(--slek-line);
}
.slek-loader__slime {
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 100%;
	height: 6px;
	border-radius: 6px;
	background: var(--slek-pink);
	transform-origin: 0 50%;
	transform: scaleX(0);
	animation: slek-loader-slime 1s cubic-bezier(.3, .6, .3, 1) forwards;
}
.slek-loader__snail {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 60px;
	height: auto;
	animation: slek-loader-crawl 1s cubic-bezier(.3, .6, .3, 1) forwards, slek-run-bob .3s ease-in-out infinite alternate;
}

/* Page loaded: the slime trail finishes while the screen fades. */
.slek-preload-out .slek-loader__slime { animation: none; transform: scaleX(1); transition: transform .3s ease-out; }
.slek-preload-out .slek-loader__snail { animation: none; left: calc(100% - 60px); transition: left .3s ease-out; }
.slek-loader__line {
	margin: 0;
	font-family: var(--slek-serif);
	font-size: 22px;
	font-style: italic;
	line-height: 1;
	color: var(--slek-pink-deep);
}

@keyframes slek-loader-slime { to { transform: scaleX(1); } }
@keyframes slek-loader-crawl { to { left: calc(100% - 60px); } }
@keyframes slek-loader-out { to { opacity: 0; visibility: hidden; } }

/* Page fade (between pages of the site). */
.slek-entering body { animation: slek-page-in .22s ease-out; }
.slek-leaving body { opacity: 0; transition: opacity .18s ease-in; }

@keyframes slek-page-in { from { opacity: 0; } }


/* Print: everything visible, nothing moving. */
@media print {
	.slek-js .slek-reveal { opacity: 1 !important; transform: none !important; }
	.slek-site-progress, .slek-slime, .slek-confetti-bit, .slek-loader, .slek-zoomer { display: none !important; }
	.e-con.slek-header, .elementor-location-header:has(> .e-con.slek-header) { position: static; }
}

/* Reduced motion: no reveals, no ambient animation, no tilt. */
@media (prefers-reduced-motion: reduce) {
	.slek-js .slek-reveal:not(.slek-in) { opacity: 1; transform: none; }
	.slek-fade-up, .slek-w, .slek-bob, .slek-float, .slek-spin,
	.slek-bob img, .slek-float img, .slek-spin img,
	.slek-wiggle-hover:hover :where(img, .slek-mascot__img), img.slek-wiggle-hover:hover {
		animation: none !important;
	}
	.slek-card--tilt:where(:not(.slek-root *)),
	.slek-card--tilt-right:where(:not(.slek-root *)) { rotate: 0deg; }
	.slek-card--hover:hover, .slek-lift:hover, .slek-photo:hover,
	.slek-pace-turbo.slek-is-match, .slek-pace-cruise.slek-is-match { transform: none; }
	.slek-btn:where(:not(.slek-root *)), .elementor .slek-btn .elementor-button { transition: none; }
	.slek-hide-reduced-motion, .slek-slime, .slek-zoomer, .slek-loader { display: none !important; }
	.slek-spark span, .slek-goodie-art img, .slek-goodie-art::after, .slek-peek .slek-mascot__img,
	.slek-pace-pose .slek-mascot__img, .slek-hero__art.slek-sun::after, .slek-sun--corner::after,
	.slek-entering body { animation: none !important; }
	.e-con.slek-trail, .e-con.slek-hero--trail::before { animation: none; clip-path: none; }
	.slek-hero-in { animation: none !important; }
	.slek-reels > .slek-reel, .e-con.slek-reel:hover { rotate: 0deg; transform: none; }
	.e-con.slek-product:hover, .slek-tiles li:hover, .slek-product:hover .slek-product__img img,
	.slek-ig-img a:hover img, .slek-ig-img img:hover { transform: none; }
	.slek-leaving body { opacity: 1; transition: none; }
	html:has(body.slek-site) { scroll-behavior: auto; }
}