/* Catalogi van professionals: de pagina's zelf (A4, wit, in de huisstijlkleur van de
   professional via --cat). Gedeeld door de maker in Pro (live voorbeeld) en de gedeelde
   link / afdruk. Geen naam, geen kleur en geen lettertype van de winkel hier: dit
   bestand komt ook op het domein van de catalogi. */
.pagina { position: relative; aspect-ratio: 210 / 297; background: #fff; color: #141210; container-type: inline-size; overflow: hidden;
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pagina * { box-sizing: border-box; }
.pagina .mono { font-family: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.pagina h4 { margin: 0; }
.pagina p { margin: 0; }
.pagina.klassiek .h { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.01em; }

/* logo: een opgeladen beeld, of de bedrijfsnaam als woordmerk */
.pagina .lg { display: inline-flex; align-items: center; }
.pagina .lg img { height: 7cqw; width: auto; max-width: 44cqw; object-fit: contain; }
.pagina .woordmerk { font-weight: 700; letter-spacing: -.03em; font-size: 4.2cqw; color: var(--cat); white-space: nowrap; }

/* kaft en tussenpagina's */
.pagina > img.vol { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kaft::after, .tussen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05) 40%, rgb(0 0 0 / .74)); }
.kaft.zonder-foto, .tussen.zonder-foto { background: var(--cat); }
.kaft.zonder-foto::after, .tussen.zonder-foto::after { background: linear-gradient(160deg, rgb(255 255 255 / .12), rgb(0 0 0 / .25)); }
.kaft .lg { position: absolute; z-index: 1; top: 6cqw; left: 6cqw; background: #fff; border-radius: 2cqw; padding: 2.4cqw 3cqw; max-width: 52cqw; }
.kaft .ttl, .tussen .ttl { position: absolute; z-index: 1; left: 6cqw; right: 6cqw; bottom: 7cqw; color: #fff; }
.kaft .ttl small, .kaft .ttl p, .tussen .ttl small { color: #fff; }
.kaft .ttl small { display: block; font-size: 2.6cqw; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-bottom: 2cqw; }
.kaft .ttl b { display: block; font-size: 10.5cqw; line-height: .95; letter-spacing: -.04em; font-weight: 700; }
.kaft.klassiek .ttl b, .tussen.klassiek .ttl b { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.01em; font-size: 12cqw; }
.kaft .ttl p { font-size: 2.9cqw; opacity: .88; margin-top: 3cqw; }
.tussen .ttl { bottom: 8cqw; }
.tussen .ttl small { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 2.6cqw; opacity: .85; }
.tussen .ttl b { display: block; font-size: 11cqw; line-height: .95; letter-spacing: -.04em; margin-top: 1.5cqw; }

/* welkom */
.intro { display: flex; flex-direction: column; height: 100%; padding: 8cqw 7cqw 6cqw; gap: 5cqw; }
.intro .lg img { height: 8cqw; }
.intro h4 { font-size: 7cqw; letter-spacing: -.03em; line-height: 1; }
.intro p { font-size: 3cqw; line-height: 1.55; color: #3a3631; white-space: pre-line; }
.intro .sig { font-size: 3cqw; color: #3a3631; }
.intro .toc { margin-top: auto; border-top: .3cqw solid var(--cat); padding-top: 3cqw; display: flex; flex-direction: column; gap: 1.6cqw; font-size: 3cqw; }
.intro .toc div { display: flex; justify-content: space-between; gap: 2cqw; }
.intro .toc span { font-family: 'Geist Mono', ui-monospace, monospace; color: #6b645a; }

/* productpagina's */
.pp { display: flex; flex-direction: column; height: 100%; padding: 5.5cqw 6cqw 4.5cqw; }
.pp-kop { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; padding-bottom: 3cqw; border-bottom: .35cqw solid var(--cat);
  font-size: 2.4cqw; letter-spacing: .14em; text-transform: uppercase; color: #6b645a; }
.pp-kop .lg img { height: 4.6cqw; max-width: 34cqw; }
.pp-kop .woordmerk { font-size: 3cqw; letter-spacing: -.02em; text-transform: none; }
.pp-lijf { flex: 1; min-height: 0; padding-block: 4cqw; display: grid; gap: 4cqw; }
.pp-lijf.l1 { grid-template-rows: 1fr; }
.pp-lijf.l2 { grid-template-rows: 1fr 1fr; }
.pp-lijf.l4 { grid-template: 1fr 1fr / 1fr 1fr; }
.pi { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5cqw; align-items: center; min-height: 0; }
.l1 .pi { grid-template-columns: 1fr; align-content: start; gap: 4cqw; }
.l4 .pi { grid-template-columns: 1fr; align-content: start; gap: 2cqw; }
.pi .im { background: #f3eee7; border-radius: 2cqw; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.l1 .pi .im { aspect-ratio: 4 / 3; }
.pi .im img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.pi .tp { font-size: 2.3cqw; letter-spacing: .14em; text-transform: uppercase; color: #6b645a; }
.pi .nm { font-size: 5.4cqw; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: 1cqw; }
.l1 .pi .nm { font-size: 7.4cqw; }
.l4 .pi .nm { font-size: 3.6cqw; }
.pi dl { display: grid; grid-template-columns: auto 1fr; gap: .9cqw 3cqw; margin: 3cqw 0 0; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 2.35cqw; }
.l4 .pi dl { font-size: 1.9cqw; margin-top: 1.4cqw; gap: .5cqw 2cqw; }
.pi dt { color: #6b645a; }
.pi dd { margin: 0; }
.pi .pr { margin-top: 3cqw; display: flex; align-items: baseline; gap: 1.6cqw; flex-wrap: wrap; }
.l4 .pi .pr { margin-top: 1.6cqw; }
.pi .pr b { font-size: 4.6cqw; letter-spacing: -.03em; color: var(--cat); }
.l4 .pi .pr b { font-size: 3.2cqw; }
.pi .pr span { font-size: 2.2cqw; color: #6b645a; }
.pi .cd { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 2cqw; color: #6b645a; margin-top: 1.4cqw; }
.pp-voet { display: flex; justify-content: space-between; gap: 2cqw; font-size: 2.1cqw; color: #6b645a; padding-top: 2.6cqw; border-top: .2cqw solid #e8e3db; }
.leeg-pg { display: grid; place-items: center; height: 100%; padding: 10cqw; text-align: center; color: #6b645a; font-size: 3.4cqw; }

/* overzicht en totaal */
.totalen { display: flex; flex-direction: column; height: 100%; padding: 6cqw; }
.totalen h4 { font-size: 6cqw; letter-spacing: -.03em; margin: 4cqw 0 3cqw; }
.totalen table { width: 100%; border-collapse: collapse; font-size: 2.4cqw; }
.totalen th { text-align: left; color: #6b645a; font-weight: 500; padding: 1.2cqw 0; border-bottom: .2cqw solid #e8e3db; }
.totalen td { padding: 1.3cqw 0; border-bottom: .2cqw solid #f0ece6; vertical-align: top; }
.totalen .r { text-align: right; font-family: 'Geist Mono', ui-monospace, monospace; white-space: nowrap; padding-left: 2cqw; }
.totalen .grijs { color: #6b645a; }
.totalen .som { margin-top: auto; display: flex; flex-direction: column; gap: 1cqw; align-items: flex-end; font-size: 2.8cqw; padding-bottom: 3cqw; }
.totalen .som div { display: flex; gap: 6cqw; }
.totalen .som b { color: var(--cat); }
.totalen .geldig { font-size: 2.1cqw; color: #6b645a; margin-top: 1cqw; }

/* achterkant */
.achter { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 8cqw 7cqw; background: #f6f3ee; }
.achter h4 { font-size: 8cqw; line-height: 1; letter-spacing: -.03em; }
.achter.klassiek h4, .klassiek .achter h4 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; }
.achter .bl { display: flex; flex-direction: column; gap: 2cqw; font-size: 2.8cqw; color: #3a3631; }
.achter .lg img { height: 8cqw; max-width: 56cqw; }
.achter .woordmerk { font-size: 5cqw; }
.achter .qr { width: 24cqw; height: 24cqw; background: #fff; padding: 1.6cqw; border-radius: 1.6cqw; flex: none; }
.achter .qr canvas, .achter .qr img { width: 100% !important; height: 100% !important; }
.achter .onder { display: flex; justify-content: space-between; align-items: end; gap: 4cqw; }
.achter .fijn { font-size: 1.9cqw; color: #6b645a; max-width: 52cqw; }