/* Rozen Keuzehulp 1.3.0. Alles zit onder .rzk zodat het thema er niet doorheen fietst. */

.rzk {
	--rzk-accent: #8a1c24;
	--rzk-gold: #a9793a;
	--rzk-ink: #2a1f1c;
	--rzk-muted: #6b5f59;
	--rzk-line: #eadfd3;
	--rzk-soft: #fbf6f0;
	--rzk-sand: #f3e5d6;
	--rzk-sand-deep: #e9d3bb;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(16px, 3vw, 36px) 16px 48px;
	color: var(--rzk-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.55;
	text-align: left;
}

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

.rzk a {
	color: var(--rzk-accent);
}

.rzk__fallback {
	color: var(--rzk-muted);
}

.rzk .rzk__stage {
	max-width: 860px;
	margin: 0 auto;
}

.rzk .rzk__stage--wide {
	max-width: none;
}

.rzk .rzk__center {
	text-align: center;
}

/* ---------- voortgang en koppen ---------- */

.rzk .rzk__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 40px;
	margin: 0 0 8px;
	font-size: 0.9rem;
	color: var(--rzk-muted);
}

.rzk .rzk__bar {
	position: relative;
	height: 2px;
	margin: 0 0 36px;
	background: var(--rzk-line);
}

.rzk .rzk__bar i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: var(--rzk-accent);
	transition: width 0.3s ease;
}

.rzk .rzk__q {
	margin: 0 0 32px;
	padding: 0;
	font-family: inherit;
	font-size: clamp(1.7rem, 4.8vw, 2.5rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	color: var(--rzk-ink);
	outline: none;
}

.rzk .rzk__h3 {
	margin: 0 0 10px;
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rzk-ink);
}

/* Sectiekoppen zoals op de rest van de site: goud met lijnen */
.rzk .rzk__sh {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 26px;
	padding: 0;
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	color: var(--rzk-gold);
}

.rzk .rzk__sh::before,
.rzk .rzk__sh::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--rzk-gold);
	opacity: 0.55;
}

.rzk .rzk__sh span {
	flex: 0 1 auto;
}

/* ---------- antwoordtegels ---------- */

.rzk .rzk__grid {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rzk .rzk__grid li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rzk .rzk__grid--n4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rzk .rzk__grid--pill {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.rzk .rzk__grid--text {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.rzk button.rzk__tile {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--rzk-line);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(60, 40, 20, 0.05);
	color: var(--rzk-ink);
	font: inherit;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rzk button.rzk__tile:hover,
.rzk button.rzk__tile:focus-visible {
	border-color: var(--rzk-accent);
	background: #fff;
	color: var(--rzk-ink);
	box-shadow: 0 8px 22px rgba(60, 40, 20, 0.14);
}

.rzk .rzk__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--rzk-sand);
}

/* Productfoto's zijn staand: toon de bovenkant zodat de bloemen nooit worden afgesneden */
.rzk .rzk__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.rzk .rzk__optbody {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 14px 12px 16px;
}

.rzk .rzk__tile--text {
	min-height: 84px;
}

.rzk .rzk__optlabel {
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.25;
}

.rzk .rzk__optsub {
	font-size: 0.9rem;
	color: var(--rzk-muted);
}

.rzk button.rzk__tile:hover .rzk__optlabel,
.rzk button.rzk__tile:focus-visible .rzk__optlabel {
	color: var(--rzk-accent);
}

/* Kleurblokken als er geen foto is */
.rzk .rzk__media--sw[data-style="klassiek"] { background: #9b1b2c; }
.rzk .rzk__media--sw[data-style="puur"] { background: #f4f0e8; }
.rzk .rzk__media--sw[data-style="zacht"] { background: linear-gradient(135deg, #f0b3bf 0 50%, #c9a3d6 50% 100%); }
.rzk .rzk__media--sw[data-style="vrolijk"] { background: linear-gradient(135deg, #f3c34a 0 50%, #ee8a3a 50% 100%); }
.rzk .rzk__media--sw[data-style="bijzonder"] { background: linear-gradient(135deg, #2f55b8 0 50%, #232323 50% 100%); }
.rzk .rzk__media--sw[data-style="verras"] { background: conic-gradient(#9b1b2c, #f0b3bf, #f4f0e8, #f3c34a, #2f55b8, #9b1b2c); }

/* ---------- formulier jaren ---------- */

.rzk .rzk__yearsform {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rzk .rzk__label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.95rem;
	color: var(--rzk-muted);
}

.rzk input.rzk__input {
	display: block;
	width: 100%;
	max-width: 220px;
	height: 60px;
	margin: 0 0 20px;
	padding: 0 14px;
	border: 1px solid var(--rzk-sand-deep);
	border-radius: 4px;
	background: #fff;
	color: var(--rzk-ink);
	font: inherit;
	font-size: 1.5rem;
	text-align: center;
}

/* ---------- knoppen ---------- */

.rzk .rzk__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 16px 0 0;
}

.rzk .rzk__actions--center {
	justify-content: center;
}

.rzk .rzk__btn,
.rzk a.rzk__btn,
.rzk button.rzk__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 0 24px;
	border: 1px solid var(--rzk-accent);
	border-radius: 4px;
	background: var(--rzk-accent);
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rzk .rzk__btn:hover,
.rzk a.rzk__btn:hover,
.rzk button.rzk__btn:hover {
	background: #6f1219;
	border-color: #6f1219;
	color: #fff;
}

.rzk .rzk__btn--ghost,
.rzk a.rzk__btn--ghost,
.rzk button.rzk__btn--ghost {
	background: transparent;
	color: var(--rzk-accent);
}

.rzk .rzk__btn--ghost:hover,
.rzk a.rzk__btn--ghost:hover,
.rzk button.rzk__btn--ghost:hover {
	background: var(--rzk-sand);
	border-color: var(--rzk-accent);
	color: var(--rzk-accent);
}

/* Beige knop zoals "Toevoegen" op de rest van de site */
.rzk .rzk__btn--sand,
.rzk a.rzk__btn--sand,
.rzk button.rzk__btn--sand {
	width: 100%;
	min-height: 44px;
	border-color: var(--rzk-sand);
	border-radius: 999px;
	background: var(--rzk-sand);
	color: var(--rzk-ink);
}

.rzk .rzk__btn--sand:hover,
.rzk a.rzk__btn--sand:hover,
.rzk button.rzk__btn--sand:hover {
	border-color: var(--rzk-accent);
	background: var(--rzk-accent);
	color: #fff;
}

.rzk button.rzk__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.rzk button.rzk__back,
.rzk button.rzk__link {
	margin: 0;
	padding: 8px 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--rzk-accent);
	font: inherit;
	letter-spacing: 0;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}

.rzk a.rzk__link {
	color: var(--rzk-accent);
}

.rzk .rzk__added {
	font-weight: 600;
	color: var(--rzk-ink);
}

/* ---------- resultaat ---------- */

.rzk .rzk__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	margin: 0 0 32px;
}

.rzk .rzk__chip {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--rzk-sand);
	font-size: 0.92rem;
}

.rzk .rzk__main {
	display: grid;
	gap: 24px;
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid var(--rzk-line);
	border-radius: 8px;
	background: var(--rzk-soft);
}

.rzk .rzk__imgwrap {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--rzk-sand);
}

.rzk .rzk__imgwrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Witte productfoto's gaan op in het crème vlak van de topkeuze */
.rzk .rzk__main .rzk__imgwrap {
	background: transparent;
}

.rzk .rzk__main .rzk__imgwrap img {
	mix-blend-mode: multiply;
}

.rzk .rzk__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--rzk-accent);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
}

.rzk .rzk__cat {
	margin: 0 0 4px;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rzk-accent);
}

.rzk .rzk__title {
	margin: 0 0 8px;
	padding: 0;
	font-family: inherit;
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.rzk .rzk__title a {
	color: var(--rzk-ink);
	text-decoration: none;
}

.rzk .rzk__title a:hover {
	color: var(--rzk-accent);
}

.rzk .rzk__title--small {
	margin: 0 0 6px;
	font-size: 1.05rem;
}

.rzk .rzk__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 10px;
}

.rzk .rzk__from {
	font-size: 0.82rem;
	color: var(--rzk-muted);
}

.rzk .rzk__amount {
	font-size: 1.25rem;
	font-weight: 600;
}

.rzk .rzk__reason {
	margin: 0 0 6px;
	color: var(--rzk-muted);
}

.rzk .rzk__reason--small {
	font-size: 0.88rem;
	line-height: 1.45;
}

.rzk .rzk__note {
	max-width: 760px;
	margin: 0 auto 16px;
	padding: 12px 16px;
	border-left: 3px solid var(--rzk-gold);
	background: var(--rzk-soft);
}

.rzk .rzk__section {
	margin: 52px 0 0;
}

/* Productkaartjes zoals "Veel gekozen" op de rest van de site */
.rzk .rzk__alts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.rzk .rzk__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--rzk-line);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(60, 40, 20, 0.05);
}

.rzk .rzk__card[hidden] {
	display: none;
}

.rzk .rzk__card .rzk__imgwrap {
	aspect-ratio: 1 / 1;
}

.rzk .rzk__cardbody {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 14px 14px 16px;
}

.rzk .rzk__card .rzk__actions {
	margin-top: auto;
	padding-top: 10px;
}

.rzk .rzk__morewrap {
	margin: 28px 0 0;
	text-align: center;
}

.rzk .rzk__pillrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.rzk a.rzk__pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--rzk-sand-deep);
	border-radius: 999px;
	background: var(--rzk-sand);
	color: var(--rzk-ink);
	text-decoration: none;
}

.rzk a.rzk__pill:hover {
	border-color: var(--rzk-accent);
	background: var(--rzk-accent);
	color: #fff;
}

/* Extra's */
.rzk .rzk__addgroups {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.rzk .rzk__addhead {
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--rzk-line);
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rzk-ink);
}

.rzk .rzk__addons {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rzk .rzk__addon {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--rzk-line);
	list-style: none;
}

.rzk .rzk__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--rzk-sand);
}

.rzk .rzk__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rzk .rzk__addonbody {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rzk .rzk__addontitle {
	color: var(--rzk-ink);
	text-decoration: none;
}

.rzk .rzk__addontitle:hover {
	color: var(--rzk-accent);
}

.rzk .rzk__addonprice {
	font-weight: 600;
}

.rzk .rzk__help {
	margin: 56px 0 0;
	padding: 32px 20px;
	border-radius: 8px;
	background: var(--rzk-sand);
	text-align: center;
}

.rzk .rzk__help p {
	margin: 0 0 4px;
}

.rzk .rzk__controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	margin: 22px 0 0;
}

.rzk .rzk__empty {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.rzk .rzk__empty p {
	margin: 0 0 16px;
}

.rzk .rzk__loading {
	margin: 0;
	text-align: center;
	color: var(--rzk-muted);
}

/* ---------- focus ---------- */

.rzk button:focus-visible,
.rzk a:focus-visible,
.rzk input:focus-visible {
	outline: 3px solid var(--rzk-accent);
	outline-offset: 2px;
}

/* ---------- groter scherm ---------- */

@media (min-width: 640px) {
	.rzk .rzk__alts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (min-width: 760px) {
	.rzk .rzk__main {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: center;
		gap: 44px;
		padding: 28px;
	}

	.rzk .rzk__addgroups {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 36px;
	}
}

@media (min-width: 940px) {
	.rzk .rzk__alts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- mobiel ---------- */

@media (max-width: 600px) {
	.rzk .rzk__grid,
	.rzk .rzk__grid--n4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.rzk .rzk__grid--pill,
	.rzk .rzk__grid--text {
		grid-template-columns: 1fr;
	}

	.rzk .rzk__optlabel {
		font-size: 1.02rem;
	}

	.rzk .rzk__optsub {
		font-size: 0.82rem;
	}

	.rzk .rzk__sh {
		gap: 12px;
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rzk *,
	.rzk *::before,
	.rzk *::after {
		transition: none !important;
	}
}

/* ===== 1.3.0: look gelijk aan de nieuwe homepage ===== */
.rzk{font-family:'DM Sans',system-ui,sans-serif;--rzk-accent:#8b0000;--rzk-gold:#8a6420;--rzk-ink:#3a2a2a;--rzk-muted:#5c4d4d;--rzk-line:#e9dfd2;--rzk-soft:#faf6f0;--rzk-sand:#f3ebe0;padding-top:clamp(8px,1.5vw,16px)}
.rzk .rzk__q,.rzk .rzk__h3,.rzk .rzk__title{font-family:'Playfair Display',Georgia,serif;font-weight:600}
.rzk .rzk__q{font-size:clamp(1.6rem,3.6vw,2.3rem);margin-bottom:26px}
.rzk .rzk__top{min-height:28px;margin-bottom:6px;font-size:.85rem}
.rzk .rzk__bar{height:3px;border-radius:3px;margin-bottom:28px}
.rzk .rzk__bar i{border-radius:3px}
.rzk .rzk__back{font-family:inherit;font-weight:600}
.rzk .rzk__sh{font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:2.5px}
/* tegels */
.rzk button.rzk__tile{border-radius:14px;border-color:var(--rzk-line);box-shadow:0 2px 14px rgba(58,42,42,.06);transition:transform .2s,box-shadow .2s,border-color .2s}
.rzk button.rzk__tile:hover,.rzk button.rzk__tile:focus-visible{transform:translateY(-3px);box-shadow:0 10px 28px rgba(58,42,42,.14)}
.rzk .rzk__media{aspect-ratio:4/3;background:#fff}
.rzk .rzk__media img{object-fit:contain;object-position:center}
.rzk .rzk__optbody{border-top:1px solid var(--rzk-line);padding:12px 12px 14px}
.rzk .rzk__optlabel{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:1.1rem}
.rzk .rzk__optsub{font-size:.85rem}
.rzk .rzk__tile--text{min-height:72px}
.rzk .rzk__tile--text .rzk__optbody{border-top:0}
.rzk .rzk__grid--pill{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.rzk .rzk__grid--pill .rzk__optlabel{font-family:'DM Sans',sans-serif;font-weight:600;font-size:1rem}
/* jaren */
.rzk input.rzk__input{max-width:200px;height:64px;border:1.5px solid var(--rzk-line);border-radius:12px;font-family:'Playfair Display',serif;font-size:1.8rem;margin-bottom:14px}
.rzk input.rzk__input:focus{outline:none;border-color:var(--rzk-accent);box-shadow:0 0 0 4px rgba(139,0,0,.08)}
.rzk .rzk__quick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 18px}
.rzk button.rzk__chip--btn{border:1px solid var(--rzk-line);background:var(--rzk-soft);color:var(--rzk-ink);border-radius:999px;padding:7px 14px;font:inherit;font-size:.9rem;cursor:pointer}
.rzk button.rzk__chip--btn:hover{border-color:var(--rzk-accent);color:var(--rzk-accent)}
/* knoppen */
.rzk .rzk__btn,.rzk a.rzk__btn,.rzk button.rzk__btn{border-radius:8px;font-family:'DM Sans',sans-serif;font-weight:600;text-transform:none;letter-spacing:0}
/* resultaat */
.rzk .rzk__main{border-radius:16px;background:var(--rzk-soft);border:1px solid var(--rzk-line);align-items:center}
.rzk .rzk__main .rzk__imgwrap{max-height:360px;background:#fff;border-radius:12px}
.rzk .rzk__main .rzk__imgwrap img{max-height:360px;object-fit:contain}
.rzk .rzk__cat{font-size:.75rem;font-weight:700;letter-spacing:1.5px;color:var(--rzk-accent)}
.rzk .rzk__main .rzk__title{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2}
.rzk .rzk__amount{font-family:'DM Sans',sans-serif;font-weight:700}
.rzk .rzk__card{border-radius:14px;overflow:hidden}
.rzk .rzk__card .rzk__imgwrap{background:#fff}
.rzk .rzk__card .rzk__imgwrap img{object-fit:contain}
.rzk .rzk__title--small{font-family:'Playfair Display',Georgia,serif;font-size:1.05rem}
.rzk .rzk__note{border-radius:10px;font-size:.95rem}
.rzk .rzk__chip{font-family:'DM Sans',sans-serif}
@media (max-width:900px){.rzk .rzk__grid--pill{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.rzk .rzk__grid--pill{grid-template-columns:repeat(2,minmax(0,1fr))}.rzk .rzk__main .rzk__imgwrap,.rzk .rzk__main .rzk__imgwrap img{max-height:260px}}
