/*
 * Daams paginabouwstenen (1.2.0)
 * Nieuwe opmaak voor product- en informatiepagina's. Alles staat binnen .dz-page,
 * zodat de rest van de site (thema Corsa) er niets van merkt.
 */

/* Pagina-instellingen als een pagina deze bouwstenen gebruikt */
body.daams-dz .l-main { overflow-x: hidden; overflow-x: clip; }
body.daams-dz .l-main .l-subsection { padding-top: 0 !important; padding-bottom: 0 !important; }
body.daams-dz .l-main .l-subsection-hh { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

.dz-page {
	--dz-ink: #2E3436;
	--dz-ink-2: #4A5153;
	--dz-muted: #5F6668;
	--dz-line: #E2E0DA;
	--dz-line-2: #DDD7CC;
	--dz-sand: #F6F3EE;
	--dz-ph: #E6E0D5;
	--dz-green: #00713B;
	--dz-green-dark: #00562D;
	--dz-on-green: #D8E7DD;
	color: var(--dz-ink);
	font-family: 'PT Sans', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}
.dz-page *, .dz-page *::before, .dz-page *::after { box-sizing: border-box; }
.dz-page p { margin: 0; }
.dz-page img { max-width: 100%; height: auto; display: block; }
.dz-page figure { margin: 0; }

/* Koppen: overschrijft het thema (hoofdletters, maten, marges) */
.l-main .dz-page h1, .l-main .dz-page h2, .l-main .dz-page h3 {
	font-family: Dosis, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--dz-ink);
	padding: 0 !important;
}
.l-main .dz-page .dz-h1 { font-size: 52px !important; line-height: 1.05 !important; font-weight: 600 !important; margin: 0 0 18px !important; }
.l-main .dz-page .dz-h2 { font-size: 32px !important; line-height: 1.2 !important; font-weight: 600 !important; margin: 0 0 14px !important; }
.l-main .dz-page .dz-h2--s { font-size: 28px !important; }
.l-main .dz-page .dz-h3 { font-size: 22px !important; line-height: 1.25 !important; font-weight: 600 !important; margin: 0 !important; }
.dz-page .dz-kicker { font-family: Dosis, sans-serif; font-weight: 700; font-size: 16px; color: var(--dz-green); margin: 0 0 10px; }
.dz-page .dz-lead { font-size: 19px; line-height: 1.55; max-width: 36em; }
.dz-page .dz-muted { color: var(--dz-muted); }
.dz-page .dz-small { font-size: 15px; }

/* Links: het thema zet alle links in .l-main hard op groen (!important) */
.l-main .dz-page a { text-decoration: none; }
.l-main .dz-page a.dz-plain, .l-main .dz-page a.dz-tile, .l-main .dz-page a.dz-cat { color: var(--dz-ink) !important; }
.l-main .dz-page a.dz-more { color: var(--dz-green) !important; font-weight: 700; display: inline-flex; align-items: center; min-height: 40px; }
.l-main .dz-page a.dz-more:hover { color: var(--dz-green-dark) !important; text-decoration: underline; }

/* Breedte en banden */
.dz-page .dz-wrap { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.dz-page .dz-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.dz-page .dz-band--sand { background: var(--dz-sand); }
.dz-page .dz-band--green { background: var(--dz-green-dark); color: #FFFFFF; }
.dz-page .dz-sec { padding-top: 56px; padding-bottom: 56px; }
.dz-page .dz-sec--tight { padding-top: 44px; padding-bottom: 44px; }
.dz-page .dz-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.l-main .dz-page .dz-head .dz-h2 { margin: 0 !important; }

/* Kruimelpad */
.dz-page .dz-crumb { font-size: 14px; color: var(--dz-muted); display: flex; gap: 8px; padding-top: 28px; margin-bottom: 28px; }
.l-main .dz-page .dz-crumb a { color: var(--dz-green) !important; }

/* Kop met foto */
.dz-page .dz-hero { padding-bottom: 56px; }
.dz-page .dz-hero__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.dz-page .dz-hero__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.dz-page figcaption { font-size: 14px; color: var(--dz-muted); margin-top: 8px; }
.dz-page .dz-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: end; padding-top: 48px; padding-bottom: 40px; }
.dz-page .dz-intro__text { grid-column: span 7; }
.dz-page .dz-intro__side { grid-column: 9 / span 4; }

/* Feitjes en lijsten met lijnen */
.dz-page .dz-facts { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--dz-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dz-page .dz-facts dt { font-size: 13px; color: var(--dz-muted); font-weight: 400; }
.dz-page .dz-facts dd { margin: 2px 0 0; font-weight: 700; }
.dz-page .dz-lines { margin: 0; padding: 0; list-style: none; }
.dz-page .dz-lines > li, .dz-page .dz-lines > div { padding: 14px 0; border-top: 1px solid var(--dz-line); list-style: none; margin: 0; }
.dz-page .dz-lines > li::before { display: none; }
.dz-page .dz-lines > :last-child { border-bottom: 1px solid var(--dz-line); }
.dz-page .dz-band--sand .dz-lines > li, .dz-page .dz-band--sand .dz-lines > div, .dz-page .dz-band--sand .dz-lines > :last-child { border-color: var(--dz-line-2); }
.dz-page .dz-lines dt { font-weight: 700; }
.dz-page .dz-lines dd { margin: 2px 0 0; color: var(--dz-ink-2); }

/* Knoppen */
.dz-page .dz-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.l-main .dz-page a.dz-btn { font-family: Dosis, sans-serif; font-weight: 700; font-size: 17px; line-height: 1.2; padding: 13px 24px; min-height: 48px; border-radius: 4px; border: 2px solid var(--dz-green); display: inline-flex; align-items: center; gap: 8px; text-transform: none; }
.l-main .dz-page a.dz-btn--primary { background: var(--dz-green); color: #FFFFFF !important; }
.l-main .dz-page a.dz-btn--primary:hover { background: var(--dz-green-dark); border-color: var(--dz-green-dark); }
.l-main .dz-page a.dz-btn--ghost { background: transparent; color: var(--dz-green) !important; }
.l-main .dz-page a.dz-btn--ghost:hover { background: #EAF3EE; }
.l-main .dz-page .dz-band--green a.dz-btn--primary { background: #FFFFFF; border-color: #FFFFFF; color: var(--dz-green-dark) !important; }
.l-main .dz-page .dz-band--green a.dz-btn--ghost { border-color: #FFFFFF; color: #FFFFFF !important; }
.l-main .dz-page .dz-band--green a.dz-btn--ghost:hover { background: rgba(255,255,255,0.12); }
.dz-page a:focus-visible { outline: 3px solid #F3B26B; outline-offset: 2px; }

/* Categorie-tegels met productfoto */
.dz-page .dz-cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.dz-page .dz-cat { display: flex; flex-direction: column; gap: 8px; font-weight: 700; }
.dz-page .dz-cat img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: #FFFFFF; transition: transform .15s ease; }
.dz-page .dz-cat:hover img { transform: translateY(-2px); }

/* Tabel */
.dz-page .dz-table-box { overflow-x: auto; border: 1px solid var(--dz-line); border-radius: 6px; }
.dz-page table.dz-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; border: 0; }
.dz-page .dz-table th, .dz-page .dz-table td { padding: 10px 16px; text-align: left; border: 0; border-top: 1px solid #EFEDE8; background: transparent; vertical-align: top; }
.dz-page .dz-table thead th { background: var(--dz-sand); border-top: 0; font-weight: 700; padding-top: 12px; padding-bottom: 12px; }
.dz-page .dz-table .dz-group th { padding-top: 16px; padding-bottom: 6px; font-family: Dosis, sans-serif; font-weight: 700; font-size: 15px; color: var(--dz-green); border-top: 1px solid var(--dz-line); }
.dz-page .dz-note { margin-top: 14px; font-size: 15px; color: var(--dz-muted); }

/* Tekst + lijst in twee kolommen */
.dz-page .dz-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.dz-page .dz-split__a { grid-column: span 5; }
.dz-page .dz-split__b { grid-column: 7 / span 6; }
.dz-page .dz-split--q .dz-split__a { grid-column: span 4; }
.dz-page .dz-split--q .dz-split__b { grid-column: 5 / span 8; }
.dz-page .dz-cert { width: 92px; margin-top: 20px; }

/* Fotoraster */
.dz-page .dz-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dz-page .dz-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.dz-page .dz-photos .dz-photo--big { grid-column: span 2; grid-row: span 2; }
.dz-page .dz-photos .dz-photo--big img { aspect-ratio: auto; min-height: 100%; }
.dz-page .dz-photos--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dz-page .dz-photos--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dz-page .dz-photos--n4 figure:last-child { grid-column: span 2; }

/* Tegels (overzicht, "ook interessant") */
.dz-page .dz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.dz-page .dz-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dz-page .dz-tile { display: flex; flex-direction: column; gap: 10px; }
.dz-page .dz-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--dz-sand); transition: transform .15s ease; }
.dz-page .dz-tile:hover img { transform: translateY(-2px); }
.dz-page .dz-tile__t { font-family: Dosis, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.2; }
.dz-page .dz-tile__d { font-size: 15px; color: var(--dz-ink-2); margin-top: -4px; }
.dz-page .dz-tile--big { grid-column: span 2; grid-row: span 2; }
.dz-page .dz-tile--big img { flex-grow: 1; min-height: 420px; aspect-ratio: auto; }
.dz-page .dz-tile--big .dz-tile__t { font-size: 28px; }
.dz-page .dz-tile__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.dz-page .dz-tag { font-size: 14px; color: var(--dz-muted); font-weight: 400; }

/* Vragen */
.dz-page details { border-top: 1px solid var(--dz-line); padding: 16px 0; }
.dz-page details:last-of-type { border-bottom: 1px solid var(--dz-line); }
.dz-page summary { font-weight: 700; font-size: 17px; cursor: pointer; list-style-position: outside; }
.dz-page details p { margin-top: 10px; color: var(--dz-ink-2); }

/* Groene afsluiter */
.dz-page .dz-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px 32px; flex-wrap: wrap; padding-top: 48px; padding-bottom: 48px; }
.l-main .dz-page .dz-band--green .dz-h2 { color: #FFFFFF !important; margin: 0 !important; }
.dz-page .dz-band--green p { color: var(--dz-on-green); margin-top: 6px; }
.dz-page .dz-cta .dz-actions { margin-top: 0; }

/* Tablet */
@media (max-width: 1023px) {
	.dz-page .dz-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.dz-page .dz-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dz-page .dz-hero__grid { gap: 32px; }
}

/* Telefoon */
@media (max-width: 767px) {
	.l-main .dz-page .dz-h1 { font-size: 38px !important; }
	.l-main .dz-page .dz-h2 { font-size: 26px !important; }
	.l-main .dz-page .dz-h3 { font-size: 20px !important; }
	.dz-page .dz-wrap { padding-left: 16px; padding-right: 16px; }
	.dz-page .dz-sec { padding-top: 36px; padding-bottom: 36px; }
	.dz-page .dz-crumb { padding-top: 16px; margin-bottom: 12px; }
	.dz-page .dz-lead { font-size: 17px; }
	.dz-page .dz-hero__grid, .dz-page .dz-split, .dz-page .dz-intro { grid-template-columns: 1fr; gap: 24px; }
	.dz-page .dz-hero__img { order: -1; }
	.dz-page .dz-intro { padding-top: 28px; padding-bottom: 28px; }
	.dz-page .dz-intro__text, .dz-page .dz-intro__side, .dz-page .dz-split__a, .dz-page .dz-split__b,
	.dz-page .dz-split--q .dz-split__a, .dz-page .dz-split--q .dz-split__b { grid-column: auto; }
	.dz-page .dz-facts { gap: 10px; font-size: 14px; }
	.dz-page .dz-actions { flex-direction: column; }
	.l-main .dz-page a.dz-btn { justify-content: center; width: 100%; }
	.dz-page .dz-cats { display: flex; gap: 12px; overflow-x: auto; margin-right: -16px; padding-right: 16px; padding-bottom: 4px; scroll-snap-type: x proximity; }
	.dz-page .dz-cat { flex: 0 0 112px; font-size: 15px; scroll-snap-align: start; }
	.dz-page .dz-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.dz-page .dz-photos--n3 { grid-template-columns: 1fr; }
	.dz-page .dz-tiles, .dz-page .dz-tiles--4 { grid-template-columns: 1fr; gap: 24px; }
	.dz-page .dz-tile--big { grid-column: auto; grid-row: auto; }
	.dz-page .dz-tile--big img { min-height: 0; aspect-ratio: 4 / 3; }
	/* Tabel wordt een lijst: product en kleur links, maat en lengtes rechts */
	.dz-page .dz-table-box { overflow: visible; }
	.dz-page table.dz-table, .dz-page .dz-table tbody { display: block; width: 100%; }
	.dz-page .dz-table thead { display: none; }
	.dz-page .dz-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(55%); column-gap: 12px; padding: 10px 12px; border-top: 1px solid #EFEDE8; }
	.dz-page .dz-table tbody td { border: 0; padding: 0; }
	.dz-page .dz-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 700; }
	.dz-page .dz-table tbody td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 14px; color: var(--dz-muted); }
	.dz-page .dz-table tbody td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
	.dz-page .dz-table tbody td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; font-size: 14px; color: var(--dz-muted); }
	.dz-page .dz-table tbody tr.dz-group { display: block; padding: 0; border-top: 0; }
	.dz-page .dz-table tbody tr.dz-group th { display: block; padding: 16px 12px 6px; }
	.dz-page .dz-table tbody tr:first-child.dz-group th { border-top: 0; }
}

/* Contactformulier van het thema binnen de nieuwe opmaak: knop in huisstijl */
.l-main .dz-page .g-form button, .l-main .dz-page .g-form input[type="submit"] { background: var(--dz-green) !important; border-color: var(--dz-green) !important; color: #fff !important; border-radius: 4px; }
.l-main .dz-page .g-form button:hover, .l-main .dz-page .g-form input[type="submit"]:hover { background: var(--dz-green-dark) !important; }

/* Meer foto's (1.2.3) */
.dz-page details.dz-more-photos, .dz-page details.dz-more-photos:last-of-type { margin-top: 20px; padding: 0; border: 0; }
.dz-page .dz-more-photos > summary:focus { outline: none; }
.dz-page .dz-more-photos > summary:focus-visible { outline: 3px solid #E87000; outline-offset: 2px; }
.dz-page .dz-more-photos > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1.5px solid var(--dz-green); border-radius: 4px; color: var(--dz-green); font-family: Dosis, sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; background: #fff; }
.dz-page .dz-more-photos > summary::-webkit-details-marker { display: none; }
.dz-page .dz-more-photos > summary::after { content: "+"; font-size: 20px; line-height: 1; }
.dz-page .dz-more-photos[open] > summary::after { content: "–"; }
.dz-page .dz-more-photos > summary:hover { background: var(--dz-green); color: #fff; }
.dz-page .dz-more-photos > summary span { font-weight: 500; opacity: .8; }
.dz-page .dz-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.dz-page .dz-gallery a { display: block; border-radius: 4px; overflow: hidden; background: #E6E0D5; }
.dz-page .dz-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .2s ease; }
.dz-page .dz-gallery a:hover img { transform: scale(1.04); }
@media (max-width: 1023px) { .dz-page .dz-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .dz-page .dz-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }

/* Fotovenster */
html.dz-lb-open { overflow: hidden; }
.dz-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(20, 22, 23, .94); display: flex; align-items: center; justify-content: center; padding: 56px 64px; }
.dz-lightbox[hidden] { display: none; }
.dz-lightbox .dz-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.dz-lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 4px; }
.dz-lightbox .dz-lb-count { color: #fff; font: 600 14px/1 "PT Sans", Arial, sans-serif; opacity: .8; }
.dz-lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 48px; padding: 0; cursor: pointer; }
.dz-lightbox button:hover, .dz-lightbox button:focus-visible { background: rgba(255, 255, 255, .25); outline: none; }
.dz-lightbox .dz-lb-close { top: 16px; right: 16px; }
.dz-lightbox .dz-lb-prev { left: 12px; top: 50%; margin-top: -24px; }
.dz-lightbox .dz-lb-next { right: 12px; top: 50%; margin-top: -24px; }
@media (max-width: 767px) { .dz-lightbox { padding: 64px 8px; } .dz-lightbox .dz-lb-prev, .dz-lightbox .dz-lb-next { top: auto; bottom: 14px; margin-top: 0; } .dz-lightbox .dz-lb-prev { left: calc(50% - 60px); } .dz-lightbox .dz-lb-next { right: calc(50% - 60px); } }
@media (prefers-reduced-motion: reduce) { .dz-page .dz-gallery img { transition: none; } }