/* ==========================================================================
   Decotrap productpagina (page-templates/trappen-productpagina.php)
   Overgenomen uit de preview (decotrap-preview: z-trap.html?hero=kaart, product.css en styles.css
   secties 56 tot 75). Alles staat onder .pp, de knoppen hebben eigen klassen (pp-cta, pp-afspraak),
   zodat niets botst met Bootstrap/Understrap. Variabelen komen uit css/dt-header.css (--dt-*).
   ========================================================================== */

/* zoals in de preview: pagina en megamenu in zandbeige (#E4E1D7) in plaats van #FAF9F4 van de rest van de site */
body.dt-productpagina { --dt-bg: #E4E1D7; --dt-bg-rgb: 228 225 215; --dt-mega-beige: #E4E1D7; background-color: var(--dt-bg) !important; } /* theme.css zet body op #faf9f4 !important */
html:has(body.dt-productpagina) { scroll-padding-top: 72px; }

.pp {
	--pp-sectie: clamp(64px, 8vw, 120px);
	font-family: var(--dt-font); font-size: 17px; line-height: 1.6; color: var(--dt-ink);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.pp *, .pp ::before, .pp ::after { box-sizing: border-box; }
.pp a, .pp a:hover, .pp a:focus { text-decoration: none; }
.pp button { font: inherit; text-transform: none; }
.pp button:focus { outline: 0; }
.pp :is(a, button):focus-visible { outline: 2px solid var(--dt-brand); outline-offset: 3px; }
.pp ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Gedeelde onderdelen ---------- */
.pp h1, .pp h2, .pp h3 { margin: 0; font-family: var(--dt-font); font-weight: 400 !important; -webkit-text-stroke: 0; color: var(--dt-ink); text-transform: none; text-shadow: none; }
.pp h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.015em; }
.pp h3 { font-size: 20px; line-height: 1.25; }
.pp p { margin: 0; color: var(--dt-text); font-size: 17px; line-height: 1.6; }
.pp-label {
	display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px !important;
	font-size: 13px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dt-ink) !important;
}
.pp-sectie { padding: var(--pp-sectie) var(--dt-gutter); }
.pp .dt-btn-icoon { width: 18px; height: 18px; flex: none; }

/* knoppen: Gratis offerte gevuld, Afspraak maken als outline (zoals hero__cta en hero__afspraak in de preview) */
.pp-cta, .pp-afspraak {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
	border-radius: var(--dt-btn-radius, 6px); font-size: 15px; line-height: 1.4; letter-spacing: 0.04em; white-space: nowrap;
	-webkit-text-stroke: 0.45px currentColor;
	transition: background-color 200ms var(--dt-ease), color 200ms var(--dt-ease), border-color 200ms var(--dt-ease);
}
.pp-cta { background: var(--dt-brand); color: #FFFFFF; border: 1px solid transparent; font-weight: 700; -webkit-text-stroke: 0; text-transform: uppercase; }
.pp-tabs .pp-cta { text-transform: none; }
.pp-afspraak { background: transparent; color: var(--dt-ink); border: 1px solid var(--dt-ink); }
.pp a.pp-cta, .pp a.pp-cta:hover, .pp a.pp-cta:focus { color: #FFFFFF; }
.pp a.pp-afspraak { color: var(--dt-ink); }
@media (hover: hover) {
	.pp a.pp-cta:hover { background: #A6A800; }
	.pp a.pp-afspraak:hover { background: var(--dt-ink); color: #FFFFFF; border-color: var(--dt-ink); }
}

/* ---------- Menu transparant over de herofoto ---------- */
/* de hele kop (promobalk + menu) ligt over de foto */
body.dt-productpagina header:has(.dt-hero--balk) { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
body.dt-productpagina .dt-hero.dt-hero--balk { background: transparent; color: #FFFFFF; }
body.dt-productpagina .dt-hero--balk .dt-nav { background: transparent !important; color: #FFFFFF; }
body.dt-productpagina .dt-hero--balk .dt-logo--licht { display: block; }
body.dt-productpagina .dt-hero--balk .dt-logo--normaal { display: none; }
body.dt-productpagina .dt-nav__ctas .dt-nav__link { color: #FFFFFF; border-color: rgb(255 255 255 / 0.85); }
body.dt-productpagina .dt-nav__toggle { color: #FFFFFF; background: rgb(255 255 255 / 0.16); }
/* open megamenu: terug donkere tekst op het beige vlak */
body.dt-productpagina .dt-hero.dt-is-mega .dt-nav { background: var(--dt-bg) !important; color: var(--dt-ink); }
body.dt-productpagina .dt-hero.dt-is-mega .dt-logo--licht { display: none; }
body.dt-productpagina .dt-hero.dt-is-mega .dt-logo--normaal { display: block; }
body.dt-productpagina .dt-hero.dt-is-mega .dt-nav__ctas .dt-nav__link { color: var(--dt-ink); border-color: var(--dt-ink); }

/* ---------- 1. Hero 'kaart' ---------- */
.ph-kaart { position: relative; padding: 0; background: var(--dt-bg); }
.ph-kaart__beeld {
	position: relative; isolation: isolate; overflow: hidden; border-radius: 0;
	min-height: min(82vh, 820px); display: flex; align-items: flex-end; background: #2A2620; color: #FFFFFF;
}
.ph-kaart__beeld > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ph-kaart__beeld::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	/* lichter en warmer dan in de preview: bruine tint in plaats van bijna zwart, en een zachte warme gloed */
	background: linear-gradient(180deg, rgb(48 32 18 / 0.32) 0%, rgb(48 32 18 / 0) 22%),
		linear-gradient(90deg, rgb(48 32 18 / 0.36) 0%, rgb(48 32 18 / 0.06) 60%, rgb(48 32 18 / 0) 100%),
		linear-gradient(0deg, rgb(48 32 18 / 0.38) 0%, rgb(48 32 18 / 0) 50%),
		linear-gradient(rgb(214 160 96 / 0.12), rgb(214 160 96 / 0.12));
}
.ph-kaart__inhoud { width: 100%; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 48px var(--dt-gutter) clamp(40px, 5vw, 72px); }
.ph-kaart__tekst { max-width: 640px; }
.pp .ph-kaart__label { margin: 0 0 18px !important; font-size: 13px !important; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.85) !important; }
.pp .ph-kaart__titel {
	margin: 0 !important; font-family: var(--dt-font) !important; font-weight: 300 !important; text-transform: none !important;
	font-size: clamp(48px, 6.4vw, 104px) !important; line-height: 0.95 !important; letter-spacing: 0.01em !important; color: #FFFFFF !important;
}
.pp .ph-kaart__lead { max-width: 560px; margin: 26px 0 0 !important; font-size: 19px !important; line-height: 1.5 !important; color: rgb(255 255 255 / 0.9) !important; }

/* 'Ontdek'-knop: outline, pijl achter de tekst met een zachte beweging omlaag */
.pp a.ph-kaart__ontdek {
	display: inline-flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 32px; padding: 0 22px 0 26px;
	border: 1px solid rgb(255 255 255 / 0.85); border-radius: var(--dt-btn-radius, 6px);
	color: #FFFFFF; font-size: 15px; letter-spacing: 0.04em;
	transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.ph-kaart__ontdek-pijl { order: 2; width: 18px; height: 18px; overflow: visible; animation: pp-ontdek-pijl 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes pp-ontdek-pijl { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (hover: hover) { .pp a.ph-kaart__ontdek:hover { background: #FFFFFF; color: var(--dt-ink); border-color: #FFFFFF; } }
.pp a.ph-kaart__ontdek:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }

/* fotoblok rechtsonder */
.ph-kaart__acties { display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex-shrink: 0; width: min(500px, 100%); }
.ph-kaart__galerij {
	display: flex; align-items: center; gap: 20px; width: 100%; padding: 12px 22px 12px 12px;
	border: 1px solid rgb(255 255 255 / 0.22); border-radius: 14px; background: rgb(255 255 255 / 0.14); color: #FFFFFF;
	text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	transition: background 200ms ease, border-color 200ms ease;
}
.ph-kaart__galerij-beelden { display: flex; gap: 8px; flex-shrink: 0; }
.ph-kaart__galerij-beelden img { display: block; width: 108px; height: 84px; object-fit: cover; border-radius: 8px; }
.ph-kaart__galerij-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; line-height: 1.4; }
.ph-kaart__galerij-tekst strong { font-size: 18px; font-weight: 700; }
.ph-kaart__galerij-tekst > span { font-size: 14px; color: rgb(255 255 255 / 0.78); }
.ph-kaart__galerij-pijl { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
@media (hover: hover) {
	.ph-kaart__galerij:hover { background: rgb(255 255 255 / 0.24); border-color: rgb(255 255 255 / 0.4); }
	.ph-kaart__galerij:hover .ph-kaart__galerij-pijl { transform: translateX(3px); }
}
.ph-kaart__galerij:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* ---------- 2. Paginanavigatie: verschijnt bovenaan zodra je voorbij de hero scrolt ---------- */
.pp-tabs {
	position: fixed; top: 0; left: 0; right: 0; z-index: 25; min-height: 64px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 0 var(--dt-gutter); border-bottom: 1px solid rgb(38 36 31 / 0.08);
	background: rgb(222 216 202 / 0.68); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
	box-shadow: 0 6px 24px rgb(38 36 31 / 0.08);
	transform: translateY(-100%); visibility: hidden;
	transition: transform 320ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 320ms;
}
.pp-tabs.is-zichtbaar { transform: none; visibility: visible; transition: transform 320ms cubic-bezier(.2,.7,.2,1), visibility 0s; }
body.admin-bar .pp-tabs { top: 32px; }
.pp-tabs ul { display: flex; align-items: center; gap: 4px; margin-left: -14px; overflow-x: auto; scrollbar-width: none; }
.pp-tabs ul::-webkit-scrollbar { display: none; }
.pp-tabs ul a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; white-space: nowrap;
	font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dt-text);
	transition: background 250ms var(--dt-ease), color 250ms var(--dt-ease);
}
.pp-tabs ul a:hover { background: rgb(176 150 104 / 0.22); color: var(--dt-ink); }
.pp-tabs ul a.is-actief { background: rgb(176 150 104 / 0.28); color: var(--dt-ink); }
.pp-tabs__ctas { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pp-tabs .pp-cta, .pp-tabs .pp-afspraak { min-height: 40px; padding: 0 18px; letter-spacing: 0; }
.pp-tabs .pp-cta { letter-spacing: 0.04em; }

/* ---------- 3. Over de trap: verhaal links, technische fiche rechts ---------- */
.pp-over { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px clamp(48px, 8vw, 140px); align-items: start; }
.pp-over__tekst h2 { margin-bottom: 28px; max-width: 14ch; }
.pp-over__tekst p + p { margin-top: 16px; }
.pp-over__tekst p { max-width: 54ch; }
.pp-over__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pp-fiche { margin: 0; border-top: 1px solid var(--dt-ink); }
.pp-fiche > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--dt-line); }
.pp-fiche dt { font-size: 13px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dt-text); padding-top: 2px; }
.pp-fiche dd { margin: 0; font-size: 16px; color: var(--dt-ink); }

/* ---------- 4. Fotostrook: horizontaal scrollen met pijlen ---------- */
.pp-strook { padding: 0 0 clamp(64px, 8vw, 120px); }
.pp-strook__rij {
	display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
	padding: 0 var(--dt-gutter) 0 calc(var(--dt-gutter) / 2); scroll-padding: 0 var(--dt-gutter) 0 calc(var(--dt-gutter) / 2); scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.pp-strook__rij::-webkit-scrollbar { display: none; }
.pp-strook__rij:focus-visible { outline: 2px solid var(--dt-ink); outline-offset: 4px; }
.pp-strook__foto {
	flex: 0 0 auto; height: clamp(300px, 34vw, 560px); padding: 0; border: 0; border-radius: 10px;
	overflow: hidden; background: #DDD7CA; cursor: zoom-in; scroll-snap-align: start;
}
.pp-strook__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--dt-ease); }
@media (hover: hover) { .pp-strook__foto:hover img { transform: scale(1.03); } }
.pp-strook__voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 0 var(--dt-gutter); }
.pp-strook__alle {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
	border: 1px solid var(--dt-ink); border-radius: var(--dt-btn-radius, 6px); background: transparent;
	color: var(--dt-ink); font-size: 15px; font-weight: 500; cursor: pointer;
	transition: background-color 200ms var(--dt-ease), color 200ms var(--dt-ease);
}
.pp-strook__alle svg { width: 14px; height: 14px; }
.pp-strook__pijlen { display: flex; gap: 12px; }
.pp-strook__pijl {
	display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
	border: 1px solid var(--dt-ink); border-radius: 50%; background: transparent; color: var(--dt-ink); cursor: pointer;
	transition: background-color 200ms var(--dt-ease), color 200ms var(--dt-ease), opacity 200ms var(--dt-ease);
}
.pp-strook__pijl svg { width: 14px; height: 14px; }
.pp-strook__pijl:first-child svg { transform: rotate(180deg); }
.pp-strook__pijl:disabled { opacity: 0.25; cursor: default; }
@media (hover: hover) {
	.pp-strook__alle:hover, .pp-strook__pijl:not(:disabled):hover { background: var(--dt-ink); color: #FFFFFF; }
}

/* ---------- 5. Inhoudssecties (voordelen, modellen, materialen, ...) ---------- */
.pp-blok { border-top: 1px solid var(--dt-line); }
.pp-blok h2 { margin: 0 0 32px; max-width: 18ch; }
.pp-blok__intro { max-width: 62ch; margin-bottom: 40px !important; }
.pp-blok__tekst { max-width: 62ch; }
.pp-blok__tekst p + p { margin-top: 16px; }
.pp-blok__tekst ul { margin-top: 16px; }
.pp-blok__tekst li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--dt-text); }
.pp-blok__tekst li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 8px; border-radius: 2px; background: var(--dt-brand); }
.pp-blok__tekst a { color: var(--dt-ink); border-bottom: 1px solid currentColor; }
.pp-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pp-kaart { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; border-radius: 18px; background: #F1EEE6; box-shadow: 0 10px 30px rgb(38 36 31 / 0.06); }
.pp-kaart__foto { margin: -26px -28px 8px; aspect-ratio: 4 / 3; border-radius: 18px 18px 0 0; overflow: hidden; background: #DDD7CA; }
.pp-kaart__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-kaart__nr { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dt-text); }
.pp .pp-kaart h3 { font-size: 21px; font-weight: 500 !important; }
.pp .pp-kaart p { font-size: 15px; line-height: 1.55; color: var(--dt-muted); }

/* opmaak Materialen: grote foto links, materialen als genummerde rijen rechts */
.pp-mat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px clamp(48px, 7vw, 120px); align-items: center; }
.pp-mat__foto { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #DDD7CA; }
.pp-mat__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-mat__inhoud h2 { margin-bottom: 20px; }
.pp-mat__inhoud .pp-blok__intro { margin-bottom: 32px !important; }
.pp-mat__lijst { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dt-ink); counter-reset: none; }
.pp-mat__item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--dt-line); }
.pp-mat__nr { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dt-ink); background: transparent; color: var(--dt-ink); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; }
.pp-mat__staal { display: block; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #DDD7CA; }
.pp-mat__staal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp .pp-mat__item h3 { margin: 2px 0 6px; font-size: 20px; font-weight: 500 !important; }
.pp .pp-mat__item p { font-size: 16px; line-height: 1.55; color: var(--dt-muted); }
.pp-mat__tekst { margin-top: 24px; }
.pp-mat__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pp-mat__knoppen .dt-btn-icoon { width: 14px; height: 14px; }

/* veelgestelde vragen */
.pp-faq { max-width: 860px; border-top: 1px solid var(--dt-ink); }
.pp-faq details { border-bottom: 1px solid var(--dt-line); }
.pp-faq summary {
	position: relative; display: block; padding: 22px 48px 22px 0; cursor: pointer; list-style: none;
	font-size: 19px; line-height: 1.35; color: var(--dt-ink);
}
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after {
	content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
	background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
	transition: transform 250ms var(--dt-ease);
}
.pp-faq details[open] summary::after { transform: rotate(45deg); }
.pp-faq details p { padding: 0 48px 24px 0; max-width: 70ch; }

/* ---------- Vaste knoppenbalk (gsm) ---------- */
.pp-mbar { display: none; }

/* ---------- Lichtbak ---------- */
.pp-lb-open, .pp-lb-open body { overflow: hidden; }
.pp-lichtbak { position: fixed; inset: 0; z-index: 100000; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; background: rgb(22 22 20 / 0.96); }
.pp-lichtbak[hidden] { display: none; }
.pp-lichtbak figure { grid-column: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pp-lichtbak img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.pp-lichtbak figcaption { color: rgb(255 255 255 / 0.7); font-size: 14px; letter-spacing: 0.06em; }
.pp-lichtbak button { display: grid; place-items: center; width: 48px; height: 48px; margin: auto; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.1); color: #FFFFFF; cursor: pointer; }
.pp-lichtbak button:hover { background: rgb(255 255 255 / 0.2); }
.pp-lichtbak button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pp-lichtbak__sluit { position: absolute; top: 20px; right: 20px; }

/* ---------- Tablet en gsm ---------- */
@media (max-width: 960px) {
	.ph-kaart { padding-bottom: 148px; }
	.ph-kaart__beeld { min-height: 75vh; min-height: 75svh; flex-direction: column; align-items: stretch; justify-content: flex-end; overflow: visible; }
	.ph-kaart__beeld > img, .ph-kaart__beeld::before { clip-path: inset(0); }
	.ph-kaart__inhoud { flex-direction: column; align-items: stretch; padding: 240px var(--dt-gutter) 32px; }
	.pp .ph-kaart__label { font-size: 11px !important; margin-bottom: 12px !important; }
	.pp .ph-kaart__titel { font-size: clamp(44px, 13vw, 64px) !important; }
	.pp .ph-kaart__lead { font-size: 16px !important; margin-top: 16px !important; }
	.pp a.ph-kaart__ontdek { width: 100%; justify-content: center; margin-top: 24px; }
	.ph-kaart__acties { position: absolute; top: calc(100% + 16px); left: var(--dt-gutter); right: var(--dt-gutter); width: auto; }
	.ph-kaart__galerij { background: #EDE9DF; border-color: rgb(38 36 31 / 0.1); color: var(--dt-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.ph-kaart__galerij-tekst > span { color: var(--dt-muted); }
	.ph-kaart__galerij-beelden img { width: 96px; height: 80px; }
	.ph-kaart__galerij { gap: 16px; padding: 12px 18px 12px 12px; }
	/* smalle gsm: één grotere foto, zodat de tekst op twee regels past */
	.ph-kaart__galerij-beelden img + img { display: none; }
	.ph-kaart__galerij-tekst strong { font-size: 16px; }
	.ph-kaart__galerij-tekst > span { font-size: 13px; }

	.pp-tabs { min-height: 52px; }
	.pp-tabs__ctas { display: none; }
	.pp-tabs ul { margin-left: -12px; padding: 8px 0; }
	.pp-tabs ul a { min-height: 36px; padding: 0 12px; font-size: 12px; }
	body.admin-bar .pp-tabs { top: 46px; }

	.pp-over { grid-template-columns: 1fr; }
	.pp-over__knoppen { flex-direction: column; }
	.pp-over__knoppen a { width: 100%; }
	.pp-fiche > div { grid-template-columns: 110px 1fr; }

	.pp-strook__rij { gap: 10px; padding: 0 var(--dt-gutter); scroll-padding: 0 var(--dt-gutter); }
	.pp-strook__foto { height: 260px; max-width: 78vw; }
	.pp-strook__pijlen { display: none; }
	.pp-strook__alle { width: 100%; justify-content: center; }

	.pp-mat { grid-template-columns: 1fr; gap: 32px; }
	.pp-mat__foto { aspect-ratio: 4 / 3; border-radius: 14px; }
	.pp-mat__item { grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; }
	.pp-mat__nr { width: 36px; height: 36px; font-size: 13px; }
	.pp-mat__knoppen a { width: 100%; }
	.pp-kaart { padding: 20px; border-radius: 14px; }
	.pp-kaart__foto { margin: -20px -20px 6px; border-radius: 14px 14px 0 0; }
	.pp-faq summary { font-size: 17px; }

	.pp-mbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
		display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px;
		padding: 10px var(--dt-gutter) calc(10px + env(safe-area-inset-bottom));
		background: rgb(var(--dt-bg-rgb) / 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
		border-top: 1px solid var(--dt-line);
		transform: translateY(110%); transition: transform 280ms var(--dt-ease);
	}
	.pp-mbar.is-on { transform: none; }
	.pp-mbar a { min-height: 46px; padding: 0 12px; }
	/* gsm: foto bovenaan, pijlen links en rechts eronder */
	.pp-lichtbak { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-content: center; gap: 24px 16px; padding: 72px 0 calc(28px + env(safe-area-inset-bottom)); }
	.pp-lichtbak figure { grid-column: 1 / -1; grid-row: 1; align-self: center; padding: 0 8px; }
	.pp-lichtbak img { max-height: calc(100vh - 220px); max-height: calc(100svh - 220px); }
	.pp-lichtbak .pp-lichtbak__vorige, .pp-lichtbak .pp-lichtbak__volgende { grid-row: 2; width: 56px; height: 56px; margin: 0; }
	.pp-lichtbak .pp-lichtbak__vorige { grid-column: 1; justify-self: end; }
	.pp-lichtbak .pp-lichtbak__volgende { grid-column: 2; justify-self: start; }
}
@media (max-width: 782px) { body.admin-bar .pp-tabs { top: 46px; } }
@media (min-width: 480px) and (max-width: 960px) { .ph-kaart__galerij-beelden img + img { display: block; } }
@media (prefers-reduced-motion: reduce) {
	.pp * { transition: none !important; }
	.ph-kaart__ontdek-pijl { animation: none; }
	.pp-tabs { transition: none; }
}