/* =========================================================
   SBD Type Shop: archief, detailpagina, kiezer, afrekenen, bestelling.
   Alles grijpt op de tokens en klassen van het thema (style.css/app.css):
   kleuren, typografie, knoppen, pijl-links, filterchips, secties.
   ========================================================= */

.typeshop-pagina { --typeshop-grootte: clamp(40px, 6.4vw, 104px); }
/* Detailpagina: subtieler, de sneden hoeven niet te schreeuwen. */
.typeshop-detail { --typeshop-grootte: clamp(26px, 3.1vw, 44px); }

/* ---------- Voorwoord op de shop-pagina ---------- */
/* Op de shoppagina's geen Type Shop-melding en geen zijlabel: je bent er al.
   Geen display:none: dat kapt lopende overgangen af (het paneel schuift
   zichzelf dicht via zijlabel.js). */
body.typeshop-pagina .site-notificatie,
body.typeshop-pagina .zijlabel { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.typeshop-intro { padding-bottom: 0; }
.typeshop-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px clamp(40px, 6vw, 120px);
	align-items: end;
}
.typeshop-intro__kop { margin-bottom: 28px; }
.typeshop-intro__lead { max-width: 36em; }
.typeshop-intro__lead p:last-child { margin-bottom: 0; }
.typeshop-intro__auteur { padding-bottom: 4px; }
.typeshop-intro__auteurblok { margin: 0; }
@media (max-width: 767px) {
	.typeshop-intro__grid { grid-template-columns: 1fr; }
}

/* ---------- Werkbalk van de tester ---------- */
.typeshop__balk {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--c-grey-80);
}
.typeshop__balk-label {
	display: block;
	font-size: var(--fs-subtitle);
	font-weight: 600;
	letter-spacing: var(--ls-subtitle, 3px);
	text-transform: uppercase;
	color: var(--c-grey-30);
	margin-bottom: 8px;
}
.typeshop__zin-label { flex: 1 1 320px; max-width: 760px; }
.typeshop__zin {
	display: block; /* geen inline line-box onder het veld: de onderlijn is dan de echte onderkant */
	width: 100%;
	font-family: var(--font-ui);
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	color: var(--c-white);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--c-grey-60);
	border-radius: 0;
	padding: 6px 0 10px;
	outline: none;
	transition: border-color var(--duration-fast);
}
.typeshop__zin::placeholder { color: var(--c-grey-60); }
/* Focus: alleen de onderlijn wordt groen, geen outline of gloed (de
   algemene focusstijl van het thema wint anders op specificiteit). */
.typeshop__zin:focus,
.typeshop__zin:focus-visible {
	outline: none;
	box-shadow: none;
	border-color: var(--c-green);
}
.typeshop__grootte-label { flex: 0 0 260px; margin-left: auto; }
.typeshop__grootte-waarde {
	display: inline-block;
	margin-left: 8px;
	color: var(--c-grey-60);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}
/* Slider in huisstijl: dunne grijze lijn, groene knop, groene lijn links. */
.typeshop__grootte {
	--vul: 30%;
	-webkit-appearance: none;
	appearance: none;
	display: block; /* geen inline line-box: anders zakt de wrapper onder de lijn */
	width: 100%;
	height: 24px;
	/* De lijn (2px, midden in de 24px) valt zo precies op de onderlijn van
	   het invoerveld ernaast: beide staan op flex-end van de balk. */
	margin: 0 0 -11px;
	background: transparent;
	cursor: pointer;
	position: relative;
	z-index: 1;
}
.typeshop__grootte:focus,
.typeshop__grootte:focus-visible { outline: none; box-shadow: none; }
.typeshop__grootte::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--c-green) 0 var(--vul), var(--c-grey-80) var(--vul) 100%);
}
.typeshop__grootte::-moz-range-track { height: 2px; border-radius: 2px; background: var(--c-grey-80); }
.typeshop__grootte::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--c-green); }
.typeshop__grootte::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -8px;
	border-radius: 7px 0 7px 0;
	background: var(--c-green);
	border: 2px solid var(--c-black);
	box-shadow: 0 0 0 1px var(--c-green);
	transition: transform var(--duration-fast) var(--cubic-default);
}
.typeshop__grootte::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 7px 0 7px 0;
	background: var(--c-green);
	border: 2px solid var(--c-black);
	box-shadow: 0 0 0 1px var(--c-green);
	transition: transform var(--duration-fast) var(--cubic-default);
}
.typeshop__grootte:hover::-webkit-slider-thumb,
.typeshop__grootte:focus-visible::-webkit-slider-thumb { transform: scale(1.35); }
.typeshop__grootte:hover::-moz-range-thumb,
.typeshop__grootte:focus-visible::-moz-range-thumb { transform: scale(1.35); }

/* Zwevende balk onderin: filters, sortering, weergave */
.typeshop__dock {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 90;
	max-width: calc(100% - 40px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
/* De onderrand verspringt mee met de zwevende CTA van het thema (typeshop.js
   zet bottom), in hetzelfde tempo als die knop. */
.typeshop__dock,
.typeshop-koopbalk { transition: bottom 0.55s var(--cubic-default), width 0.55s var(--cubic-default); }
@media (max-width: 599px) {
	.typeshop__dock { width: calc(100% - 32px); max-width: none; }
	/* Telefoon: alleen de categoriechips (Alles, Display, Sans, Serif); geen
	   sortering en geen weergavekeuze, die zijn daar niet nodig. */
	/* Even hoog als het cookie-icoon (45px) en op dezelfde onderlijn. */
	.typeshop__dock-inner { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; height: 45px; min-height: 0; padding: 0 16px; align-items: center; justify-content: flex-start; }
	.typeshop__dock-paneel,
	.typeshop__dock-paneel-inner { display: contents; }
	.typeshop__dock-knop,
	.typeshop__dock .typeshop__sorteer,
	.typeshop__dock .typeshop__weergave { display: none; }
	/* Chips altijd evenredig verdeeld over de beschikbare breedte: op volle
	   breedte oogt dat gecentreerd, naast het cookie-icoon blijft het in balans. */
	.typeshop__dock .typeshop__filters { flex: 1 1 auto; flex-wrap: nowrap; justify-content: space-around; align-items: center; height: 45px; gap: 0 12px; padding: 0; border-left: 0; }
	/* Specifieker dan de dock-regel verderop (line-height 24px), anders wint die. */
	.typeshop__dock .typeshop__filters .werkarchief__filter { display: block; height: 45px; line-height: 45px; padding: 0; background-position: 100% calc(100% - 9px); }
	.typeshop__dock .typeshop__filters .werkarchief__filter.is-actief { background-position: 0% calc(100% - 9px); }
	.typeshop-koopbalk { width: calc(100% - 32px); max-width: none; }
	.typeshop-koopbalk__inner { justify-content: space-between; }
}
/* Centreren via CSS alleen zonder gsap; met gsap zet typeshop.js xPercent,
   anders telt de CSS-translate dubbel mee. */
.typeshop__dock:not(.is-gsap),
.typeshop-koopbalk:not(.is-gsap) { transform: translateX(-50%); }
/* typeshop.js animeert met gsap (naar beneden uit, van beneden in); zonder
   gsap of bij reduced motion doet de klasse het werk. */
.typeshop__dock.is-zichtbaar { opacity: 1; visibility: visible; pointer-events: auto; }
.typeshop__dock.is-gsap { pointer-events: none; }
.typeshop__dock.is-gsap.is-zichtbaar { pointer-events: auto; }
.typeshop__dock-inner {
	display: flex;
	align-items: center;
	gap: 8px 32px;
	padding: 12px 24px;
	background: rgba(21, 21, 21, 0.86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
}
.typeshop__dock-inner::-webkit-scrollbar { display: none; }
/* Desktop: paneel en knop zijn onzichtbaar als structuur, de chips staan in
   de rij. Met een min-width-guard, anders wint dit van de telefoonregels. */
@media (min-width: 600px) {
	.typeshop__dock-paneel,
	.typeshop__dock-paneel-inner { display: contents; }
	.typeshop__dock-knop { display: none; }
}
.typeshop__dock .typeshop__filters,
.typeshop__dock .typeshop__sorteer { flex-wrap: nowrap; gap: 0 20px; }
.typeshop__dock .typeshop__sorteer { margin-left: 0; padding-left: 32px; border-left: 1px solid var(--c-grey-80); }
.typeshop__dock .typeshop__weergave { padding-left: 24px; border-left: 1px solid var(--c-grey-80); }
.typeshop__dock .werkarchief__filter { font-size: var(--fs-small); line-height: 24px; }

/* Weergave: lijst of raster */
.typeshop__weergave { display: flex; gap: 4px; align-self: flex-end; }
.typeshop__weergave-knop {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	color: var(--c-grey-30);
	cursor: pointer;
	transition: color var(--duration-fast), border-color var(--duration-fast);
}
.typeshop__weergave-knop:hover { color: var(--c-white); border-color: var(--c-grey-60); }
.typeshop__weergave-knop.is-actief { color: var(--c-green); border-color: var(--c-green); }
.typeshop__weergave-knop:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }

/* Label "Nieuw" bij fonts jonger dan 30 dagen */
.typeshop__nieuw {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
	padding: 2px 8px;
	font-family: var(--font-ui);
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-black);
	background: var(--c-green);
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
}
.typeshop__filters,
.typeshop__sorteer {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	align-items: baseline;
}
.typeshop__sorteer { margin-left: auto; }
.typeshop__filters .werkarchief__filter,
.typeshop__sorteer .werkarchief__filter,
.typeshop-detail__tools .werkarchief__filter {
	font-size: var(--fs-body);
	line-height: 26px;
	background-color: transparent;
	border: 0;
	padding-inline: 0;
	font-family: var(--font-ui);
	cursor: pointer;
	text-decoration: none;
}

/* ---------- Archiefrijen ---------- */
.typeshop__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}
.typeshop__rij { border-bottom: 1px solid var(--c-grey-80); }
.typeshop__rij-link {
	display: grid;
	grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
	gap: 16px 40px;
	align-items: center;
	padding: 28px 0;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.typeshop__rij-kop {
	display: grid;
	gap: 4px;
	align-self: start;
	padding-top: 0.2em;
}
.typeshop__naam {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	color: var(--c-white);
	transition: color var(--duration-fast);
}
.typeshop__meta {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--c-grey-30);
}
.typeshop__proef {
	display: block;
	font-size: var(--typeshop-grootte);
	line-height: 1.08;
	white-space: nowrap;
	overflow: hidden;
	color: var(--c-white);
	-webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
	mask-image: linear-gradient(to right, #000 88%, transparent);
	transition: color var(--duration-normal) var(--cubic-default), opacity 0.4s ease;
}
.typeshop__rij[data-font-url]:not(.is-geladen) .typeshop__proef { opacity: 0; }
.typeshop__rij-link:hover .typeshop__proef,
.typeshop__rij-link:focus-visible .typeshop__proef,
.typeshop__rij-link:hover .typeshop__naam { color: var(--c-green); }
.typeshop__rij-link:focus-visible { outline: 2px solid var(--c-green); outline-offset: 4px; }
.typeshop__leeg { margin-block: 60px; color: var(--c-grey-30); }

/* Rasterweergave: kaarten met de naam boven en de proefzin eronder */
.typeshop__lijst--raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 24px;
	padding-top: 32px;
}
.typeshop__lijst--raster .typeshop__rij {
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	transition: border-color var(--duration-fast);
}
.typeshop__lijst--raster .typeshop__rij:hover { border-color: var(--c-grey-60); }
.typeshop__lijst--raster .typeshop__rij-link {
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 24px 24px 28px;
	height: 100%;
	align-content: start;
}
.typeshop__lijst--raster .typeshop__rij-kop { padding-top: 0; }
/* In het raster staat het label rechtsboven op de kaart, los van de naam. */
.typeshop__lijst--raster .typeshop__rij { position: relative; }
.typeshop__lijst--raster .typeshop__nieuw { position: absolute; top: 18px; right: 18px; margin: 0; }
.typeshop__lijst--raster .typeshop__rij:has(.typeshop__nieuw) .typeshop__naam { padding-right: 72px; }
.typeshop__lijst--raster .typeshop__proef {
	font-size: calc(var(--typeshop-grootte) * 0.55);
	white-space: normal;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	-webkit-mask-image: none;
	mask-image: none;
	min-height: 2.2em;
}

/* Cursorpil: staat in het thema (app.css, cursor-pil.js). */
/* Footer-marquee van het thema: klikbaar naar het font in de shop */
.site-footer .marquee.is-typeshop-link { cursor: pointer; }

/* ---------- Detailpagina ---------- */
.typeshop-detail__hero { padding-bottom: 0; }
.typeshop-detail__terug { margin: 0 0 24px; display: flex; align-items: center; gap: 16px; }
.typeshop-terugbalk { padding-top: 28px; margin-bottom: -28px; }
.pijl-link--terug .pijl-link__pijl { transform: none; }
.pijl-link--terug:hover .pijl-link__pijl { transform: translate(-3px, 0); }

/* Koopbalk: zwevend onderin, zelfde pil als de balk in het archief.
   typeshop.js animeert hem met gsap (van onderen in, naar onderen uit). */
.typeshop-koopbalk {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 90;
	max-width: calc(100% - 40px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.typeshop-koopbalk.is-zichtbaar { opacity: 1; visibility: visible; pointer-events: auto; }
.typeshop-koopbalk.is-gsap { pointer-events: none; }
.typeshop-koopbalk.is-gsap.is-zichtbaar { pointer-events: auto; }
.typeshop-koopbalk__inner {
	display: flex;
	align-items: center;
	gap: 16px 28px;
	padding: 10px 10px 10px 24px;
	background: rgba(21, 21, 21, 0.86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	width: auto;
	max-width: none;
	padding-inline: 24px 10px;
}
.typeshop-koopbalk__naam {
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1;
	max-width: 260px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.typeshop-koopbalk__totaal { font-size: var(--fs-small); color: var(--c-grey-30); white-space: nowrap; }
.typeshop-koopbalk__totaal strong { font-size: var(--fs-body); color: var(--c-white); font-weight: 400; margin: 0 4px; }
.typeshop-koopbalk__knop { flex: 0 0 auto; }
@media (max-width: 600px) {
	.typeshop-koopbalk__totaal { display: none; }
	.typeshop-koopbalk__inner { gap: 12px; padding-left: 16px; }
	.typeshop-koopbalk__naam { max-width: 140px; }
}
/* Nooit kunstmatig vet: elk weight is een eigen bestand. Zonder deze regel
   zet Safari op 600 en zwaarder een nep-vet bovenop het echte weight zodra
   het bestand geen bold-vlag draagt (fsSelection/macStyle), en lijken
   SemiBold, Bold en Black op elkaar. */
.typeshop-detail__titel,
.typeshop-detail__snede-proef,
.typeshop-detail__glyphs,
.typeshop-detail__glyph-groot,
.typeshop-detail__glyph-popover-teken,
.typeshop-kiezer__snede-naam,
.typeshop-afrekenen__font,
[data-typeshop-proef] {
	font-synthesis: none;
}

.typeshop-detail__titel {
	font-size: clamp(56px, 11vw, 176px);
	line-height: 0.95;
	margin: 0 0 24px;
	overflow-wrap: anywhere;
}
.typeshop-detail__tagline { max-width: 40em; margin-bottom: 0; }
/* Boven de fontnaam (wens René): je ziet meteen wat je krijgt, boven de vouw. */
.typeshop-detail__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
	gap: 12px 48px;
	margin: 0 0 28px;
	padding: 0;
}
.typeshop-detail__meta > div { display: grid; gap: 4px; }
.typeshop-detail__meta dt {
	font-size: var(--fs-subtitle);
	font-weight: 600;
	letter-spacing: var(--ls-subtitle, 3px);
	text-transform: uppercase;
	color: var(--c-grey-30);
}
.typeshop-detail__meta dd { margin: 0; font-size: var(--fs-body); }

/* Geen align-items start: de zijkolom moet de volle rijhoogte houden, anders
   heeft de sticky kiezer geen ruimte om te plakken (zelfde les als het
   formulierblok van het thema). */
.typeshop-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
	gap: 48px clamp(40px, 5vw, 96px);
}
.typeshop-detail__hoofd { min-width: 0; display: grid; gap: clamp(56px, 7vw, 110px); }
/* Sticky alleen als de kolom in de viewport past (typeshop.js zet is-vast);
   anders scrolt hij mee en neemt de koopbalk onderin het over. */
.typeshop-detail__sticky { position: static; }
.typeshop-detail__sticky.is-vast { position: sticky; top: 130px; }
.typeshop-detail__h2 {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	margin: 0 0 24px;
}
.typeshop-detail__sectiekop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: 28px;
}
.typeshop-detail__sectiekop .typeshop-detail__h2 { margin-bottom: 0; }
/* Twee regels: uitlijning en daaronder de OpenType-features (wens Nick). */
.typeshop-detail__tools {
	display: grid;
	gap: 10px;
	padding: 20px 0;
	border-bottom: 1px solid var(--c-grey-80);
}
.typeshop-detail__tools-rij {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 20px;
}
.typeshop-detail__tools .typeshop__balk-label { margin: 0 8px 0 0; }
.typeshop-detail__tools .werkarchief__filter[aria-pressed="true"] {
	color: var(--c-green);
	background-position: 0% 100%;
	background-size: 100% 1px;
}
.typeshop-detail__sneden { list-style: none; margin: 0; padding: 0; }
.typeshop-detail__snede {
	display: grid;
	grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
	gap: 12px 32px;
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid var(--c-grey-80);
}
.typeshop-detail__snede-naam {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--c-grey-30);
	align-self: start;
	padding-top: 0.4em;
}
.typeshop-detail__snede-naam span { color: var(--c-grey-60); margin-left: 6px; }
.typeshop-detail__snede-proef {
	font-size: var(--typeshop-grootte);
	line-height: 1.08;
	min-height: 1.1em;
	outline: none;
	caret-color: var(--c-green);
	overflow-wrap: anywhere;
	transition: color var(--duration-fast);
}
.typeshop-detail__snede-proef:focus { color: var(--c-green); }
/* Even breed als de tekenset eronder, zodat de linkerkolom strak uitlijnt (wens Nick). */
.typeshop-detail__tekst { max-width: none; }
.typeshop-detail__tekst p:last-child { margin-bottom: 0; }

.typeshop-detail__snedekeuze select,
.typeshop-kiezer select {
	font-family: var(--font-ui);
	font-size: var(--fs-body);
	color: var(--c-white);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--c-grey-60);
	border-radius: 0;
	padding: 6px 28px 8px 0;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2 4l4 4 4-4' stroke='%2300ffc7' stroke-width='1.4'/></svg>");
	background-repeat: no-repeat;
	background-position: right 4px center;
	cursor: pointer;
	width: 100%;
}
.typeshop-detail__snedekeuze select option,
.typeshop-kiezer select option { color: var(--c-black); }
.typeshop-detail__snedekeuze select:focus,
.typeshop-detail__snedekeuze select:focus-visible,
.typeshop-kiezer select:focus,
.typeshop-kiezer select:focus-visible { outline: none; box-shadow: none; border-color: var(--c-green); }
.typeshop-detail__snedekeuze { display: grid; gap: 4px; min-width: 200px; }
.typeshop-detail__glyph-groot {
	display: grid;
	place-items: center;
	height: clamp(180px, 24vw, 320px);
	font-size: clamp(120px, 16vw, 220px);
	line-height: 1;
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	margin-bottom: 12px;
}
.typeshop-detail__glyphs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
	gap: 6px;
}
.typeshop-detail__glyph {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	font: inherit;
	font-size: 28px;
	color: var(--c-white);
	background: transparent;
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	cursor: pointer;
	transition: border-color var(--duration-fast), color var(--duration-fast);
}
.typeshop-detail__glyph:hover,
.typeshop-detail__glyph.is-actief { border-color: var(--c-green); color: var(--c-green); }
/* Popover met het teken boven het aangewezen vakje, als het grote teken
   bovenaan uit beeld is. Het raster-blok is het referentiekader. */
.typeshop-detail__tekenset { position: relative; }
.typeshop-detail__glyph-popover {
	position: absolute;
	z-index: 5;
	width: 112px;
	height: 112px;
	display: grid;
	place-items: center;
	background: #1d1e1d;
	border: 1px solid var(--c-green);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -100%) scale(0.9);
	transform-origin: 50% 100%;
	transition: opacity 0.18s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.typeshop-detail__glyph-popover.is-onder { transform: translate(-50%, 0) scale(0.9); transform-origin: 50% 0; }
.typeshop-detail__glyph-popover.is-zichtbaar { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.typeshop-detail__glyph-popover.is-onder.is-zichtbaar { transform: translate(-50%, 0) scale(1); }
.typeshop-detail__glyph-popover::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 10px;
	height: 10px;
	background: #1d1e1d;
	border-right: 1px solid var(--c-green);
	border-bottom: 1px solid var(--c-green);
	transform: translateX(-50%) rotate(45deg);
}
.typeshop-detail__glyph-popover.is-onder::after { bottom: auto; top: -6px; transform: translateX(-50%) rotate(-135deg); }
.typeshop-detail__glyph-popover-teken { font-size: 64px; line-height: 1; color: var(--c-white); }
/* Desktop: ruimer kader met een groter teken. */
@media (min-width: 992px) {
	.typeshop-detail__glyph-popover { width: 168px; height: 168px; }
	.typeshop-detail__glyph-popover-teken { font-size: 104px; }
}
@media (prefers-reduced-motion: reduce) { .typeshop-detail__glyph-popover { transition: none; } }
.typeshop-detail__glyph:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }

/* Verhaal en inspiratie */
.typeshop-detail__verhaal { display: grid; gap: 36px; }
.typeshop-detail__verhaal .typeshop-detail__h2 { margin-bottom: 0; }
/* Auteur als ondertekening onder het verhaal */
.typeshop-detail__auteur { margin: 4px 0 0; }
/* Onder de tweekoloms-grid, op de volle containerbreedte: inspiratieslider,
   "Gebruikt in" en de gerelateerde fonts. De slider heeft hier de hoogte van
   de case-slider van het thema, dus de beelden komen groot in beeld. */
.typeshop-detail__breed {
	display: grid;
	gap: clamp(56px, 7vw, 110px);
	margin-top: clamp(56px, 7vw, 110px);
}
.typeshop-detail__inspiratie .case-slider { margin-top: 0; }
.typeshop-detail__slider .case-slider__viewport { border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0; overflow: hidden; }
.typeshop-detail__specimen { display: grid; gap: 32px; }
.typeshop-detail__specimen-item { margin: 0; }
.typeshop-detail__specimen-beeld {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
}
.typeshop-detail__onderschrift {
	margin-top: 12px;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	color: var(--c-grey-30);
}
.typeshop-detail__projectlijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
}
.typeshop-detail__project-link { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.typeshop-detail__project-beeld img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
}
.typeshop-detail__project-titel { font-size: var(--fs-body); transition: color var(--duration-fast); }
.typeshop-detail__project-link:hover .typeshop-detail__project-titel { color: var(--c-green); }
.typeshop-detail__gerelateerd .typeshop__lijst { border-top: 1px solid var(--c-grey-80); }
.typeshop-detail__gerelateerd { --typeshop-grootte: clamp(32px, 4.5vw, 72px); }

/* ---------- Licentiekiezer ---------- */
.typeshop-kiezer {
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	padding: clamp(24px, 2.5vw, 36px);
	display: grid;
	gap: 24px;
}
.typeshop-kiezer__kop { font-size: var(--fs-h5); line-height: var(--lh-h5); margin: 0; }
.typeshop-kiezer fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.typeshop-kiezer legend { padding: 0; }
/* Native radio's en checkboxes blijven voor toetsenbord en screenreader,
   maar onzichtbaar; het vinkje in de signatuurvorm doet het beeld. */
.typeshop-kiezer input[type="radio"],
.typeshop-kiezer input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
/* Het vinkje heeft de bladvorm van de knoppen: twee scherpe en twee ronde
   hoeken, in dezelfde verhouding als de knop (radius rond 40% van de hoogte). */
.typeshop-kiezer__vink {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	display: grid;
	place-items: center;
	border: 1px solid var(--c-grey-60);
	border-radius: 10px 0 10px 0;
	background: transparent;
	transition: background 0.25s var(--cubic-default), border-color 0.25s var(--cubic-default), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.typeshop-kiezer__vink::after {
	content: "";
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--c-black);
	border-bottom: 2px solid var(--c-black);
	transform: rotate(-45deg) scale(0);
	transform-origin: center;
	margin-top: -3px;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.is-gekozen .typeshop-kiezer__vink { background: var(--c-green); border-color: var(--c-green); }
.is-gekozen .typeshop-kiezer__vink::after { transform: rotate(-45deg) scale(1); }
.typeshop-kiezer__type:hover .typeshop-kiezer__vink,
.typeshop-kiezer__snede:hover .typeshop-kiezer__vink { border-color: var(--c-green); transform: scale(1.08); }
.typeshop-kiezer__type:has(input:focus-visible),
.typeshop-kiezer__snede:has(input:focus-visible) { outline: 2px solid var(--c-green); outline-offset: 3px; }

/* Licentietypen als keuzekaarten; meerdere tegelijk te kiezen (Desktop,
   Web en/of App), elk met een eigen omvang die openklapt zodra de kaart
   aan staat. */
.typeshop-kiezer__typen { display: grid; gap: 12px; }
.typeshop-kiezer__hint { margin: -6px 0 2px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-grey-30); }
.typeshop-kiezer__type {
	position: relative;
	display: grid;
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	transition: border-color var(--duration-fast), background var(--duration-fast);
}
/* Raster: naam en prijs op de eerste regel, omschrijving en "per weight"
   op de tweede, zodat ze op dezelfde lijn staan (wens Rene). */
.typeshop-kiezer__type-kop {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	column-gap: 14px;
	row-gap: 2px;
	/* Bovenkant, niet baseline: met baseline schoof de omschrijving een regel
	   onder "per weight". Beide staan op --fs-small, dus de eerste regels
	   lopen gelijk. */
	align-items: start;
	padding: 16px 18px;
	cursor: pointer;
}
.typeshop-kiezer__type-kop .typeshop-kiezer__vink { grid-column: 1; grid-row: 1 / span 2; }
.typeshop-kiezer__type-prijs small { line-height: var(--lh-small); }
.typeshop-kiezer__type-tekst,
.typeshop-kiezer__type-prijs { display: contents; }
.typeshop-kiezer__type-naam { grid-column: 2; grid-row: 1; }
.typeshop-kiezer__type-uitleg { grid-column: 2; grid-row: 2; }
.typeshop-kiezer__type-bedrag { grid-column: 3; grid-row: 1; text-align: right; }
.typeshop-kiezer__type-prijs small { grid-column: 3; grid-row: 2; text-align: right; }
/* Specifieker dan .typeshop-kiezer__staffel verderop, anders wint die display: grid. */
.typeshop-kiezer__type .typeshop-kiezer__type-staffel { display: none; padding: 0 18px 16px 56px; }
.typeshop-kiezer__type.is-gekozen .typeshop-kiezer__type-staffel { display: grid; }
.typeshop-kiezer__type:hover { border-color: var(--c-grey-60); }
.typeshop-kiezer__type.is-gekozen { border-color: var(--c-green); background: rgba(0, 255, 199, 0.06); }
.typeshop-kiezer__snede {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 12px 0;
	border-top: 1px solid var(--c-grey-80);
	cursor: pointer;
}
.typeshop-kiezer__sneden .typeshop-kiezer__snede:first-of-type { border-top: 0; }
.typeshop-kiezer__type-naam { font-size: var(--fs-body); }
.typeshop-kiezer__type-uitleg { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-grey-30); }
.typeshop-kiezer__type-bedrag {
	font-size: var(--fs-body);
	white-space: nowrap;
}
.typeshop-kiezer__type-prijs small { white-space: nowrap; }
.typeshop-kiezer__type-prijs small { font-size: var(--fs-small); color: var(--c-grey-30); }
.typeshop-kiezer__snede-naam { flex: 1 1 auto; font-size: var(--fs-body); line-height: 1.35; }
.typeshop-kiezer__snede--familie .typeshop-kiezer__snede-naam { font-family: var(--font-ui); }
.typeshop-kiezer__snede-prijs { font-size: var(--fs-small); color: var(--c-grey-30); white-space: nowrap; }
.typeshop-kiezer__snede.is-uit .typeshop-kiezer__snede-naam,
.typeshop-kiezer__snede.is-uit .typeshop-kiezer__snede-prijs { opacity: 0.5; transition: opacity var(--duration-fast); }
.typeshop-kiezer__staffel { display: grid; gap: 4px; }
.typeshop-kiezer__totaal {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 12px;
	align-items: baseline;
	padding-top: 20px;
	border-top: 1px solid var(--c-grey-60);
}
.typeshop-kiezer__totaal-label { font-size: var(--fs-body); }
.typeshop-kiezer__totaal-bedrag { font-size: var(--fs-h5); line-height: 1; font-weight: 400; }
.typeshop-kiezer__totaal-noot { grid-column: 2; text-align: right; font-size: var(--fs-small); color: var(--c-grey-30); }
.typeshop-kiezer__fout { margin: 0; color: #ff8a8a; font-size: var(--fs-small); }
/* De themaknop is inline-grid; als blok-grid rekt hij tot de volle breedte
   zonder dat het rollende label zijn opbouw verliest. */
.typeshop-kiezer__knop.button { display: grid; width: 100%; }
.typeshop-kiezer__snede-prijs { margin-left: auto; align-self: center; font-variant-numeric: tabular-nums; }
.typeshop-kiezer__info { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-grey-30); }
.typeshop-kiezer__info p:last-child { margin-bottom: 0; }
.typeshop-kiezer__proef { margin: 0; }
.typeshop-kiezer--dicht p { color: var(--c-grey-30); margin: 0; }
/* Aanpasbare statustekst (Instellingen > Teksten): meerdere alinea's en links. */
.typeshop-kiezer__tekst p + p { margin-top: 0.8em; }
.typeshop-kiezer__tekst a { color: var(--c-green); }

/* ---------- Afrekenen ---------- */
.typeshop-afrekenen__grid {
	display: grid;
	grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
	gap: 48px clamp(40px, 5vw, 96px);
}
.typeshop-afrekenen__sticky { position: static; }
.typeshop-afrekenen__sticky.is-vast { position: sticky; top: 130px; }
.typeshop-afrekenen__samenvatting {
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	padding: clamp(24px, 2.5vw, 36px);
	display: grid;
	gap: 20px;
}
.typeshop-afrekenen__samenvatting--leeg { grid-column: 1 / -1; max-width: 640px; }
.typeshop-afrekenen__label { margin: 0; color: var(--c-grey-30); }
.typeshop-afrekenen__font { font-size: clamp(36px, 4vw, 56px); line-height: 1; margin: 0; overflow-wrap: anywhere; }
.typeshop-afrekenen__gegevens,
.typeshop-bestelling__gegevens { margin: 0; display: grid; }
.typeshop-afrekenen__gegevens > div,
.typeshop-bestelling__gegevens > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--c-grey-80);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
.typeshop-afrekenen__gegevens dt,
.typeshop-bestelling__gegevens dt { color: var(--c-grey-30); }
.typeshop-afrekenen__gegevens dd,
.typeshop-bestelling__gegevens dd { margin: 0; text-align: right; }
.typeshop-afrekenen__regel dt { padding-left: 16px; }
.typeshop-afrekenen__blok dt { color: inherit; }
.typeshop-afrekenen__subtotaal dd { font-variant-numeric: tabular-nums; }
.typeshop-afrekenen__totaal { font-size: var(--fs-body); }
.typeshop-afrekenen__totaal dt { color: var(--c-white); }
.typeshop-afrekenen__noot { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-grey-30); }
.typeshop-afrekenen__links { margin: 0; display: grid; gap: 10px; justify-items: start; }
.typeshop-afrekenen__form { min-width: 0; }

/* ---------- Bestelling ---------- */
.typeshop-bestelling__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
	gap: 48px clamp(40px, 6vw, 120px);
}
.typeshop-bestelling__paneel { display: grid; gap: 22px; min-width: 0; align-content: start; }
.typeshop-bestelling__paneel .subtitle { margin: 0; color: var(--c-green); }
.typeshop-bestelling__kop { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0; max-width: 16em; }
/* "Bedankt, Jip" in het gekochte font: de koper ziet meteen wat hij heeft. */
.typeshop-bestelling__bedankt {
	font-size: clamp(48px, 7vw, 120px);
	line-height: 1;
	margin: 8px 0 4px;
	overflow-wrap: anywhere;
	color: var(--c-white);
}
.typeshop-bestelling__font { font-size: clamp(40px, 5vw, 72px); line-height: 1; margin: 0; }
.typeshop-bestelling__knop { margin: 8px 0 0; }
.typeshop-bestelling__noot { margin: 0; color: var(--c-grey-30); max-width: 60ch; }
.typeshop-bestelling__knoppen { margin: 8px 0 0; }
/* Stappenblok van het thema, hier zonder scroll-dimming: alles staat aan. */
.typeshop-bestelling__stappen { margin-top: 24px; }
.typeshop-bestelling__stappen .stappen__tekst p:last-child { margin-bottom: 0; }
.typeshop-bestelling__gegevens { margin-top: 20px; }
.typeshop-bestelling__gegevens > div { font-size: var(--fs-body); line-height: var(--lh-body); padding: 12px 0; }
.typeshop-bestelling__gegevens dd small { color: var(--c-grey-30); font-size: var(--fs-small); }
.typeshop-bestelling__terug { margin: 4px 0 0; }
.typeshop-bestelling__preview { margin-bottom: 32px; }
/* Persoonlijk bedankje, rechts en sticky */
.typeshop-bestelling__zij { min-width: 0; }
.typeshop-bestelling__sticky { position: static; }
.typeshop-bestelling__sticky.is-vast { position: sticky; top: 130px; }
.typeshop-bestelling__bedankje {
	border: 1px solid var(--c-grey-80);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	padding: clamp(24px, 2.5vw, 36px);
	display: grid;
	gap: 22px;
}
.typeshop-bestelling__bedankje .subtitle { margin: 0; color: var(--c-grey-30); }
.typeshop-bestelling__bedankje-tekst {
	font-family: var(--font-lead);
	font-size: clamp(20px, 1.5vw, 24px);
	line-height: 1.35;
}
.typeshop-bestelling__bedankje-tekst p:last-child { margin-bottom: 0; }
.typeshop-bestelling__bedankje .auteur { margin: 0; }
@media (max-width: 991px) {
	.typeshop-bestelling__grid { grid-template-columns: 1fr; }
	.typeshop-bestelling__sticky { position: static; }
	.typeshop-bestelling__gegevens > div { font-size: var(--fs-small); line-height: var(--lh-small); }
}

/* ---------- Meldingen ---------- */
.typeshop-melding {
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--c-grey-60);
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
}
.typeshop-melding--fout { border-color: #ff8a8a; color: #ffb3b3; }
.typeshop-melding--info { border-color: var(--c-grey-60); color: var(--c-grey-30); }

/* ---------- Lichte secties (als een blok erboven wit is) ---------- */
.section--bg-wit .typeshop__zin,
.section--bg-wit .typeshop__naam,
.section--bg-wit .typeshop__proef { color: var(--c-black); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.typeshop-pagina { --typeshop-grootte: clamp(34px, 9vw, 64px); }
	.typeshop__rij-link { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
	.typeshop__sorteer { margin-left: 0; }
	.typeshop-detail__grid,
	.typeshop-afrekenen__grid { grid-template-columns: 1fr; }
	.typeshop-detail__sticky,
	.typeshop-afrekenen__sticky { position: static; }
	.typeshop-detail__zij { order: -1; }
	.typeshop-detail__snede { grid-template-columns: 1fr; gap: 6px; }
	.typeshop-detail__glyphs { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
	.typeshop-detail__glyph { font-size: 22px; }
}
@media (max-width: 600px) {
	.typeshop__balk { gap: 16px 24px; }
	.typeshop__grootte-label { flex-basis: 100%; }
	/* Kaart op smal scherm: vinkje links over twee rijen, tekst en prijs
	   onder elkaar rechts ervan. */
	.typeshop-kiezer__type-kop { grid-template-columns: 24px minmax(0, 1fr); row-gap: 6px; }
	.typeshop-kiezer__type-kop .typeshop-kiezer__vink { grid-row: 1 / span 3; }
	.typeshop-kiezer__type-prijs { display: flex; grid-column: 2; grid-row: 3; align-items: baseline; gap: 6px; }
	.typeshop-kiezer__type-bedrag,
	.typeshop-kiezer__type-prijs small { text-align: left; }
	.typeshop-kiezer__type .typeshop-kiezer__type-staffel { padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.typeshop__proef,
	.typeshop-detail__glyph { transition: none; }
}

/* Tekens die de gekozen weight niet heeft (typeshop.js, SBDTS_Fontinfo). */
.typeshop-detail__glyph[hidden] {
	display: none;
}

/* Detail op mobiel: de grootte-slider onder de uitlijning en OpenType-
   features, direct boven de proefregels (wens Rene: de features stonden
   er anders tussen en zaten de slider in de weg). De balk wordt daarvoor
   "doorzichtig" (display: contents) zodat zin en slider los te ordenen zijn. */
@media (max-width: 767px) {
	.typeshop-detail__tester { display: flex; flex-direction: column; }
	.typeshop-detail__tester .typeshop__balk { display: contents; }
	.typeshop-detail__tester .typeshop__zin-label { order: 1; flex: 0 0 auto; max-width: none; padding-bottom: 20px; border-bottom: 1px solid var(--c-grey-80); }
	.typeshop-detail__tester .typeshop-detail__tools { order: 2; }
	.typeshop-detail__tester .typeshop__grootte-label { order: 3; flex: 0 0 auto; margin-left: 0; padding: 20px 0; border-bottom: 1px solid var(--c-grey-80); }
	.typeshop-detail__tester .typeshop-detail__sneden,
	.typeshop-detail__tester > .typeshop__leeg { order: 4; }
}