/* =========================================================================
   Pure Ink Redesign: design-laag bovenop Flatsome
   1. Tokens en fonts  2. Componenten (altijd)  3. Pagina's (.pi-page)
   4. Hele site (.pi-site)  5. Belbalk en voorbeeldlabel
   ========================================================================= */

@font-face {
	font-family: "PI Fraunces";
	src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PI Inter";
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--pi-ink: #0e0d0c;
	--pi-ink-2: #1b1917;
	--pi-ink-3: #2a2723;
	--pi-bone: #f4efe6;
	--pi-paper: #fbf8f2;
	--pi-gold: #c9a66b;
	--pi-gold-2: #ddc08f;
	--pi-gold-d: #8a6a35;
	--pi-ember: #b5452b;
	--pi-text: #1d1a17;
	--pi-muted: #5f574e;
	--pi-line: rgba(29, 26, 23, .12);
	--pi-line-dark: rgba(244, 239, 230, .14);
	--pi-display: "PI Fraunces", Georgia, "Times New Roman", serif;
	--pi-body: "PI Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pi-radius: 6px;
	--pi-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Componenten -------------------------------------------- */

.pi-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	margin: 0 0 .9em;
	font: 600 .82rem/1.2 var(--pi-body);
	letter-spacing: .08em;
	color: var(--pi-gold-d);
}
.pi-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
}
.dark .pi-eyebrow { color: var(--pi-gold); }

.pi-lead { font-size: 1.12rem; line-height: 1.65; max-width: 40em; }
.text-center .pi-lead { margin-left: auto; margin-right: auto; }

.col-inner > .button.pi-btn,
.col-inner > a.pi-btn,
.col-inner > p > .pi-btn { margin: 0 10px 12px 0; }
.col-inner.text-center > .pi-btn,
.text-center > .col-inner > .pi-btn,
.col-inner.text-center > p > .pi-btn { margin: 0 5px 12px; }
.pi-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pi-btn-row--center { justify-content: center; }
.pi-btn-row > .button,
.pi-btn-row .pi-btn { margin: 0 !important; }

a.pi-btn,
.button.pi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 52px;
	padding: 0 1.5em;
	border-radius: var(--pi-radius);
	border: 2px solid var(--pi-ink);
	background: var(--pi-ink);
	color: var(--pi-bone);
	font: 700 1.06rem/1 var(--pi-body);
	letter-spacing: .01em;
	text-transform: none;
	box-shadow: none;
	transition: transform .2s var(--pi-ease), background-color .2s, color .2s, border-color .2s;
}
a.pi-btn:hover,
.button.pi-btn:hover { transform: translateY(-2px); background: var(--pi-ink-3); border-color: var(--pi-ink-3); color: #fff; box-shadow: none; }
.button.pi-btn.is-outline { background: transparent; color: var(--pi-ink); }
.button.pi-btn.is-outline:hover { background: var(--pi-ink); color: var(--pi-bone); }

.dark .button.pi-btn:not(.pi-btn--gold):not(.is-outline) { background: var(--pi-bone); border-color: var(--pi-bone); color: var(--pi-ink); }
.dark .button.pi-btn:not(.pi-btn--gold):not(.is-outline):hover { background: #fff; border-color: #fff; }
.dark .button.pi-btn.is-outline { border-color: rgba(244, 239, 230, .55); color: var(--pi-bone); }
.dark .button.pi-btn.is-outline:hover { border-color: var(--pi-bone); background: var(--pi-bone); color: var(--pi-ink); }

a.pi-btn.pi-btn--gold,
.button.pi-btn--gold { background: var(--pi-gold); border-color: var(--pi-gold); color: var(--pi-ink); }
a.pi-btn.pi-btn--gold:hover,
.button.pi-btn--gold:hover { background: var(--pi-gold-2); border-color: var(--pi-gold-2); color: var(--pi-ink); }
.pi-btn__icon { width: 18px; height: 18px; fill: currentColor; flex: none; }

.pi-link {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font: 600 1rem/1.3 var(--pi-body);
	color: var(--pi-text);
	text-decoration: underline;
	text-decoration-color: var(--pi-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.pi-link:hover { color: var(--pi-gold-d); }

.pi-checks { list-style: none; margin: 1.2em 0; padding: 0; }
.pi-checks li { position: relative; margin: 0 0 .55em; padding-left: 1.9em; }
.pi-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: var(--pi-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230e0d0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* Promotievideo ("reel") */
.pi-promo--phone { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pi-reel { position: relative; margin: 0; width: min(330px, 100%); }
.pi-reel__frame {
	position: relative;
	aspect-ratio: 464 / 832;
	border-radius: 26px;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(201, 166, 107, .45);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .75), 0 0 0 8px rgba(244, 239, 230, .04);
}
.pi-reel__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pi-reel__badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--pi-gold);
	color: var(--pi-ink);
	font: 800 1.35rem/1 var(--pi-display);
	transform: rotate(-12deg);
	box-shadow: 0 0 0 3px var(--pi-ink), 0 0 0 4px var(--pi-gold);
}
.pi-reel__controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.pi-reel__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: rgba(14, 13, 12, .62);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.pi-reel__btn:hover { background: rgba(14, 13, 12, .85); }
.pi-reel__btn:focus-visible { outline: 3px solid var(--pi-gold); outline-offset: 2px; }
.pi-reel__btn svg { width: 20px; height: 20px; fill: currentColor; }
.pi-reel__play[aria-pressed="true"] .pi-i-play,
.pi-reel__play[aria-pressed="false"] .pi-i-pause,
.pi-reel__sound[aria-pressed="true"] .pi-i-muted,
.pi-reel__sound[aria-pressed="false"] .pi-i-sound { display: none; }
.pi-reel__sound svg { fill: none; }

.pi-promo__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 18px;
	border: 1px solid var(--pi-line-dark);
	border-radius: var(--pi-radius);
	color: var(--pi-bone);
	text-align: center;
	font: 400 .92rem/1.35 var(--pi-body);
}
.pi-promo__caption strong { font: 600 1.05rem/1.3 var(--pi-display); color: var(--pi-gold); }
.pi-promo__caption:hover { border-color: var(--pi-gold); color: #fff; }
:not(.dark) > .pi-promo--phone .pi-promo__caption { color: var(--pi-text); border-color: var(--pi-line); }
.dark .pi-promo--phone .pi-promo__caption { color: var(--pi-bone); border-color: var(--pi-line-dark); }

.pi-reel-fallback img { width: 100%; border-radius: 18px; aspect-ratio: 4 / 5; object-fit: cover; }

/* Volledige actie (actiepagina) */
.pi-promo--full {
	display: grid;
	grid-template-columns: minmax(240px, 360px) 1fr;
	gap: clamp(28px, 6vw, 80px);
	align-items: center;
	color: var(--pi-bone);
}
.pi-promo--full .pi-reel { width: 100%; }
.pi-promo__title {
	margin: 0 0 .5em;
	font: 600 clamp(2.1rem, 4.4vw, 3.6rem)/1.04 var(--pi-display);
	letter-spacing: -.02em;
	color: var(--pi-bone);
	text-transform: none;
}
.pi-promo--full p { font-size: 1.06rem; line-height: 1.7; color: rgba(244, 239, 230, .86); }
.pi-promo--full .pi-checks li { color: var(--pi-bone); }
.pi-promo__valid { display: inline-block; padding: 6px 12px; border-left: 3px solid var(--pi-gold); background: rgba(201, 166, 107, .1); color: var(--pi-bone) !important; font-weight: 600; }
.pi-promo__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.pi-promo__ctas .button { margin: 0; }
.pi-promo__note { font-size: .92rem !important; color: rgba(244, 239, 230, .62) !important; }
.pi-promo--expired { grid-template-columns: 1fr; max-width: 760px; }

/* USP-strook */
.pi-usp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pi-line-dark);
}
.pi-usp li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 22px 20px;
	color: var(--pi-bone);
	font: 500 .98rem/1.35 var(--pi-body);
}
.pi-usp li + li { border-left: 1px solid var(--pi-line-dark); }
.pi-usp svg { flex: none; width: 18px; height: 18px; fill: var(--pi-gold); }

/* Stijlen */
.pi-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 28px; }
.pi-head-row h2 { margin: 0; }
.pi-head-row p { margin: 0; }
.pi-styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pi-style {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 4 / 5;
	background: var(--pi-ink-2);
	color: #fff;
}
.pi-style__img,
.pi-style__img img { display: block; width: 100%; height: 100%; }
.pi-style__img img { object-fit: cover; transition: transform .6s var(--pi-ease), filter .6s; filter: saturate(.92); }
.pi-style::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(14, 13, 12, .88)); }
.pi-style__label {
	position: absolute;
	z-index: 1;
	left: 18px;
	right: 18px;
	bottom: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font: 600 1.3rem/1.15 var(--pi-display);
}
.pi-style__label svg { width: 22px; height: 22px; transition: transform .3s var(--pi-ease); }
.pi-style:hover { color: #fff; }
.pi-style:hover img { transform: scale(1.05); filter: saturate(1.05); }
.pi-style:hover .pi-style__label svg { transform: translateX(4px); }
.pi-style:focus-visible { outline: 3px solid var(--pi-gold); outline-offset: 3px; }

/* Studio's */
.pi-studios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 28px; }
.pi-studio {
	display: grid;
	grid-template-columns: 42% 1fr;
	overflow: hidden;
	border: 1px solid var(--pi-line);
	border-radius: 14px;
	background: var(--pi-paper);
}
.pi-studio__img img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.pi-studio__body { padding: 26px 24px; }
.pi-studio h3 { margin: 0 0 .25em; font: 600 1.45rem/1.15 var(--pi-display); color: var(--pi-text); }
.pi-studio__sub { margin: 0 0 1em; color: var(--pi-muted); }
.pi-studio__meta { margin: 0 0 1.1em; line-height: 1.7; }
.pi-studio__meta a { color: var(--pi-text); font-weight: 600; }

/* ---------- 3. Beheerde pagina's (.pi-page) --------------------------- */

.pi-page,
.pi-page .section { font-family: var(--pi-body); }
.pi-page h1, .pi-page h2, .pi-page h3,
.pi-page .pi-section h2 { font-family: var(--pi-display); letter-spacing: -.015em; text-transform: none; }
.pi-page .pi-section h2,
.pi-page .pi-cta-band h2 { font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.1; color: var(--pi-text); margin-bottom: .55em; }
.pi-page .pi-cta-band h2 { color: var(--pi-bone); }
.pi-page .pi-section p { color: #36312c; font-size: 1.04rem; line-height: 1.75; }
.pi-page .pi-section p a:not(.pi-link):not(.button) { color: var(--pi-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pi-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.pi-page .pi-hero h1 {
	margin: 0 0 .35em;
	font: 600 clamp(2.6rem, 6vw, 4.8rem)/.98 var(--pi-display);
	letter-spacing: -.025em;
	color: var(--pi-bone);
}
.pi-page .pi-hero .pi-lead { color: rgba(244, 239, 230, .86); }
.pi-page .pi-hero .section-bg { background-position: 27% 48%; }
.pi-page .pi-hero .section-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 85% 40%, rgba(201, 166, 107, .16), transparent 55%);
	pointer-events: none;
}
.pi-page .pi-hero__media .col-inner { display: flex; justify-content: center; }
.pi-page .pi-reviews { margin-top: 6px; }

.pi-page .pi-section--tight { padding-bottom: 0 !important; }
.pi-page .pi-video-col .video,
.pi-page .pi-video-col iframe { border-radius: 14px; overflow: hidden; }
.pi-page .pi-video-col .video { box-shadow: 0 24px 50px -24px rgba(14, 13, 12, .5); }
.pi-page .pi-cta-band .pi-lead { margin: 0 auto 1.4em; color: rgba(244, 239, 230, .8); }
.pi-page .pi-promo-section .section-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 80% at 20% 50%, rgba(181, 69, 43, .22), transparent 60%);
	pointer-events: none;
}

/* ---------- 4. Hele site (.pi-site) ----------------------------------- */

.pi-site { font-family: var(--pi-body); }
.pi-site h1, .pi-site h2, .pi-site h3, .pi-site h4 { font-family: var(--pi-display); letter-spacing: -.01em; }
.pi-site .nav > li > a,
.pi-site .header-nav > li > a { font-family: var(--pi-body); font-weight: 600; letter-spacing: .03em; }
.pi-site .button:not(.pi-btn):not(.icon):not(.pi-reel__btn) { border-radius: var(--pi-radius); font-family: var(--pi-body); font-weight: 700; letter-spacing: .01em; }
.pi-site .accordion-title,
.pi-site .tabbed-content .nav > li > a { font-family: var(--pi-body); }

/* ---------- 5. Belbalk en voorbeeldlabel ------------------------------ */

.pi-callbar { display: none; }
@media (max-width: 849px) {
	.pi-callbar {
		position: fixed;
		z-index: 9990;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(14, 13, 12, .96);
		border-top: 1px solid var(--pi-line-dark);
	}
	.pi-callbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		border-radius: var(--pi-radius);
		font: 700 1.02rem/1 var(--pi-body);
	}
	.pi-callbar__call { flex: 1; background: var(--pi-gold); color: var(--pi-ink); }
	.pi-callbar__call svg { width: 18px; height: 18px; fill: currentColor; }
	.pi-callbar__promo { padding: 0 16px; border: 1px solid var(--pi-gold); color: var(--pi-gold); }
	.pi-callbar a:hover { color: var(--pi-ink); }
	.pi-callbar__promo:hover { color: var(--pi-gold-2); }
	body:has(.pi-callbar) { padding-bottom: 72px; }
	body:has(.pi-callbar) .back-to-top { bottom: 84px; }
}

.pi-preview-flag {
	position: fixed;
	z-index: 99999;
	top: 46px;
	right: 12px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--pi-ember);
	color: #fff;
	font: 600 .85rem/1 var(--pi-body);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

/* ---------- Responsive ------------------------------------------------ */

@media (max-width: 849px) {
	.pi-usp { grid-template-columns: repeat(2, 1fr); }
	.pi-usp li { padding: 16px 12px; font-size: .92rem; }
	.pi-usp li:nth-child(3) { border-left: 0; }
	.pi-usp li:nth-child(n+3) { border-top: 1px solid var(--pi-line-dark); }
	.pi-styles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.pi-style__label { left: 12px; right: 12px; bottom: 12px; font-size: 1.08rem; }
	.pi-studios { grid-template-columns: 1fr; }
	.pi-promo--full { grid-template-columns: 1fr; }
	.pi-promo--full .pi-promo__media { display: flex; justify-content: center; }
	.pi-promo--full .pi-reel { width: min(300px, 82vw); }
	.pi-page .pi-hero__media { margin-top: 28px; }
	.pi-reel { width: min(290px, 78vw); }
}
@media (max-width: 549px) {
	.pi-studio { grid-template-columns: 1fr; }
	.pi-studio__img img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
	.pi-btn-row { flex-direction: column; align-items: stretch; }
	.pi-btn-row .button.pi-btn,
	.pi-page .col-inner > .pi-btn,
	.pi-page .col-inner > p > .pi-btn { display: flex; width: 100%; margin: 0 0 10px !important; }
	.pi-reel__badge { width: 62px; height: 62px; font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pi-style__img img, .pi-btn, .pi-style__label svg { transition: none; }
}

/* ---------- 6. Afspraakformulier ------------------------------------- */

.pi-form-wrap { scroll-margin-top: 90px; }
.pi-form,
.pi-form-done {
	padding: clamp(22px, 4vw, 40px);
	border: 1px solid var(--pi-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 30px 60px -40px rgba(14, 13, 12, .45);
	color: var(--pi-text);
	font-family: var(--pi-body);
}
.pi-form__title,
.pi-form-done h2 { margin: 0 0 .3em; font: 600 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--pi-display); color: var(--pi-text); }
.pi-form__intro { margin: 0 0 1.2em; color: var(--pi-muted); }
.pi-steps { display: none; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: none; }
.pi-form.is-js .pi-steps { display: flex; }
.pi-steps li { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 10px; border-top: 3px solid var(--pi-line); color: var(--pi-muted); font-size: .9rem; font-weight: 600; }
.pi-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pi-bone); font-size: .8rem; }
.pi-steps li.is-active { border-color: var(--pi-gold); color: var(--pi-text); }
.pi-steps li.is-active span { background: var(--pi-gold); color: var(--pi-ink); }
.pi-steps li.is-done { border-color: var(--pi-ink); color: var(--pi-text); }
.pi-steps li.is-done span { background: var(--pi-ink); color: #fff; }

.pi-step { margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.pi-step[hidden] { display: none; }
.pi-step__legend { margin: 0 0 14px; padding: 0; font: 600 1.15rem/1.3 var(--pi-display); color: var(--pi-text); }
.pi-form.is-js .pi-step__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pi-step__intro { margin-bottom: 14px !important; }
.pi-step__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 22px; }
.pi-step__nav .button { margin: 0 !important; }
.pi-step__nav .pi-next:only-child,
.pi-step__nav .pi-next { margin-left: auto !important; }
.pi-form:not(.is-js) .pi-step__nav .pi-next,
.pi-form:not(.is-js) .pi-step__nav .pi-prev { display: none; }
.pi-form:not(.is-js) .pi-step + .pi-step { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--pi-line); }

.pi-field { margin: 0 0 18px; }
.pi-field__label { display: block; margin: 0 0 6px; font-weight: 600; font-size: .98rem; color: var(--pi-text); }
.pi-field__label abbr,
.pi-check abbr { color: var(--pi-ember); text-decoration: none; border: 0; }
.pi-field__help { margin: 6px 0 0; color: var(--pi-muted); font-size: .9rem; line-height: 1.5; }
.pi-field__help a { color: var(--pi-text); text-decoration: underline; }
.pi-field__err { margin: 6px 0 0; color: #a12a12; font-size: .92rem; font-weight: 600; }
.pi-form input[type=text],
.pi-form input[type=tel],
.pi-form input[type=email],
.pi-form input[type=date],
.pi-form select,
.pi-form textarea {
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 10px 14px;
	border: 1.5px solid #cfc7bb;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--pi-text);
	font: 400 16px/1.4 var(--pi-body); /* 16px voorkomt inzoomen op iOS */
}
.pi-form textarea { min-height: 120px; resize: vertical; }
.pi-form input:focus,
.pi-form select:focus,
.pi-form textarea:focus { outline: none; border-color: var(--pi-ink); box-shadow: 0 0 0 3px rgba(201, 166, 107, .45); }
.pi-form [aria-invalid="true"] { border-color: #a12a12 !important; }
.pi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pi-date-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 12px; }

.pi-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-choice { position: relative; margin: 0; cursor: pointer; }
.pi-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pi-choice span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	border: 1.5px solid #cfc7bb;
	border-radius: 8px;
	background: #fff;
	font-weight: 500;
	color: var(--pi-text);
	transition: border-color .15s, background-color .15s;
}
.pi-choice input:checked + span { border-color: var(--pi-ink); background: var(--pi-ink); color: #fff; }
.pi-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(201, 166, 107, .6); }
.pi-choices--cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.pi-choices--cards .pi-choice span { width: 100%; justify-content: center; text-align: center; min-height: 54px; }

.pi-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 6px; font-weight: 400; cursor: pointer; }
.pi-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pi-ink); }
.pi-check a { color: var(--pi-text); text-decoration: underline; }

.pi-file { padding: 12px; width: 100%; border: 1.5px dashed #cfc7bb; border-radius: 8px; background: var(--pi-paper); font-size: .95rem; }
.pi-file-list { margin: 8px 0 0; padding-left: 18px; font-size: .9rem; color: var(--pi-muted); }
.pi-file-list:empty { display: none; }

.pi-form__alert { margin: 0 0 18px; padding: 12px 14px; border-left: 4px solid #a12a12; background: #fbecea; color: #6e1d0e; font-weight: 600; border-radius: 4px; }
.pi-form__alert[hidden] { display: none; }
.pi-form__promo { margin: 4px 0 10px; padding: 10px 12px; border-left: 3px solid var(--pi-gold); background: rgba(201, 166, 107, .14); font-weight: 600; font-size: .95rem; }
.pi-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pi-submit.is-loading { opacity: .7; pointer-events: none; }
.pi-submit.is-loading span::after { content: " ..."; }

/* Tattoo-velden verbergen bij vraag; labels wisselen. */
.pi-only-other { display: none; }
.pi-form.is-not-tattoo .pi-only-tattoo { display: none; }
.pi-form.is-not-tattoo .pi-only-other { display: inline; }
.pi-form.is-question .pi-hide-question { display: none; }

.pi-form-done { text-align: left; }
.pi-form-done[hidden] { display: none; }
.pi-form-done::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--pi-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230e0d0c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/60% no-repeat;
}
.pi-form-done a { color: var(--pi-text); font-weight: 700; }

/* ---------- 7. Openingstijden, kaarten, FAQ, gerelateerd -------------- */

.pi-hours { margin: 18px 0; }
.pi-hours__status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 600; }
.pi-hours__status[hidden] { display: none; }
.pi-hours__status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #9a9a9a; }
.pi-hours__status.is-open::before { background: #2f9e44; box-shadow: 0 0 0 4px rgba(47, 158, 68, .2); }
.pi-hours__status.is-closed::before { background: var(--pi-ember); }
.pi-hours__table { width: 100%; margin: 0; border-collapse: collapse; font-size: .96rem; }
.pi-hours__table th,
.pi-hours__table td { padding: 7px 0; border: 0; border-bottom: 1px solid var(--pi-line); text-align: left; font-weight: 400; text-transform: none; letter-spacing: 0; color: inherit; }
.pi-hours__table td { text-align: right; }
.pi-hours__table tr.is-today th,
.pi-hours__table tr.is-today td { font-weight: 700; }
.pi-card--dark .pi-hours__table th,
.pi-card--dark .pi-hours__table td { border-color: var(--pi-line-dark); }

.pi-card { margin: 0 0 18px; padding: 26px; border: 1px solid var(--pi-line); border-radius: 16px; background: var(--pi-paper); color: var(--pi-text); }
.pi-card h2, .pi-card h3 { margin: 0 0 .35em; font-family: var(--pi-display); color: inherit; }
.pi-card h2 { font-size: 1.6rem !important; }
.pi-card p { font-size: 1rem; }
.pi-card a:not(.button):not(.pi-link) { color: inherit; font-weight: 600; }
.pi-card--dark { background: var(--pi-ink); border-color: var(--pi-ink); color: var(--pi-bone); }
.pi-card--dark h2 { color: var(--pi-bone) !important; }
.pi-card--dark p { color: rgba(244, 239, 230, .85) !important; }
.pi-card--dark .pi-eyebrow { color: var(--pi-gold); }
.pi-card--dark .pi-btn--gold { margin: 4px 0 6px !important; width: 100%; }
.pi-card__meta { margin: 14px 0 0; line-height: 1.6; }
.pi-link--light { color: var(--pi-gold) !important; }
.pi-facts ul { margin: 0; padding-left: 1.1em; }
.pi-facts li { margin-bottom: .35em; }

.pi-faq { margin: 0 0 10px; border: 1px solid var(--pi-line); border-radius: 10px; background: #fff; }
.pi-faq summary { position: relative; padding: 16px 48px 16px 18px; cursor: pointer; list-style: none; font-weight: 600; color: var(--pi-text); }
.pi-faq summary::-webkit-details-marker { display: none; }
.pi-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--pi-body); color: var(--pi-gold-d); }
.pi-faq[open] summary::after { content: "–"; }
.pi-faq summary:focus-visible { outline: 3px solid var(--pi-gold); outline-offset: 2px; border-radius: 10px; }
.pi-faq p { margin: 0; padding: 0 18px 16px; }

.pi-steps-list { margin: 0 0 1.3em; padding-left: 1.2em; }
.pi-steps-list li { margin-bottom: .6em; line-height: 1.65; }

.pi-related { margin: 0; padding: 48px 15px; background: var(--pi-ink); color: var(--pi-bone); font-family: var(--pi-body); }
.pi-related__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; max-width: 1180px; margin: 0 auto; align-items: center; }
.pi-related__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pi-related__list li { margin: 0; }
.pi-related__list a { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 16px; border: 1px solid var(--pi-line-dark); border-radius: 999px; color: var(--pi-bone); font-weight: 500; }
.pi-related__list a:hover { border-color: var(--pi-gold); color: var(--pi-gold); }
.pi-related__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pi-related__title { margin: 0; font: 600 1.6rem/1.15 var(--pi-display); color: var(--pi-bone); }
.pi-related .pi-btn { margin: 0 !important; }

.pi-page .pi-hero--compact h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.pi-page .pi-section h2 { margin-top: .4em; }
.pi-page .pi-section--faq { padding-top: 64px !important; padding-bottom: 72px !important; }
.pi-contact__aside .col-inner { position: sticky; top: 110px; }

@media (max-width: 849px) {
	.pi-related__inner { grid-template-columns: 1fr; }
	.pi-contact__aside .col-inner { position: static; }
}
@media (max-width: 549px) {
	.pi-grid { grid-template-columns: 1fr; }
	.pi-choices--cards { grid-template-columns: 1fr; }
	.pi-date-row { grid-template-columns: 1.3fr 1fr; }
	.pi-step__nav { flex-direction: column-reverse; }
	.pi-step__nav .button { width: 100%; }
	.pi-steps li { font-size: 0; gap: 0; justify-content: center; }
	.pi-steps li span { font-size: .8rem; }
}
.pi-page .pi-card--dark p a:not(.pi-link):not(.button),
.pi-card--dark a:not(.button):not(.pi-link) { color: var(--pi-bone) !important; text-decoration-color: var(--pi-gold); }
.pi-page .pi-section li { color: #36312c; font-size: 1.02rem; line-height: 1.65; }
.pi-page .pi-section li a:not(.button),
.pi-page .pi-faq a { color: var(--pi-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pi-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pi-page .pi-section li strong { color: var(--pi-text); }

/* ---------- 8. Header: conversiebalk + menuknop ---------------------- */

.pi-topbar { position: relative; z-index: 31; background: var(--pi-ink); color: var(--pi-bone); font: 500 .88rem/1.3 var(--pi-body); }
.pi-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1240px; min-height: 44px; margin: 0 auto; padding: 0 15px; }
.pi-topbar__info { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pi-topbar__info > span { white-space: nowrap; }
.pi-topbar__addr,
.pi-topbar__usp { color: rgba(244, 239, 230, .72); }
.pi-topbar .pi-hours { margin: 0; }
.pi-topbar .pi-hours__status { margin: 0; font-weight: 600; color: var(--pi-bone); }
.pi-topbar__actions { display: flex; align-items: center; gap: 14px; }
.pi-topbar__call { display: inline-flex; align-items: center; gap: 8px; color: var(--pi-bone) !important; font-weight: 600; }
.pi-topbar__call svg { width: 16px; height: 16px; fill: var(--pi-gold); }
.pi-topbar__call:hover { color: var(--pi-gold) !important; }
.pi-topbar__call-label { display: none; }
.pi-topbar__cta { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--pi-radius); background: var(--pi-gold); color: var(--pi-ink) !important; font-weight: 700; }
.pi-topbar__cta:hover { background: var(--pi-gold-2); }
.pi-topbar__lang { display: flex; align-items: center; }
.pi-topbar__lang .trp-language-switcher { position: relative; width: auto !important; }
.pi-topbar__lang .trp-language-switcher > div { padding: 4px 8px !important; border: 1px solid var(--pi-line-dark) !important; border-radius: 6px !important; background: transparent !important; }
.pi-topbar__lang a,
.pi-topbar__lang .trp-ls-shortcode-current-language a { color: var(--pi-bone) !important; font-size: .82rem !important; }
.pi-topbar__lang .trp-ls-shortcode-language { background: var(--pi-ink) !important; border-color: var(--pi-line-dark) !important; }
.pi-has-topbar #trp-floater-ls,
.pi-no-floater #trp-floater-ls { display: none !important; }

/* Knop in het menu */
.header-nav .pi-nav-cta > a,
.nav .pi-nav-cta > a.nav-top-link {
	padding: 0 18px !important;
	margin-left: 6px;
	border-radius: var(--pi-radius);
	background: var(--pi-ink);
	color: #fff !important;
	line-height: 40px !important;
	min-height: 40px;
	font-weight: 700;
	letter-spacing: .02em;
}
.header-nav .pi-nav-cta > a:hover { background: var(--pi-gold); color: var(--pi-ink) !important; }
.nav-dark .pi-nav-cta > a,
.dark .header-nav .pi-nav-cta > a { background: var(--pi-gold); color: var(--pi-ink) !important; }
.off-canvas .pi-nav-cta > a,
.mobile-sidebar .pi-nav-cta > a { display: block; margin: 12px 15px 6px; padding: 12px 16px !important; border-radius: var(--pi-radius); background: var(--pi-gold); color: var(--pi-ink) !important; text-align: center; font-weight: 700; }
.off-canvas .pi-nav-call > a,
.mobile-sidebar .pi-nav-call > a { display: block; margin: 0 15px 12px; padding: 12px 16px !important; border: 1px solid currentColor; border-radius: var(--pi-radius); text-align: center; font-weight: 700; }

@media (max-width: 1100px) {
	.pi-topbar__usp { display: none; }
}
@media (max-width: 849px) {
	.pi-topbar__inner { padding: 8px 12px; gap: 8px; }
	.pi-topbar__info { display: none; }
	.pi-topbar__actions { width: 100%; gap: 8px; }
	.pi-topbar__lang { order: 3; }
	.pi-topbar__call,
	.pi-topbar__cta { flex: 1; justify-content: center; min-height: 40px; border-radius: var(--pi-radius); }
	.pi-topbar__call { border: 1px solid rgba(244, 239, 230, .35); }
	.pi-topbar__call-label { display: inline; }
	.pi-topbar__call-nr { display: none; }
	.header-nav .pi-nav-cta { display: none; }
	/* Belbalk onderin pas na scrollen. */
	.pi-callbar { transform: translateY(110%); transition: transform .25s var(--pi-ease); }
	.pi-callbar.is-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pi-callbar { transition: none; } }

/* ---------- 9. Contactpagina: uitlijning formulier -------------------- */

.pi-contact__row { align-items: flex-start; }
.pi-contact__form .col-inner,
.pi-contact__aside .col-inner { height: 100%; }
.pi-contact__aside > .col-inner {
	padding: 28px;
	border-radius: 16px;
	background: var(--pi-ink);
	color: var(--pi-bone);
}
.pi-contact__aside > .col-inner h2 { margin: 0 0 .3em; font: 600 1.7rem/1.15 var(--pi-display); color: var(--pi-bone) !important; }
.pi-contact__aside > .col-inner p { color: rgba(244, 239, 230, .85) !important; }
.pi-contact__aside > .col-inner a:not(.button):not(.pi-link) { color: var(--pi-bone) !important; text-decoration: underline; text-decoration-color: var(--pi-gold); }
.pi-contact__aside > .col-inner .pi-btn--gold { width: 100%; margin: 4px 0 8px !important; }
.pi-contact__aside > .col-inner .pi-hours__table th,
.pi-contact__aside > .col-inner .pi-hours__table td { border-color: var(--pi-line-dark); color: var(--pi-bone); }
.pi-contact__aside > .col-inner .pi-eyebrow { color: var(--pi-gold); }
@media (min-width: 850px) {
	.pi-contact__aside > .col-inner { position: sticky; top: 24px; }
}

/* Formulier: strak raster */
.pi-form .pi-field { display: flex; flex-direction: column; }
.pi-form .pi-choices:not(.pi-choices--cards) { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pi-form .pi-choices:not(.pi-choices--cards) .pi-choice span { width: 100%; justify-content: center; text-align: center; }
.pi-form [aria-labelledby="pi-l-leeftijd"] .pi-choices { grid-template-columns: 1fr; }
.pi-form [aria-labelledby="pi-l-leeftijd"] .pi-choice span { justify-content: flex-start; text-align: left; }
.pi-form .pi-grid { align-items: start; }
.pi-form .pi-date-row { align-items: end; }
.pi-form .pi-date-row .pi-field { margin-bottom: 12px; }
.pi-form .pi-check { align-items: flex-start; }
.pi-form .pi-check span { line-height: 1.5; }

/* Studio (enkel, breed) */
.pi-studio--wide { grid-template-columns: 1fr 1fr; margin-top: 24px; }
.pi-studio--wide .pi-studio__img img { min-height: 100%; }
.pi-studio--wide .pi-hours { margin: 6px 0 16px; }
.pi-studio__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.pi-studio__actions .button { margin: 0 !important; }
@media (max-width: 849px) { .pi-studio--wide { grid-template-columns: 1fr; } .pi-studio--wide .pi-studio__img img { aspect-ratio: 16 / 10; height: auto; } }

/* Artikelpagina's */
.pi-article .pi-facts { margin-bottom: 28px; }
.pi-note { padding: 10px 14px; border-left: 3px solid var(--pi-gold); background: rgba(201, 166, 107, .12); font-size: .95rem !important; }
.pi-table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
.pi-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 1rem; }
.pi-table caption { padding: 0 0 8px; text-align: left; font-weight: 600; color: var(--pi-text); }
.pi-table th, .pi-table td { padding: 12px 16px; border-bottom: 1px solid var(--pi-line); text-align: left; color: var(--pi-text); text-transform: none; letter-spacing: 0; }
.pi-table thead th { background: var(--pi-ink); color: var(--pi-bone); font-weight: 600; }
.pi-steps-list--big li { padding-left: 4px; margin-bottom: .8em; }
.pi-gallery-row .col { padding-bottom: 20px; }
.pi-gallery-row img,
.pi-img img { width: 100%; border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; }
.pi-gallery-row h2 { font-family: var(--pi-display); font-size: 1.5rem; color: var(--pi-text); }

/* Artiest-galerij */
.pi-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pi-gallery li { margin: 0; }
.pi-gallery a { display: block; overflow: hidden; border-radius: 10px; background: var(--pi-ink-2); }
.pi-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s var(--pi-ease); }
.pi-gallery a:hover img { transform: scale(1.04); }
.pi-artist-hero { display: flex; align-items: center; gap: 24px; }
.pi-artist-hero__img img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pi-gold); }
@media (max-width: 849px) { .pi-gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (max-width: 549px) { .pi-gallery { grid-template-columns: repeat(2, 1fr); } .pi-artist-hero { flex-direction: column; align-items: flex-start; } .pi-artist-hero__img img { width: 88px; height: 88px; } }

/* ---------- 10. Footer ------------------------------------------------ */
.pi-footer { font-family: var(--pi-body); color: rgba(244, 239, 230, .82); }
.pi-footer .pi-footer__title { margin: 0 0 .4em; font: 600 1.6rem/1.15 var(--pi-display); color: var(--pi-bone); }
.pi-footer .pi-footer__h { margin: 0 0 .8em; font: 600 1.05rem/1.2 var(--pi-body); letter-spacing: .02em; color: var(--pi-gold); }
.pi-footer p { color: rgba(244, 239, 230, .82); font-size: .98rem; }
.pi-footer a { color: var(--pi-bone); }
.pi-footer a:hover { color: var(--pi-gold); }
.pi-footer__links { margin: 0; padding: 0; list-style: none; }
.pi-footer__links li { margin: 0 0 .55em; }
.pi-footer .pi-hours__table th,
.pi-footer .pi-hours__table td { border-color: var(--pi-line-dark); color: rgba(244, 239, 230, .85); font-size: .92rem; padding: 5px 0; }
.pi-footer .pi-btn { margin: 4px 0 16px !important; }
.pi-footer__legal { margin-top: 18px; font-size: .88rem !important; }

/* v1.2 correcties */
.pi-contact__aside .col-inner { height: auto !important; }
.header-nav .pi-nav-cta > a,
.nav .pi-nav-cta > a.nav-top-link { display: inline-flex !important; align-items: center; height: 40px; line-height: 1 !important; text-transform: none; font-size: .95rem; }
@media (min-width: 850px) { .pi-topbar__cta { display: none; } }
.pi-artist-hero h1 { margin: 0 0 .3em; font: 600 clamp(2.1rem, 4.5vw, 3.4rem)/1.02 var(--pi-display); color: var(--pi-bone); letter-spacing: -.02em; }
.pi-artist-hero .pi-lead { color: rgba(244, 239, 230, .85); }
.pi-artist-hero .pi-btn-row { margin-top: 18px; }
.pi-section h2 { font-family: var(--pi-display); color: var(--pi-text); letter-spacing: -.015em; }

/* ---------- 11. Header-elementen voor Flatsome Header Builder --------- */
/* Neutraal: erven kleur en hoogte van de Flatsome-header (licht of donker). */
.pi-h { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; font-family: var(--pi-body); line-height: 1.2; white-space: nowrap; }
.pi-h svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.pi-h-info { gap: 14px; font-size: .85rem; }
.pi-h-info .pi-hours { margin: 0; }
.pi-h-info .pi-hours__status { margin: 0; font-weight: 600; }
.pi-h-info .pi-hours__status::before { width: 8px; height: 8px; }
.pi-h-addr { opacity: .75; }
a.pi-h-call { color: inherit; font-weight: 600; font-size: .9rem; }
a.pi-h-call:hover { opacity: .8; color: inherit; }
a.pi-h-call svg { fill: var(--pi-gold); }
a.pi-h-cta {
	min-height: 38px;
	padding: 0 16px;
	border-radius: var(--pi-radius);
	background: var(--pi-gold);
	color: var(--pi-ink) !important;
	font-weight: 700;
	font-size: .92rem;
	letter-spacing: .01em;
	text-transform: none;
}
a.pi-h-cta:hover { background: var(--pi-gold-2); color: var(--pi-ink) !important; }
a.pi-h-callicon {
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--pi-gold);
	color: var(--pi-ink) !important;
}
a.pi-h-callicon svg { width: 18px; height: 18px; }
.pi-h-mobile { display: flex; width: 100%; gap: 8px; }
.pi-h-mobile a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: var(--pi-radius); font-weight: 700; font-size: .88rem; }
.pi-h-mobile .pi-h-mcall { border: 1px solid currentColor; color: inherit; }
.pi-h-mobile .pi-h-mcta { background: var(--pi-gold); color: var(--pi-ink) !important; }
/* In Flatsome-headers: html-elementen niet laten afbreken */
.header-nav .html .pi-h,
.header-nav .header-block .pi-h { margin: 0; }
@media (max-width: 1100px) { .pi-h-addr { display: none; } }
a.pi-h-cta { text-transform: none !important; }
@media (max-width: 849px) { .pi-callbar { background: var(--pi-ink); } }

/* ---------- 12. Google reviews (Trustindex) -------------------------- */
.pi-reviews-band { padding: 48px 15px; background: var(--pi-bone); font-family: var(--pi-body); }
.pi-section .pi-reviews-band { padding: 8px 0 48px; background: transparent; }
.pi-reviews-band__inner { max-width: 1180px; margin: 0 auto; }
.pi-reviews-band__title { margin: 0 0 18px; font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.15 var(--pi-display); color: var(--pi-text); }
.pi-reviews-band__widget { min-height: 120px; }

/* =========================================================================
   13. Eigen header (vervangt Flatsome-header)
   ========================================================================= */

.pi-own-header #header,
.pi-own-header .header-wrapper,
.pi-own-header #top-bar,
.pi-own-header .pi-topbar,
.pi-own-header .header-main + .header-bottom { display: none !important; }

.pi-skip { position: absolute; left: 12px; top: -60px; z-index: 100000; padding: 10px 16px; border-radius: 8px; background: var(--pi-gold); color: var(--pi-ink) !important; font: 700 .95rem/1 var(--pi-body); }
.pi-skip:focus { top: 12px; }

.pi-ic { width: 18px; height: 18px; flex: none; fill: currentColor; }
.pi-ic--chev,
.pi-ic--menu,
.pi-ic--close { fill: none; }

/* Infobalk */
.pi-util { background: var(--pi-ink); color: rgba(244, 239, 230, .82); font: 500 .84rem/1.2 var(--pi-body); }
.pi-util__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1280px; height: 38px; margin: 0 auto; padding: 0 28px; }
.pi-util__left,
.pi-util__right { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pi-util .pi-hours { margin: 0; }
.pi-util .pi-hours__status { margin: 0; color: var(--pi-bone); font-weight: 600; }
.pi-util .pi-hours__status::before { width: 8px; height: 8px; }
.pi-util__sep { width: 1px; height: 14px; background: rgba(244, 239, 230, .2); }
.pi-util__addr { display: inline-flex; align-items: center; gap: 6px; color: inherit !important; }
.pi-util__addr:hover { color: var(--pi-bone) !important; }
.pi-util__addr .pi-ic { width: 14px; height: 14px; fill: var(--pi-gold); }
.pi-util__usp { color: rgba(244, 239, 230, .62); }
.pi-util__lang .trp-language-switcher { width: auto !important; }
.pi-util__lang .trp-language-switcher > div { padding: 3px 8px !important; border: 1px solid rgba(244, 239, 230, .22) !important; border-radius: 6px !important; background: transparent !important; }
.pi-util__lang a,
.pi-drawer__lang a { color: var(--pi-bone) !important; font-size: .8rem !important; }
.pi-util__lang .trp-ls-shortcode-language,
.pi-drawer__lang .trp-ls-shortcode-language { background: var(--pi-ink) !important; border-color: rgba(244, 239, 230, .22) !important; }

/* Hoofdbalk */
.pi-hdr {
	--hdr-bg: #fff;
	--hdr-fg: var(--pi-ink);
	--hdr-muted: #6f675e;
	--hdr-line: rgba(14, 13, 12, .08);
	--hdr-hover: rgba(14, 13, 12, .05);
	position: relative;
	z-index: 9980;
	background: var(--hdr-bg);
	color: var(--hdr-fg);
	border-bottom: 1px solid var(--hdr-line);
	font-family: var(--pi-body);
	transition: box-shadow .25s var(--pi-ease), background-color .25s;
}
.pi-hdr-theme-dark .pi-hdr {
	--hdr-bg: var(--pi-ink);
	--hdr-fg: var(--pi-bone);
	--hdr-muted: rgba(244, 239, 230, .65);
	--hdr-line: rgba(244, 239, 230, .1);
	--hdr-hover: rgba(244, 239, 230, .07);
}
.pi-hdr.is-stuck { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 10px 30px -18px rgba(14, 13, 12, .45); }
.admin-bar .pi-hdr.is-stuck { top: 32px; }
@media (max-width: 782px) { .admin-bar .pi-hdr.is-stuck { top: 46px; } }
@media (max-width: 600px) { .admin-bar .pi-hdr.is-stuck { top: 0; } }
.pi-hdr-spacer { display: none; }
.pi-hdr-spacer.is-on { display: block; }

.pi-hdr__in { display: flex; align-items: center; gap: 28px; max-width: 1280px; height: 84px; margin: 0 auto; padding: 0 28px; transition: height .25s var(--pi-ease); }
.pi-hdr.is-stuck .pi-hdr__in { height: 68px; }

.pi-hdr__logo { display: flex; align-items: center; flex: none; color: var(--hdr-fg) !important; }
.pi-hdr__logo-img { display: block; width: auto; max-width: 190px; max-height: 52px; transition: max-height .25s var(--pi-ease); }
.pi-hdr.is-stuck .pi-hdr__logo-img { max-height: 42px; }
.pi-hdr__wordmark { display: flex; flex-direction: column; font: 700 1.6rem/1 var(--pi-display); letter-spacing: -.02em; }
.pi-hdr__wordmark small { margin-top: 3px; font: 600 .66rem/1 var(--pi-body); letter-spacing: .22em; text-transform: uppercase; color: var(--pi-gold-d); }
.pi-hdr-theme-dark .pi-hdr__wordmark small { color: var(--pi-gold); }

.pi-hdr__nav { flex: 1; display: flex; justify-content: flex-end; }
.pi-hdr__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pi-hdr__item { position: relative; margin: 0; list-style: none; }
.pi-hdr__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--hdr-fg) !important;
	font: 600 .97rem/1 var(--pi-body);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	white-space: nowrap;
}
.pi-hdr__link:hover,
.pi-hdr__item.is-open > .pi-hdr__link { background: var(--hdr-hover); }
.pi-hdr__link:focus-visible { outline: 2px solid var(--pi-gold); outline-offset: 2px; }
.pi-hdr__item.is-current > .pi-hdr__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--pi-gold); }
.pi-hdr__toggle .pi-ic { width: 16px; height: 16px; transition: transform .2s var(--pi-ease); }
.pi-hdr__item.is-open > .pi-hdr__toggle .pi-ic { transform: rotate(180deg); }
.pi-hdr__badge { display: inline-grid; place-items: center; min-width: 34px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pi-ember); color: #fff; font: 700 .72rem/1 var(--pi-body); }

.pi-hdr__sub {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 250px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid rgba(14, 13, 12, .08);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 48px -20px rgba(14, 13, 12, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s, transform .18s var(--pi-ease), visibility .18s;
}
.pi-hdr__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.pi-hdr__item.is-open > .pi-hdr__sub { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1024px) {
	.pi-hdr__item.has-sub:hover > .pi-hdr__sub { opacity: 1; visibility: visible; transform: none; }
}
.pi-hdr__sub li { margin: 0; list-style: none; }
.pi-hdr__sub a { display: block; padding: 11px 14px; border-radius: 9px; color: var(--pi-ink) !important; font: 500 .95rem/1.2 var(--pi-body); }
.pi-hdr__sub a:hover,
.pi-hdr__sub a[aria-current="page"] { background: var(--pi-bone); }
.pi-hdr__sub a[aria-current="page"] { font-weight: 700; }

.pi-hdr__actions { display: flex; align-items: center; gap: 14px; flex: none; }
.pi-hdr__phone { display: inline-flex; align-items: center; gap: 10px; color: var(--hdr-fg) !important; }
.pi-hdr__phone-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pi-bone); color: var(--pi-ink); }
.pi-hdr-theme-dark .pi-hdr__phone-ic { background: rgba(244, 239, 230, .1); color: var(--pi-gold); }
.pi-hdr__phone-ic .pi-ic { width: 17px; height: 17px; }
.pi-hdr__phone-txt { display: flex; flex-direction: column; font: 700 .98rem/1.15 var(--pi-body); white-space: nowrap; }
.pi-hdr__phone-txt small { font: 500 .74rem/1.2 var(--pi-body); color: var(--hdr-muted); }
.pi-hdr__phone:hover .pi-hdr__phone-ic { background: var(--pi-gold); color: var(--pi-ink); }

.pi-hdr__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 24px;
	border-radius: 12px;
	background: var(--pi-gold);
	color: var(--pi-ink) !important;
	font: 700 1rem/1 var(--pi-body);
	letter-spacing: .005em;
	white-space: nowrap;
	box-shadow: 0 8px 20px -10px rgba(168, 133, 75, .9);
	transition: transform .2s var(--pi-ease), background-color .2s, box-shadow .2s;
}
.pi-hdr__cta:hover { background: var(--pi-gold-2); transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(168, 133, 75, .95); }
.pi-hdr__cta:focus-visible,
.pi-hdr__phone:focus-visible,
.pi-hdr__mcall:focus-visible,
.pi-hdr__burger:focus-visible { outline: 3px solid var(--pi-gold); outline-offset: 3px; }

.pi-hdr__mcall,
.pi-hdr__burger { display: none; }

/* Tussenformaat */
@media (max-width: 1240px) {
	.pi-util__usp { display: none; }
	.pi-hdr__phone-txt { display: none; }
	.pi-hdr__in { gap: 18px; }
	.pi-hdr__link { padding: 0 11px; }
}

/* Mobiel en tablet */
@media (max-width: 1023px) {
	.pi-util { display: none; }
	.pi-hdr__in { height: 66px; padding: 0 16px; gap: 10px; }
	.pi-hdr.is-stuck .pi-hdr__in { height: 60px; }
	.pi-hdr__logo-img { max-height: 42px; max-width: 150px; }
	.pi-hdr.is-stuck .pi-hdr__logo-img { max-height: 38px; }
	.pi-hdr__wordmark { font-size: 1.35rem; }
	.pi-hdr__nav,
	.pi-hdr__phone { display: none; }
	.pi-hdr__actions { margin-left: auto; gap: 8px; }
	.pi-hdr__cta { height: 42px; padding: 0 16px; font-size: .92rem; border-radius: 10px; box-shadow: none; }
	.pi-hdr__mcall,
	.pi-hdr__burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 42px;
		min-width: 42px;
		margin: 0;
		padding: 0 10px;
		border: 1px solid var(--hdr-line);
		border-radius: 10px;
		background: transparent;
		color: var(--hdr-fg) !important;
		font: 600 .92rem/1 var(--pi-body);
		cursor: pointer;
	}
	.pi-hdr__mcall { padding: 0; }
	.pi-hdr__mcall .pi-ic { width: 18px; height: 18px; }
	.pi-hdr__burger .pi-ic { width: 22px; height: 22px; }
}
@media (max-width: 479px) {
	.pi-hdr__burger-txt { display: none; }
	.pi-hdr__burger { padding: 0; }
	.pi-hdr__cta { padding: 0 13px; }
}
@media (max-width: 359px) { .pi-hdr__cta { display: none; } }

/* Menupaneel (mobiel) */
.pi-drawer { position: fixed; inset: 0; z-index: 99990; }
.pi-drawer[hidden] { display: none; }
.pi-drawer__backdrop { position: absolute; inset: 0; background: rgba(14, 13, 12, .55); opacity: 0; transition: opacity .25s; }
.pi-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	padding: 14px 20px calc(24px + env(safe-area-inset-bottom));
	overflow-y: auto;
	background: var(--pi-ink);
	color: var(--pi-bone);
	font-family: var(--pi-body);
	transform: translateX(100%);
	transition: transform .3s var(--pi-ease);
}
.pi-drawer.is-open .pi-drawer__backdrop { opacity: 1; }
.pi-drawer.is-open .pi-drawer__panel { transform: none; }
.pi-drawer__top { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-bottom: 8px; }
.pi-drawer__title { font: 600 .8rem/1 var(--pi-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 239, 230, .55); }
.pi-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgba(244, 239, 230, .18); border-radius: 12px; background: transparent; color: var(--pi-bone); cursor: pointer; }
.pi-drawer__close .pi-ic { width: 22px; height: 22px; }
.pi-drawer__list { margin: 0 0 22px; padding: 0; list-style: none; }
.pi-drawer__list > .pi-hdr__item { border-bottom: 1px solid rgba(244, 239, 230, .1); }
.pi-drawer__list .pi-hdr__link {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: auto;
	padding: 16px 2px;
	border-radius: 0;
	color: var(--pi-bone) !important;
	font: 600 1.55rem/1.15 var(--pi-display);
	letter-spacing: -.01em;
	text-align: left;
}
.pi-drawer__list .pi-hdr__link:hover { background: transparent; color: var(--pi-gold) !important; }
.pi-drawer__list .pi-hdr__item.is-current > .pi-hdr__link { color: var(--pi-gold) !important; }
.pi-drawer__list .pi-hdr__item.is-current > .pi-hdr__link::after { display: none; }
.pi-drawer__list .pi-hdr__toggle .pi-ic { width: 22px; height: 22px; }
.pi-drawer__list .pi-hdr__sub {
	position: static;
	display: none;
	min-width: 0;
	margin: -4px 0 14px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}
.pi-drawer__list .pi-hdr__sub::before { display: none; }
.pi-drawer__list .pi-hdr__item.is-open > .pi-hdr__sub { display: block; }
.pi-drawer__list .pi-hdr__sub a { padding: 10px 2px; border-radius: 0; color: rgba(244, 239, 230, .82) !important; font: 500 1.05rem/1.3 var(--pi-body); }
.pi-drawer__list .pi-hdr__sub a:hover,
.pi-drawer__list .pi-hdr__sub a[aria-current="page"] { background: transparent; color: var(--pi-gold) !important; }
.pi-drawer__cta { display: grid; gap: 10px; margin-bottom: 22px; }
.pi-drawer__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: 1px solid rgba(244, 239, 230, .3); border-radius: 12px; color: var(--pi-bone) !important; font: 700 1.02rem/1 var(--pi-body); }
.pi-drawer__btn--gold { border-color: var(--pi-gold); background: var(--pi-gold); color: var(--pi-ink) !important; }
.pi-drawer__info { margin-top: auto; color: rgba(244, 239, 230, .7); font-size: .95rem; }
.pi-drawer__info p { margin: 8px 0 14px; color: inherit; line-height: 1.55; }
.pi-drawer__info .pi-hours__status { margin: 0; color: var(--pi-bone); font-weight: 600; }
.pi-drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.pi-hdr, .pi-hdr__in, .pi-hdr__sub, .pi-drawer__panel, .pi-drawer__backdrop, .pi-hdr__cta { transition: none; }
}
@media (min-width: 1024px) { .pi-drawer { display: none !important; } }
.pi-own-header .pi-callbar { display: none !important; }
.pi-own-header:has(.pi-callbar) { padding-bottom: 0 !important; }
@media (max-width: 420px) {
	.pi-hdr__in { padding: 0 12px; gap: 6px; }
	.pi-hdr__actions { gap: 6px; }
	.pi-hdr__logo-img { max-width: 118px; max-height: 38px; }
	.pi-hdr__wordmark { font-size: 1.18rem; }
	.pi-hdr__wordmark small { font-size: .56rem; letter-spacing: .18em; }
	.pi-hdr__cta { height: 40px; padding: 0 12px; font-size: .86rem; }
	.pi-hdr__mcall, .pi-hdr__burger { height: 40px; min-width: 40px; }
}

/* ---------- 14. Hero met foto + logo-vangnet --------------------------- */
.pi-hero--img .section-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14, 13, 12, .92) 0%, rgba(14, 13, 12, .78) 38%, rgba(14, 13, 12, .35) 75%, rgba(14, 13, 12, .2) 100%);
	pointer-events: none;
}
.pi-page .pi-hero.pi-hero--img .section-bg::after {
	background: linear-gradient(90deg, rgba(14, 13, 12, .92) 0%, rgba(14, 13, 12, .78) 38%, rgba(14, 13, 12, .35) 75%, rgba(14, 13, 12, .2) 100%);
}
.pi-hero--img .section-bg { background-size: cover; }
.pi-hero--img h1,
.pi-hero--img .pi-lead { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
@media (max-width: 849px) {
	.pi-hero--img .section-bg::after,
	.pi-page .pi-hero.pi-hero--img .section-bg::after { background: linear-gradient(180deg, rgba(14, 13, 12, .55) 0%, rgba(14, 13, 12, .85) 60%, rgba(14, 13, 12, .92) 100%); }
}
/* Geen GD op de server: witte logo-achtergrond wegfilteren in lichte header. */
.pi-hdr-theme-light .pi-hdr__logo-img.is-original { mix-blend-mode: multiply; }
@media (max-width: 849px) {
	.pi-hero--img .section-bg::after,
	.pi-page .pi-hero.pi-hero--img .section-bg::after { background: linear-gradient(180deg, rgba(14, 13, 12, .35) 0%, rgba(14, 13, 12, .7) 55%, rgba(14, 13, 12, .85) 100%); }
}