/* RJH Actiepopup 2.0 — alle kleuren en maten komen als CSS-variabelen uit de instellingen */

.rjh-actie,
.rjh-actie-tab {
	--rjh-accent: #c41e3a;
	--rjh-accent-2: #d9a441;
	--rjh-lint-2: #d9a441;
	--rjh-donker: #2a2a29;
	--rjh-licht: #f5f3ef;
	--rjh-tekst: #2a2a29;
	--rjh-kaart: #ffffff;
	--rjh-kop-tekst: #ffffff;
	--rjh-breedte: 620px;
	--rjh-max-h: 90vh;
	--rjh-radius: 14px;
	--rjh-overlay: .62;
	--rjh-font: inherit;
	--rjh-schaal: 1;
	--rjh-beeld: 4 / 3;
	--rjh-logo-b: 112px;
	--rjh-tab-maat: 62px;
	--rjh-gloed: color-mix(in srgb, var(--rjh-accent) 42%, transparent);
	--rjh-tekst-zacht: color-mix(in srgb, var(--rjh-tekst) 68%, var(--rjh-licht));
}

.rjh-actie {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: var(--rjh-font);
	color: var(--rjh-tekst);
	font-size: calc(15px * var(--rjh-schaal));
}
.rjh-actie[hidden] { display: none; }
.rjh-actie *, .rjh-actie *::before, .rjh-actie *::after { box-sizing: border-box; }

.rjh-actie__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 19, var(--rjh-overlay));
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .3s ease;
}
.rjh-geen-blur .rjh-actie__overlay { backdrop-filter: none; }

.rjh-actie__venster {
	position: relative;
	width: 100%;
	max-width: var(--rjh-breedte);
	max-height: calc(var(--rjh-max-h) - 48px);
	overflow-y: auto;
	background-color: var(--rjh-licht);
	background-image: var(--rjh-patroon, none);
	border-radius: var(--rjh-radius);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
	opacity: 0;
	transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.rjh-actie.is-open .rjh-actie__overlay { opacity: 1; }
.rjh-actie.is-open.is-open .rjh-actie__venster { opacity: 1; transform: none; }

/* ---------- Animaties ---------- */
.rjh-anim--schuif  .rjh-actie__venster { transform: translateY(18px) scale(.98); }
.rjh-anim--zoom    .rjh-actie__venster { transform: scale(.88); }
.rjh-anim--vervaag .rjh-actie__venster { transform: none; }
.rjh-anim--geen .rjh-actie__venster,
.rjh-anim--geen .rjh-actie__overlay { transition: none; transform: none; }

/* ---------- Posities ---------- */
.rjh-pos--onder { align-items: flex-end; padding-bottom: 0; }
.rjh-pos--onder .rjh-actie__venster { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rjh-pos--onder.rjh-anim--schuif .rjh-actie__venster { transform: translateY(60px); }

.rjh-pos--rechtsonder,
.rjh-pos--linksonder {
	inset: auto 20px 20px auto;
	padding: 0;
	width: min(var(--rjh-breedte), calc(100vw - 40px));
	display: block;
}
.rjh-pos--linksonder { inset: auto auto 20px 20px; }
.rjh-pos--rechtsonder .rjh-actie__overlay,
.rjh-pos--linksonder .rjh-actie__overlay { display: none; }
.rjh-pos--rechtsonder .rjh-actie__venster,
.rjh-pos--linksonder .rjh-actie__venster { max-height: calc(var(--rjh-max-h) - 40px); }
.rjh-pos--rechtsonder.rjh-anim--schuif .rjh-actie__venster { transform: translateX(40px); }
.rjh-pos--linksonder.rjh-anim--schuif .rjh-actie__venster { transform: translateX(-40px); }

/* ---------- Kop ---------- */
.rjh-actie__kop {
	position: relative;
	padding: 62px 32px 30px;
	color: var(--rjh-kop-tekst);
	background-color: var(--rjh-donker);
	border-radius: var(--rjh-radius) var(--rjh-radius) 0 0;
	overflow: hidden;
}
.rjh-kop--raster .rjh-actie__kop {
	background-image:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 22px 22px;
}
.rjh-kop--verloop .rjh-actie__kop {
	background-image: linear-gradient(135deg, var(--rjh-donker) 30%, color-mix(in srgb, var(--rjh-accent) 75%, var(--rjh-donker)));
}
.rjh-kop--afbeelding .rjh-actie__kop {
	background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.65)), var(--rjh-kop-img, none);
	background-size: cover;
	background-position: center;
}
.rjh-pos--onder .rjh-actie__kop { border-radius: var(--rjh-radius) var(--rjh-radius) 0 0; }

/* Lint onderaan de kop */
.rjh-actie__kop::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 8px;
	background: repeating-linear-gradient(-45deg, var(--rjh-accent) 0 10px, var(--rjh-lint-2) 10px 20px);
}
.rjh-lint--effen .rjh-actie__kop::after { height: 5px; background: var(--rjh-accent); }
.rjh-lint--geen  .rjh-actie__kop::after { display: none; }

/* Gloed achter de tekening */
.rjh-actie__kop::before {
	content: "";
	position: absolute;
	right: -60px; bottom: -80px;
	width: 340px; height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--rjh-gloed) 0%, transparent 65%);
	pointer-events: none;
}
.rjh-kop--effen .rjh-actie__kop::before { display: none; }

.rjh-actie__logo {
	display: block;
	width: var(--rjh-logo-b);
	max-width: 60%;
	height: auto;
	margin: 0 0 18px;
}
.rjh-actie__label {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--rjh-accent);
	color: #fff;
	font-size: calc(12px * var(--rjh-schaal));
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--rjh-kop-tekst) 22%, transparent);
}
.rjh-actie__titel {
	margin: 14px 0 8px;
	font-family: var(--rjh-font);
	font-size: calc(clamp(22px, 4.2vw, 30px) * var(--rjh-schaal));
	line-height: 1.15;
	font-weight: 700;
	color: var(--rjh-kop-tekst);
	max-width: 22ch;
	text-wrap: balance;
}
.rjh-actie__tekst {
	margin: 0 0 18px;
	font-size: calc(15px * var(--rjh-schaal));
	line-height: 1.55;
	color: color-mix(in srgb, var(--rjh-kop-tekst) 78%, transparent);
	max-width: 46ch;
}
.rjh-actie__deadline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 13px;
	border: 1px solid color-mix(in srgb, var(--rjh-kop-tekst) 18%, transparent);
	border-radius: 8px;
	font-size: calc(14px * var(--rjh-schaal));
	color: color-mix(in srgb, var(--rjh-kop-tekst) 90%, transparent);
	background: color-mix(in srgb, var(--rjh-kop-tekst) 5%, transparent);
}
.rjh-actie__deadline strong { color: var(--rjh-accent-2); }

/* Gecentreerde kop */
.rjh-uitlijn--midden .rjh-actie__kop { text-align: center; }
.rjh-uitlijn--midden .rjh-actie__logo { margin-left: auto; margin-right: auto; }
.rjh-uitlijn--midden .rjh-actie__titel,
.rjh-uitlijn--midden .rjh-actie__tekst { margin-left: auto; margin-right: auto; }
.rjh-uitlijn--midden .rjh-actie__tekening { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: 220px; opacity: .14; }
.rjh-uitlijn--midden .rjh-actie__kop::before { right: 50%; bottom: 50%; transform: translate(50%, 50%); }
.rjh-uitlijn--midden .rjh-actie__voet { justify-content: center; }

.rjh-actie__stip {
	flex: none;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--rjh-accent-2);
	animation: rjh-puls 2s infinite;
}
@keyframes rjh-puls {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rjh-accent-2) 55%, transparent); }
	70%  { box-shadow: 0 0 0 9px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Sluitknop ---------- */
.rjh-actie__sluit {
	position: absolute;
	top: 14px; right: 14px;
	z-index: 3;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: var(--rjh-kop-tekst);
	cursor: pointer;
	transition: background .2s;
}
.rjh-actie__sluit:hover { background: rgba(255, 255, 255, .26); }
.rjh-actie__sluit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ---------- Artikelen ---------- */
.rjh-actie__artikelen {
	list-style: none;
	margin: 0;
	padding: 24px 32px 4px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}
.rjh-kolommen--vast .rjh-actie__artikelen { grid-template-columns: repeat(var(--rjh-kolommen), minmax(0, 1fr)); }
.rjh-actie__artikel { margin: 0; padding: 0; }
.rjh-actie__artikel a {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--rjh-kaart);
	border-radius: calc(var(--rjh-radius) * .7);
	overflow: hidden;
	color: var(--rjh-tekst);
	text-decoration: none;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.rjh-actie__artikel a:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px -10px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.06);
}
.rjh-actie__artikel-inhoud { display: flex; flex-direction: column; flex: 1; }
.rjh-actie__artikel-titel {
	padding: 11px 12px 0;
	font-size: calc(14px * var(--rjh-schaal));
	font-weight: 700;
	line-height: 1.3;
}
.rjh-actie__artikel-tekst {
	padding: 3px 12px 10px;
	font-size: calc(13px * var(--rjh-schaal));
	line-height: 1.4;
	color: var(--rjh-tekst-zacht);
}

/* Lijst-layout: beeld links, tekst rechts */
.rjh-layout--lijst .rjh-actie__artikelen { grid-template-columns: 1fr !important; gap: 10px; }
.rjh-layout--lijst .rjh-actie__artikel a { flex-direction: row; align-items: stretch; }
.rjh-layout--lijst .rjh-actie__beeld { flex: 0 0 34%; max-width: 170px; }
.rjh-layout--lijst .rjh-actie__artikel-inhoud { justify-content: center; padding: 4px 0; }

/* Carrousel-layout: horizontaal schuiven */
.rjh-layout--carrousel .rjh-actie__artikelen {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 32px;
	padding-bottom: 12px;
}
.rjh-layout--carrousel .rjh-actie__artikel { flex: 0 0 min(42%, 220px); scroll-snap-align: start; }

/* Prijs */
.rjh-actie__prijs {
	margin-top: auto;
	padding: 0 12px 12px;
	font-size: calc(13px * var(--rjh-schaal));
	font-weight: 700;
	color: var(--rjh-accent);
}
.rjh-prijs--label .rjh-actie__prijs {
	position: relative;
	align-self: flex-start;
	margin: auto 12px 12px;
	padding: 5px 11px 5px 20px;
	background: var(--rjh-accent);
	color: #fff;
	font-size: calc(12px * var(--rjh-schaal));
	line-height: 1.2;
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
	border-radius: 0 4px 4px 0;
}
.rjh-prijs--label .rjh-actie__prijs::before {
	content: "";
	position: absolute;
	left: 8px; top: 50%;
	width: 5px; height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: #fff;
}

/* Beeld: foto, 3D of lijntekening */
.rjh-actie__beeld { position: relative; display: block; }
.rjh-actie__foto {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--rjh-beeld);
	object-fit: cover;
	background-color: var(--rjh-donker);
	background-image:
		radial-gradient(ellipse at 50% 62%, var(--rjh-gloed) 0%, transparent 68%),
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: auto, 14px 14px, 14px 14px;
}
.rjh-actie__plaatshouder,
.rjh-actie__3d {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: var(--rjh-beeld);
	overflow: hidden;
	background-color: var(--rjh-donker);
	background-image:
		radial-gradient(ellipse at 50% 62%, var(--rjh-gloed) 0%, transparent 68%),
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: auto, 14px 14px, 14px 14px;
}
.rjh-layout--lijst .rjh-actie__foto,
.rjh-layout--lijst .rjh-actie__plaatshouder,
.rjh-layout--lijst .rjh-actie__3d { height: 100%; }
.rjh-actie__plaatshouder .rjh-icoon { width: 44%; height: auto; max-height: 70%; transition: transform .3s ease; }
.rjh-actie__artikel a:hover .rjh-actie__plaatshouder .rjh-icoon { transform: scale(1.06) rotate(-2deg); }

/* Iconen in lijnstijl krijgen de accentkleur */
.rjh-actie .rjh-icoon--lijn,
.rjh-actie-tab .rjh-icoon--lijn {
	fill: none;
	stroke: var(--rjh-accent-2);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.rjh-icoon--lijn * { vector-effect: non-scaling-stroke; }
.rjh-actie .rjh-icoon--lijn .rjh-actie__vul,
.rjh-actie-tab .rjh-icoon--lijn .rjh-actie__vul { fill: var(--rjh-accent-2); stroke: none; }
.rjh-icoon--lijn .rjh-actie__dik { stroke-width: 4.5; }
.rjh-icoon--lijn .rjh-actie__stippel { stroke-dasharray: 2 5; }
.rjh-icoon--lijn .rjh-actie__gloei { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rjh-accent-2) 80%, transparent)); }
.rjh-icoon--beeld { object-fit: contain; }

.rjh-actie__badge {
	position: absolute;
	top: 8px; left: 8px;
	z-index: 2;
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--rjh-accent-2);
	color: #2a2a29;
	font-size: calc(11px * var(--rjh-schaal));
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* 3D-voorbeeld */
.rjh-actie__3d img,
.rjh-actie__draai { position: absolute; inset: 0; width: 100%; height: 100%; }
.rjh-actie__3d img { object-fit: contain; }
.rjh-actie__draai {
	display: block;
	background-repeat: no-repeat;
	background-size: 1600% 100%;
	background-position: 0% 0;
	opacity: 0;
}
.rjh-actie__3d.speelt .rjh-actie__draai { opacity: 1; animation: rjh-draai 1.9s steps(16, jump-none) infinite; }
.rjh-actie__3d.speelt img { opacity: 0; }
@keyframes rjh-draai { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.rjh-actie__3d-hint {
	position: absolute;
	right: 7px; bottom: 7px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 7px 3px 5px;
	border-radius: 999px;
	background: rgba(20,20,19,.65);
	color: var(--rjh-accent-2);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	transition: opacity .2s;
}
.rjh-actie__3d-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rjh-actie__3d.speelt .rjh-actie__3d-hint { opacity: 0; }

/* ---------- Extra balk ---------- */
.rjh-actie__zakelijk {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 32px 0;
	padding: 10px 14px 10px 10px;
	background: var(--rjh-kaart);
	border-radius: calc(var(--rjh-radius) * .7);
	border-left: 4px solid var(--rjh-donker);
	box-shadow: 0 0 0 1px rgba(0,0,0,.06);
	color: var(--rjh-tekst);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.rjh-actie__zakelijk:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.06); }
.rjh-actie__zakelijk img { flex: none; width: 64px; height: 64px; border-radius: 6px; object-fit: cover; }
.rjh-actie__zakelijk img.rjh-actie__zakelijk-3d {
	background-color: var(--rjh-donker);
	background-image:
		linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 8px 8px;
}
.rjh-actie__zakelijk-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rjh-actie__zakelijk-label {
	font-size: calc(11px * var(--rjh-schaal));
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rjh-accent);
}
.rjh-actie__zakelijk-tekst strong { font-size: calc(14px * var(--rjh-schaal)); line-height: 1.3; }
.rjh-actie__zakelijk-tekst span:last-child { font-size: calc(13px * var(--rjh-schaal)); line-height: 1.4; color: var(--rjh-tekst-zacht); }
.rjh-actie__pijl { flex: none; width: 20px; height: 20px; margin-left: auto; fill: none; stroke: var(--rjh-tekst); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Voet ---------- */
.rjh-actie__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding: 22px 32px 28px;
}
.rjh-actie__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 10px;
	background: var(--rjh-accent);
	color: #fff !important;
	font-weight: 700;
	font-size: calc(15px * var(--rjh-schaal));
	text-decoration: none !important;
	transition: filter .2s, transform .2s;
}
.rjh-knop--pil .rjh-actie__knop { border-radius: 999px; }
.rjh-knop--hoekig .rjh-actie__knop { border-radius: 2px; }
.rjh-knop--breed .rjh-actie__knop { flex: 1 1 100%; }
.rjh-knop--breed .rjh-actie__later { margin: 0 auto; }
.rjh-actie__knop:hover { filter: brightness(1.1); transform: translateY(-1px); }
.rjh-actie__knop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rjh-actie__knop .rjh-actie__cadeau { width: 20px; height: 20px; }
.rjh-actie__later {
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--rjh-tekst-zacht);
	font: inherit;
	font-size: calc(14px * var(--rjh-schaal));
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.rjh-actie__later:hover { color: var(--rjh-tekst); }

.rjh-actie :focus-visible { outline: 3px solid var(--rjh-accent-2); outline-offset: 2px; }
.rjh-actie .rjh-actie__venster:focus,
.rjh-actie .rjh-actie__venster:focus-visible { outline: none; }

/* =====================================================================
 * VERSIERING
 * ===================================================================== */
.rjh-actie__logo, .rjh-actie__label, .rjh-actie__titel,
.rjh-actie__tekst, .rjh-actie__deadline { position: relative; z-index: 1; }

.rjh-actie__slinger { position: absolute; top: 0; left: 0; width: 100%; height: 60px; pointer-events: none; overflow: visible; }
.rjh-actie__draad { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.4; }
.rjh-actie__slinger--vlaggen path:not(.rjh-actie__draad) { filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.rjh-actie__fitting { fill: #8d8a83; }
.rjh-actie__lamp ellipse { fill: currentColor; filter: drop-shadow(0 0 5px currentColor); }
.rjh-actie__lamp--rood  { color: #ff4d5e; }
.rjh-actie__lamp--goud  { color: #ffc95a; }
.rjh-actie__lamp--groen { color: #5fe0a0; }
.rjh-actie__lamp--wit   { color: #e9f3ff; }
.rjh-actie__lamp { animation: rjh-twinkel 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.48s); }
@keyframes rjh-twinkel { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Tekening rechts in de kop */
.rjh-actie__tekening {
	position: absolute;
	right: 34px; bottom: 26px;
	width: 132px; height: auto;
	max-height: 70%;
	pointer-events: none;
}
img.rjh-actie__tekening { height: 132px; object-fit: contain; }

/* Vallende deeltjes */
.rjh-actie__vallen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rjh-actie__vallen i {
	position: absolute;
	top: -14px;
	left: var(--x);
	width: var(--s); height: var(--s);
	border-radius: 50%;
	opacity: 0;
	animation: rjh-val var(--d) linear infinite;
	animation-delay: var(--w);
}
.rjh-vallen--pepernoten .rjh-actie__vallen i { background: radial-gradient(circle at 35% 35%, #d4a066, #9c6a35 70%); box-shadow: inset -1px -1px 0 rgba(0,0,0,.25); }
.rjh-vallen--sneeuw .rjh-actie__vallen i { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7); }
.rjh-vallen--confetti .rjh-actie__vallen i { border-radius: 1px; height: calc(var(--s) * .5); background: var(--rjh-accent-2); }
.rjh-vallen--confetti .rjh-actie__vallen i:nth-child(3n) { background: #fff; }
.rjh-vallen--confetti .rjh-actie__vallen i:nth-child(3n+1) { background: color-mix(in srgb, var(--rjh-accent) 60%, #fff); }
.rjh-vallen--sterren .rjh-actie__vallen i,
.rjh-vallen--hartjes .rjh-actie__vallen i { border-radius: 0; width: calc(var(--s) * 1.6); height: calc(var(--s) * 1.6); background: var(--rjh-accent-2); }
.rjh-vallen--sterren .rjh-actie__vallen i { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.rjh-vallen--hartjes .rjh-actie__vallen i { background: color-mix(in srgb, var(--rjh-accent) 55%, #fff); clip-path: path('M5 9 C1 6 0 4 0 2.6 C0 1.1 1.1 0 2.5 0 C3.6 0 4.5.7 5 1.6 C5.5.7 6.4 0 7.5 0 C8.9 0 10 1.1 10 2.6 C10 4 9 6 5 9Z'); width: 10px; height: 10px; }
@keyframes rjh-val {
	0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
	10%  { opacity: .9; }
	85%  { opacity: .8; }
	100% { transform: translate(var(--dx), 340px) rotate(260deg); opacity: 0; }
}
.rjh-actie__vallen i:nth-child(1)  { --x: 6%;  --s: 8px;  --d: 9s;   --w: -1s;  --dx: 14px; }
.rjh-actie__vallen i:nth-child(2)  { --x: 14%; --s: 5px;  --d: 11s;  --w: -6s;  --dx: -10px; }
.rjh-actie__vallen i:nth-child(3)  { --x: 23%; --s: 7px;  --d: 10s;  --w: -3s;  --dx: 18px; }
.rjh-actie__vallen i:nth-child(4)  { --x: 31%; --s: 4px;  --d: 12s;  --w: -9s;  --dx: -6px; }
.rjh-actie__vallen i:nth-child(5)  { --x: 39%; --s: 6px;  --d: 8.5s; --w: -4s;  --dx: 12px; }
.rjh-actie__vallen i:nth-child(6)  { --x: 47%; --s: 9px;  --d: 11.5s;--w: -7s;  --dx: -16px; }
.rjh-actie__vallen i:nth-child(7)  { --x: 55%; --s: 5px;  --d: 9.5s; --w: -2s;  --dx: 10px; }
.rjh-actie__vallen i:nth-child(8)  { --x: 62%; --s: 7px;  --d: 12.5s;--w: -10s; --dx: -12px; }
.rjh-actie__vallen i:nth-child(9)  { --x: 69%; --s: 4px;  --d: 10.5s;--w: -5s;  --dx: 8px; }
.rjh-actie__vallen i:nth-child(10) { --x: 76%; --s: 8px;  --d: 9s;   --w: -8s;  --dx: -14px; }
.rjh-actie__vallen i:nth-child(11) { --x: 83%; --s: 5px;  --d: 11s;  --w: -1.5s;--dx: 12px; }
.rjh-actie__vallen i:nth-child(12) { --x: 90%; --s: 6px;  --d: 10s;  --w: -6.5s;--dx: -8px; }
.rjh-actie__vallen i:nth-child(13) { --x: 96%; --s: 4px;  --d: 12s;  --w: -3.5s;--dx: 6px; }
.rjh-actie__vallen i:nth-child(14) { --x: 52%; --s: 6px;  --d: 13s;  --w: -11s; --dx: 16px; }

/* =====================================================================
 * ZWEVEND KNOPJE
 * ===================================================================== */
.rjh-actie-tab {
	position: fixed;
	left: 20px; bottom: 20px;
	z-index: 99998;
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-family: var(--rjh-font);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.rjh-actie-tab[hidden] { display: none; }
.rjh-actie-tab--rechts { left: auto; right: 20px; flex-direction: row-reverse; }
.rjh-actie-tab__rond {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--rjh-tab-maat); height: var(--rjh-tab-maat);
	border-radius: 50%;
	background: repeating-conic-gradient(var(--rjh-accent) 0 15deg, var(--rjh-lint-2) 15deg 30deg);
	box-shadow: 0 12px 26px -8px rgba(0,0,0,.5);
	transition: transform .25s cubic-bezier(.2,.8,.2,1);
	animation: rjh-tab-in .5s cubic-bezier(.2,.8,.2,1) both, rjh-tab-wiebel 7s ease-in-out 2s infinite;
}
.rjh-actie-tab--stil .rjh-actie-tab__rond { animation: rjh-tab-in .5s cubic-bezier(.2,.8,.2,1) both; }
.rjh-actie-tab__rond::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background-color: var(--rjh-donker);
	background-image:
		radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--rjh-accent) 55%, transparent) 0%, transparent 70%),
		linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: auto, 8px 8px, 8px 8px;
}
.rjh-actie-tab__icoon { position: relative; width: 48%; height: 48%; }
.rjh-actie-tab .rjh-icoon--lijn { stroke-width: 2; }
.rjh-actie-tab .rjh-icoon--lijn .rjh-actie__dik { stroke-width: 3.4; }
.rjh-actie-tab .rjh-icoon--lijn .rjh-actie__stippel { stroke-dasharray: 1.5 3.5; }
.rjh-actie-tab__stip {
	position: absolute;
	top: 2px; right: 2px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--rjh-accent-2);
	border: 2px solid var(--rjh-donker);
	animation: rjh-puls 2s infinite;
}
.rjh-actie-tab__tekst {
	margin-left: -28px;
	padding: 10px 16px 10px 38px;
	border-radius: 0 999px 999px 0;
	background: var(--rjh-donker);
	color: var(--rjh-kop-tekst);
	font-size: calc(14px * var(--rjh-schaal));
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 10px 24px -8px rgba(0,0,0,.45);
	opacity: 0;
	transform: translateX(-12px);
	clip-path: inset(0 100% 0 0);
	transition: opacity .25s ease, transform .3s ease, clip-path .35s ease;
	pointer-events: none;
}
.rjh-actie-tab--rechts .rjh-actie-tab__tekst {
	margin-left: 0; margin-right: -28px;
	padding: 10px 38px 10px 16px;
	border-radius: 999px 0 0 999px;
	transform: translateX(12px);
	clip-path: inset(0 0 0 100%);
}
.rjh-actie-tab:hover .rjh-actie-tab__rond,
.rjh-actie-tab:focus-visible .rjh-actie-tab__rond { transform: scale(1.07) rotate(-6deg); }
.rjh-actie-tab:hover .rjh-actie-tab__tekst,
.rjh-actie-tab:focus-visible .rjh-actie-tab__tekst { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.rjh-actie-tab:focus-visible { outline: none; }
.rjh-actie-tab:focus-visible .rjh-actie-tab__rond { outline: 3px solid var(--rjh-accent-2); outline-offset: 3px; }
.rjh-actie-tab.is-nieuw .rjh-actie-tab__tekst { animation: rjh-tab-tekst 3.2s ease .4s both; }
.rjh-actie-tab--rechts.is-nieuw .rjh-actie-tab__tekst { animation-name: rjh-tab-tekst-r; }
@keyframes rjh-tab-tekst {
	0%   { opacity: 0; transform: translateX(-12px); clip-path: inset(0 100% 0 0); }
	15%, 80% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
	100% { opacity: 0; transform: translateX(-12px); clip-path: inset(0 100% 0 0); }
}
@keyframes rjh-tab-tekst-r {
	0%   { opacity: 0; transform: translateX(12px); clip-path: inset(0 0 0 100%); }
	15%, 80% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
	100% { opacity: 0; transform: translateX(12px); clip-path: inset(0 0 0 100%); }
}
@keyframes rjh-tab-in { from { transform: scale(.4) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rjh-tab-wiebel {
	0%, 88%, 100% { rotate: 0deg; }
	90% { rotate: -12deg; }
	92% { rotate: 10deg; }
	94% { rotate: -6deg; }
	96% { rotate: 3deg; }
}

/* Pagina niet laten scrollen achter de popup */
html.rjh-actie-open { overflow: hidden; }

/* ---------- Mobiel ---------- */
@media (max-width: 600px) {
	.rjh-actie { padding: 12px; }
	.rjh-mobiel--blad,
	.rjh-mobiel--blad.rjh-pos--rechtsonder,
	.rjh-mobiel--blad.rjh-pos--linksonder { inset: 0; width: auto; padding: 0; display: flex; align-items: flex-end; }
	.rjh-mobiel--blad .rjh-actie__overlay { display: block !important; }
	.rjh-mobiel--blad .rjh-actie__venster {
		max-width: none;
		max-height: 92vh;
		border-radius: 18px 18px 0 0;
		transform: translateY(40px);
	}
	.rjh-mobiel--blad .rjh-actie__kop { border-radius: 18px 18px 0 0; }
	.rjh-pos--rechtsonder:not(.rjh-mobiel--blad),
	.rjh-pos--linksonder:not(.rjh-mobiel--blad) { inset: auto 12px 12px 12px; width: auto; }
	.rjh-actie__kop { padding: 52px 20px 24px; }
	.rjh-actie__logo { width: calc(var(--rjh-logo-b) * .82); margin-bottom: 14px; }
	.rjh-layout--raster .rjh-actie__artikelen,
	.rjh-layout--carrousel .rjh-actie__artikelen {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		padding: 18px 20px 6px;
		gap: 12px;
	}
	.rjh-layout--raster .rjh-actie__artikel,
	.rjh-layout--carrousel .rjh-actie__artikel { flex: 0 0 62%; scroll-snap-align: start; }
	.rjh-layout--lijst .rjh-actie__artikelen { padding: 18px 20px 6px; }
	.rjh-actie__voet { padding: 18px 20px 24px; }
	.rjh-actie__knop { flex: 1 1 100%; }
	.rjh-actie__later { margin: 0 auto; }
	.rjh-actie-tab { left: 14px; bottom: 14px; }
	.rjh-actie-tab--rechts { left: auto; right: 14px; }
	.rjh-actie-tab__rond { width: calc(var(--rjh-tab-maat) * .9); height: calc(var(--rjh-tab-maat) * .9); }
	.rjh-actie__tekening { width: 84px; right: 18px; bottom: auto; top: 50px; opacity: .85; }
	img.rjh-actie__tekening { height: 84px; }
	.rjh-uitlijn--midden .rjh-actie__tekening { top: 50%; width: 160px; opacity: .14; }
	.rjh-actie__titel, .rjh-actie__tekst { max-width: none; }
	.rjh-uitlijn--links .rjh-actie__label { margin-right: 90px; }
	.rjh-actie__zakelijk { margin: 12px 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.rjh-actie__overlay, .rjh-actie__venster, .rjh-actie__artikel a, .rjh-actie-tab { transition: none; }
	.rjh-actie__stip, .rjh-actie__lamp, .rjh-actie-tab__rond, .rjh-actie-tab__stip { animation: none; }
	.rjh-actie__3d.speelt .rjh-actie__draai { animation: none; opacity: 0; }
	.rjh-actie__3d.speelt img { opacity: 1; }
	.rjh-actie__vallen { display: none; }
}