/* Frontaal UI · componentklassen voor de server-side componenten in src/ui/.
   Vertaling van design-system/components/ (React, inline styles) naar klassen met het voorvoegsel fr-.
   Regels (gecontroleerd door test/ui-css.test.ts):
   - enkel var(--…) uit de tokens: geen hexwaarden, geen losse px buiten @media;
   - alle maten op het 4px-raster: tokens of calc(var(--sp-1) * n);
   - hover verandert enkel kleur of randkleur, met var(--transition-control);
   - geen schaduwen (behalve --shadow-overlay op Dialog), geen verlopen, geen blur.
   Afwijkingen tegenover de export (off-grid waarden naar boven afgerond) staan in README.md. */

/* ---------- Layout ---------- */
.fr-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--page-pad); }
.fr-page { padding-top: var(--sp-8); padding-bottom: var(--sp-20); }
.fr-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.fr-stack--tight { gap: var(--sp-2); }
.fr-mt-4 { margin-top: var(--sp-4); }
.fr-mt-8 { margin-top: var(--sp-8); }
.fr-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.fr-row--between { justify-content: space-between; }
.fr-muted { color: var(--text-secondary); }
.fr-lead { font-size: var(--fs-body); color: var(--text-secondary); max-width: 48ch; }
.fr-h1 { font-size: var(--fs-h1); }
.fr-visually-hidden { position: absolute; width: var(--bw-hairline); height: var(--bw-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Core · Icon ---------- */
.fr-icon { display: block; flex: 0 0 auto; color: var(--text-primary); }
.fr-icon--inverse { color: var(--text-inverse); }
.fr-icon--muted { color: var(--text-muted); }
.fr-icon--signal { color: var(--signal-500); }

/* ---------- Core · Button ---------- */
.fr-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-core); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); white-space: nowrap; text-decoration: none; cursor: pointer;
  border: var(--bw-hairline) solid transparent; border-radius: var(--radius-0);
  transition: var(--transition-control);
}
.fr-button--sm { height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-micro); }
.fr-button--md { height: var(--control-h); padding: 0 var(--sp-5); font-size: var(--fs-caption); }
.fr-button--lg { height: var(--control-h-lg); padding: 0 var(--sp-6); font-size: var(--fs-body-sm); }
.fr-button--primary { background: var(--ink-900); color: var(--text-inverse); border-color: var(--ink-900); }
.fr-button--primary:hover { background: var(--ink-700); border-color: var(--ink-700); }
.fr-button--secondary { background: transparent; color: var(--ink-900); border-color: var(--border-strong); }
.fr-button--secondary:hover { background: var(--ink-900); color: var(--text-inverse); }
.fr-button--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.fr-button--ghost:hover { color: var(--ink-900); background: var(--steel-100); }
.fr-button--signal { background: var(--signal-500); color: var(--ink-900); border-color: var(--signal-500); }
.fr-button--signal:hover { background: var(--signal-600); border-color: var(--signal-600); }
.fr-button--inverse { background: var(--white); color: var(--ink-900); border-color: var(--white); }
.fr-button--inverse:hover { background: var(--steel-150); border-color: var(--steel-150); }
.fr-button:active { background: var(--ink-1000); border-color: var(--ink-1000); color: var(--text-inverse); }
.fr-button--signal:active, .fr-button--inverse:active { color: var(--ink-900); }
.fr-button--full { width: 100%; }
.fr-button[disabled], .fr-button[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
/* In base.css krijgt elke link een onderlijn; knoppen en kaarten niet. */
a.fr-button, a.fr-card-link, .fr-nav a, .fr-logo-link, .fr-filter a { border-bottom-color: transparent; }

/* ---------- Core · IconButton ---------- */
.fr-icon-button {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: var(--bw-hairline) solid transparent; border-radius: var(--radius-0); background: transparent;
  transition: var(--transition-control);
}
.fr-icon-button--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.fr-icon-button--md { width: var(--control-h); height: var(--control-h); }
.fr-icon-button--lg { width: var(--control-h-lg); height: var(--control-h-lg); }
.fr-icon-button--secondary { border-color: var(--border-default); }
.fr-icon-button--secondary:hover, .fr-icon-button--ghost:hover { background: var(--steel-100); }
.fr-icon-button--primary { background: var(--ink-900); border-color: var(--ink-900); }
.fr-icon-button--primary:hover { background: var(--ink-700); }
.fr-icon-button[disabled] { opacity: 0.38; cursor: not-allowed; }

/* ---------- Core · Logo ---------- */
/* --fr-logo-size wordt door de component gezet (standaard 40, zoals de export). */
.fr-logo { --fr-logo-size: calc(var(--sp-1) * 10); display: flex; align-items: center; gap: calc(var(--fr-logo-size) * 0.22); }
.fr-logo--stacked { flex-direction: column; align-items: flex-start; }
.fr-logo__mark { display: block; height: var(--fr-logo-size); width: auto; flex: 0 0 auto; }
.fr-logo__text { display: flex; flex-direction: column; gap: var(--sp-1); }
.fr-logo__wordmark {
  font-family: var(--font-core); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark); font-size: calc(var(--fr-logo-size) * 0.44); line-height: 1; color: var(--ink-900);
}
.fr-logo__sender { font-family: var(--font-core); font-size: max(var(--fs-micro), calc(var(--fr-logo-size) * 0.17));
  letter-spacing: var(--tracking-caps); color: var(--steel-500); line-height: var(--lh-dense); }
.fr-logo--inverse .fr-logo__wordmark { color: var(--white); }
.fr-logo--inverse .fr-logo__sender { color: var(--steel-300); }

/* ---------- Core · Badge ---------- */
.fr-badge {
  display: inline-flex; align-items: center; height: var(--sp-6); padding: 0 var(--sp-2);
  font-family: var(--font-core); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label); white-space: nowrap; line-height: 1;
  border: var(--bw-hairline) solid; border-radius: var(--radius-0);
}
.fr-badge--neutral { background: var(--steel-100); color: var(--text-secondary); border-color: var(--border-hairline); }
.fr-badge--ink { background: var(--ink-900); color: var(--text-inverse); border-color: var(--ink-900); }
.fr-badge--signal { background: var(--signal-500); color: var(--ink-900); border-color: var(--signal-500); }
.fr-badge--ok { background: transparent; color: var(--status-ok); border-color: var(--status-ok); }
.fr-badge--alert { background: transparent; color: var(--status-alert); border-color: var(--status-alert); }
.fr-badge--hold { background: transparent; color: var(--status-hold); border-color: var(--status-hold); }

/* ---------- Core · Tag ---------- */
.fr-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: calc(var(--sp-1) * 7); padding: 0 var(--sp-2);
  font-family: var(--font-core); font-size: var(--fs-caption); letter-spacing: var(--tracking-none);
  background: var(--white); color: var(--text-primary); border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--radius-0); text-decoration: none;
}
.fr-tag--active { background: var(--ink-900); color: var(--text-inverse); border-color: var(--ink-900); }
.fr-tag__remove { display: inline-flex; color: inherit; border-bottom: 0; }
.fr-tag__remove .fr-icon { color: inherit; }

/* ---------- Core · Rule ---------- */
.fr-rule { border: 0; margin: 0; width: 100%; border-top: var(--bw-hairline) solid var(--border-hairline); }
.fr-rule--mid { border-top-color: var(--border-default); }
.fr-rule--strong { border-top-width: var(--bw-strong); border-top-color: var(--border-strong); }
.fr-rule--dashed { border-top-style: dashed; }

/* ---------- Core · SectionHeader ---------- */
.fr-section-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap;
  border-bottom: var(--bw-strong) solid var(--border-strong); padding-bottom: var(--sp-3);
}
.fr-section-header__titles { display: flex; flex-direction: column; gap: var(--sp-2); }
.fr-section-header__title { font-size: var(--fs-h2); letter-spacing: var(--tracking-display); }
.fr-section-header__side { display: flex; align-items: center; gap: var(--sp-4); }
.fr-eyebrow {
  font-family: var(--font-core); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-secondary);
}
.fr-meta { font-family: var(--font-mono); font-size: var(--fs-code-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ---------- Data · TypeNumber ---------- */
.fr-type-number {
  display: inline-flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium);
  font-size: var(--fs-code); color: var(--text-primary);
}
.fr-type-number--sm { font-size: var(--fs-code-sm); }
.fr-type-number--lg { font-size: var(--fs-h3); }
.fr-type-number__qty { color: var(--text-secondary); }
.fr-type-number--inverse { color: var(--text-inverse); }
.fr-type-number--inverse .fr-type-number__qty { color: var(--steel-300); }

/* ---------- Data · SpecTable ---------- */
.fr-spec-table { width: 100%; font-size: var(--fs-body-sm); }
.fr-spec-table th {
  text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw-strong) solid var(--border-strong);
  font-family: var(--font-core); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-secondary); white-space: nowrap;
}
.fr-spec-table td {
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw-hairline) solid var(--border-hairline);
  font-family: var(--font-core); font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.fr-spec-table--dense th, .fr-spec-table--dense td { padding: var(--sp-2) var(--sp-3); }
.fr-spec-table .fr-align-right { text-align: right; }
.fr-spec-table .fr-mono { font-family: var(--font-mono); }

/* ---------- Data · SpecList ---------- */
.fr-spec-list { display: grid; grid-template-columns: repeat(var(--fr-columns, 1), 1fr); gap: 0 var(--sp-8); margin: 0; }
.fr-spec-list__row {
  display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0;
  border-bottom: var(--bw-hairline) solid var(--border-hairline);
}
.fr-spec-list dt { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-secondary); }
.fr-spec-list dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-code-sm); font-variant-numeric: tabular-nums;
  color: var(--text-primary); text-align: right;
}
.fr-spec-list dd.fr-spec-list__text { font-family: var(--font-core); }

/* ---------- Data · DimensionFrame ---------- */
.fr-dimension { display: flex; flex-direction: column; gap: var(--sp-2); }
.fr-dimension__row { display: flex; gap: var(--sp-3); }
.fr-dimension__side {
  width: calc(var(--sp-1) * 9); flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end;
  border-right: var(--rule-dim); padding-right: var(--sp-2);
}
.fr-dimension__label { font-family: var(--font-mono); font-size: var(--fs-code-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fr-dimension__side .fr-dimension__label { writing-mode: vertical-rl; transform: rotate(180deg); }
.fr-dimension__frame {
  flex: 1; height: var(--fr-dim-height, calc(var(--sp-1) * 65)); background: var(--surface-sunken);
  border: var(--border-thin); display: grid; place-items: center; overflow: hidden;
}
.fr-dimension__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fr-dimension__bottom { flex: 1; border-top: var(--rule-dim); padding-top: var(--sp-2); text-align: center; }
.fr-dimension__spacer { width: calc(var(--sp-1) * 9); flex: 0 0 auto; }
.fr-caption { font-size: var(--fs-caption); color: var(--text-muted); }
.fr-placeholder { font-family: var(--font-mono); font-size: var(--fs-code-sm); color: var(--steel-400); }

/* ---------- Data · ProductCard ---------- */
.fr-product-card {
  display: flex; flex-direction: column; height: 100%; background: var(--surface-card);
  border: var(--bw-hairline) solid var(--border-hairline); border-radius: var(--radius-0);
  transition: var(--transition-control); color: var(--text-primary);
}
a.fr-card-link { display: block; color: inherit; }
a.fr-card-link:hover .fr-product-card, .fr-product-card:hover { border-color: var(--border-strong); }
.fr-product-card__image {
  height: calc(var(--sp-1) * 42); background: var(--surface-sunken); border-bottom: var(--border-thin);
  display: grid; place-items: center; overflow: hidden;
}
.fr-product-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-product-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.fr-product-card__title { font-size: var(--fs-h4); }
.fr-product-card__category { font-size: var(--fs-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.fr-product-card__titles { display: flex; flex-direction: column; gap: var(--sp-1); }
.fr-product-card__specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.fr-product-card__specs li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--text-secondary); }
.fr-product-card__specs span + span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ---------- Forms ---------- */
.fr-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.fr-field__label {
  font-family: var(--font-core); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-secondary);
}
.fr-field__required { color: var(--status-alert); }
.fr-field__hint { font-size: var(--fs-caption); color: var(--text-muted); }
.fr-field__hint--error { color: var(--status-alert); }

.fr-input, .fr-select {
  display: flex; align-items: center; gap: var(--sp-2); height: var(--control-h); background: var(--white);
  border: var(--border-mid); border-radius: var(--radius-0); transition: var(--transition-control);
}
.fr-input { padding: 0 var(--sp-3); }
.fr-input--sm, .fr-select--sm { height: var(--control-h-sm); }
.fr-input--lg, .fr-select--lg { height: var(--control-h-lg); }
.fr-input--invalid, .fr-select--invalid { border-color: var(--status-alert); }
.fr-input:focus-within, .fr-select:focus-within, .fr-textarea:focus { outline: var(--bw-strong) solid var(--focus-ring); outline-offset: var(--bw-hairline); }
.fr-input input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; padding: 0;
  font-family: var(--font-core); font-size: var(--fs-body-sm); color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.fr-input--mono input { font-family: var(--font-mono); }
.fr-input__prefix { font-size: var(--fs-caption); color: var(--text-muted); }
.fr-input__suffix { font-family: var(--font-mono); font-size: var(--fs-code-sm); color: var(--text-muted); }

.fr-textarea {
  width: 100%; padding: var(--sp-3); background: var(--white); border: var(--border-mid); border-radius: var(--radius-0);
  font-family: var(--font-core); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-primary);
  resize: vertical;
}
.fr-textarea--invalid { border-color: var(--status-alert); }

.fr-select { position: relative; }
.fr-select select {
  appearance: none; width: 100%; height: 100%; border: 0; outline: none; background: transparent;
  padding: 0 calc(var(--sp-1) * 9) 0 var(--sp-3); font-family: var(--font-core); font-size: var(--fs-body-sm); color: var(--text-primary);
}
.fr-select .fr-icon { position: absolute; right: var(--sp-3); pointer-events: none; }

.fr-check, .fr-radio, .fr-switch {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-body-sm);
}
.fr-check input, .fr-radio input, .fr-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fr-check__box, .fr-radio__box {
  width: var(--sp-5); height: var(--sp-5); flex: 0 0 auto; display: grid; place-items: center;
  background: var(--white); border: var(--border-mid); transition: var(--transition-control);
}
.fr-check__box::after, .fr-radio__box::after { content: ""; width: var(--sp-2); height: var(--sp-2); background: transparent; }
.fr-check input:checked + .fr-check__box { background: var(--ink-900); border-color: var(--ink-900); }
.fr-check input:checked + .fr-check__box::after { background: var(--white); }
/* Radio is de enige ronde vorm in het systeem (readme → Vorm en lijn). */
.fr-radio__box, .fr-radio__box::after { border-radius: var(--radius-pill); }
.fr-radio input:checked + .fr-radio__box { border-color: var(--ink-900); }
.fr-radio input:checked + .fr-radio__box::after { background: var(--ink-900); }
.fr-switch { gap: var(--sp-3); }
.fr-switch__track {
  width: var(--sp-10); height: var(--sp-5); flex: 0 0 auto; display: flex; align-items: center; padding: 0 var(--sp-1);
  background: var(--steel-200); border: var(--border-mid); transition: var(--transition-control);
}
.fr-switch__knob { width: var(--sp-3); height: var(--sp-3); background: var(--white); }
.fr-switch input:checked + .fr-switch__track { background: var(--ink-900); border-color: var(--ink-900); justify-content: flex-end; }
.fr-check input:focus-visible + .fr-check__box, .fr-radio input:focus-visible + .fr-radio__box,
.fr-switch input:focus-visible + .fr-switch__track { outline: var(--bw-strong) solid var(--focus-ring); outline-offset: var(--bw-hairline); }
.fr-check--disabled, .fr-radio--disabled, .fr-switch--disabled { opacity: 0.38; cursor: not-allowed; }

/* ---------- Feedback · Alert ---------- */
.fr-alert {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--white);
  border: var(--border-thin); border-left: var(--bw-heavy) solid var(--border-default);
}
.fr-alert__icon { padding-top: var(--sp-1); }
.fr-alert__body { display: flex; flex-direction: column; gap: var(--sp-1); }
.fr-alert__title { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.fr-alert__text { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.fr-alert--ok { border-left-color: var(--status-ok); }
.fr-alert--ok .fr-alert__title { color: var(--status-ok); }
.fr-alert--alert { border-left-color: var(--status-alert); }
.fr-alert--alert .fr-alert__title { color: var(--status-alert); }
.fr-alert--hold { border-left-color: var(--status-hold); }
.fr-alert--hold .fr-alert__title { color: var(--status-hold); }

/* ---------- Feedback · Dialog ---------- */
.fr-dialog-scrim { position: fixed; inset: 0; background: var(--overlay-scrim); display: grid; place-items: center; padding: var(--sp-6); z-index: 50; }
/* Variant zonder overlay, voor /admin/stijl. */
.fr-dialog-scrim--inline { position: relative; inset: auto; z-index: auto; display: block; }
.fr-dialog {
  width: var(--fr-dialog-width, calc(var(--sp-1) * 130)); max-width: 100%; background: var(--white);
  border: var(--bw-hairline) solid var(--border-strong); box-shadow: var(--shadow-overlay);
}
.fr-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.fr-dialog__titles { display: flex; flex-direction: column; gap: var(--sp-1); }
.fr-dialog__title { font-size: var(--fs-h3); }
.fr-dialog__body { padding: var(--sp-5); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.fr-dialog__foot { padding: var(--sp-4) var(--sp-5); display: flex; justify-content: flex-end; gap: var(--sp-3); }

/* ---------- Feedback · Tooltip (CSS-only) ---------- */
.fr-tooltip { position: relative; display: inline-flex; }
.fr-tooltip__label {
  position: absolute; bottom: calc(100% + var(--sp-2)); left: 50%; transform: translateX(-50%);
  background: var(--ink-900); color: var(--text-inverse); padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-micro); white-space: nowrap; z-index: 20; visibility: hidden;
}
.fr-tooltip:hover .fr-tooltip__label, .fr-tooltip:focus-within .fr-tooltip__label { visibility: visible; }

/* ---------- Navigation · Breadcrumb ---------- */
.fr-breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-caption);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted);
}
.fr-breadcrumb a { color: inherit; border-bottom-color: transparent; }
.fr-breadcrumb a:hover { color: var(--text-primary); }
.fr-breadcrumb__sep { color: var(--steel-300); }
.fr-breadcrumb__current { color: var(--text-primary); }

/* ---------- Navigation · Tabs (links, server-side) ---------- */
.fr-tabs { display: flex; border-bottom: var(--border-mid); overflow-x: auto; }
.fr-tabs__tab {
  display: inline-flex; align-items: center; padding: 0 var(--sp-4); height: var(--control-h);
  font-family: var(--font-core); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); white-space: nowrap; color: var(--text-muted);
  border-bottom: var(--bw-strong) solid transparent; margin-bottom: calc(var(--bw-hairline) * -1);
  transition: var(--transition-control);
}
.fr-tabs__tab:hover { color: var(--text-primary); border-bottom-color: transparent; }
.fr-tabs__tab[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--ink-900); }

/* ---------- Navigation · SiteHeader ---------- */
/* 2px inktzwarte onderlijn volgens readme → Layoutregels (de export gebruikt nog 1px). */
.fr-site-header { background: var(--white); border-bottom: var(--bw-strong) solid var(--border-strong); position: sticky; top: 0; z-index: 10; }
.fr-site-header__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--page-pad); height: calc(var(--sp-1) * 19);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
}
.fr-nav { display: flex; align-items: center; gap: calc(var(--sp-1) * 7); }
.fr-nav__link {
  font-family: var(--font-core); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-secondary);
  padding-bottom: var(--sp-1); border-bottom: var(--bw-strong) solid transparent; transition: var(--transition-control);
}
.fr-nav__link:hover { color: var(--text-primary); }
/* E-mailadres rechtsboven in de beheeromgeving. */
.fr-site-header__user { font-size: var(--fs-caption); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--sp-1) * 60); }
.fr-nav .fr-nav__link[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--ink-900); }

/* ---------- Navigation · SiteFooter ---------- */
.fr-site-footer { background: var(--surface-inverse); color: var(--text-inverse); }
.fr-site-footer__inner {
  max-width: var(--container-max); margin: 0 auto; padding: var(--sp-12) var(--page-pad);
  display: grid; grid-template-columns: 1.2fr repeat(var(--fr-columns, 1), 1fr); gap: var(--sp-10);
}
.fr-site-footer__col { display: flex; flex-direction: column; gap: var(--sp-3); }
.fr-site-footer__title {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--steel-400);
}
.fr-site-footer__item { font-size: var(--fs-body-sm); color: var(--steel-200); }
.fr-site-footer a { color: var(--steel-200); border-bottom-color: transparent; }
.fr-site-footer a:hover { color: var(--white); }
.fr-site-footer__meta { border-top: var(--bw-hairline) solid var(--border-inverse); }
.fr-site-footer__meta > div {
  max-width: var(--container-max); margin: 0 auto; padding: var(--sp-4) var(--page-pad);
  font-family: var(--font-mono); font-size: var(--fs-code-sm); color: var(--steel-400);
}

/* ---------- Pagina's: catalogus en product (opbouw volgens ui_kits/website) ---------- */
.fr-catalogus { display: grid; grid-template-columns: calc(var(--sp-1) * 58) minmax(0, 1fr); gap: var(--sp-10); margin-top: calc(var(--sp-1) * 7); align-items: start; }
.fr-filter { display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: calc(var(--sp-1) * 25); }
.fr-filter__list { display: flex; flex-direction: column; margin-top: var(--sp-3); }
.fr-filter__list a {
  display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0;
  border-bottom: var(--border-thin); font-size: var(--fs-body-sm); color: var(--text-secondary);
}
.fr-filter__list a[aria-current="page"] { color: var(--text-primary); font-weight: var(--fw-semibold); }
.fr-filter__list a:hover { color: var(--text-primary); border-bottom-color: var(--border-hairline); }
.fr-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.fr-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }

.fr-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--sp-1) * 14); margin-top: var(--sp-6); align-items: start; }
.fr-downloads__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: var(--border-thin); }
.fr-downloads__name { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-body-sm); }

/* ---------- Stijlpagina (/admin/stijl) ---------- */
.fr-styleguide { display: flex; flex-direction: column; gap: var(--sp-12); }
.fr-styleguide__section { display: flex; flex-direction: column; gap: var(--sp-6); }
.fr-styleguide__item { display: grid; grid-template-columns: calc(var(--sp-1) * 45) minmax(0, 1fr); gap: var(--sp-6); align-items: start; padding-bottom: var(--sp-6); border-bottom: var(--border-thin); }
.fr-styleguide__name { font-family: var(--font-mono); font-size: var(--fs-code-sm); color: var(--text-secondary); }
.fr-styleguide__demo { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.fr-styleguide__demo--block { display: block; }
.fr-styleguide__dark { background: var(--surface-inverse); padding: var(--sp-6); }

/* ---------- Smal scherm (media queries kunnen geen var() gebruiken) ---------- */
@media (max-width: 960px) {
  :root { --page-pad: var(--sp-4); }
  .fr-catalogus, .fr-product { grid-template-columns: minmax(0, 1fr); }
  .fr-filter { position: static; }
  .fr-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-site-footer__inner { grid-template-columns: 1fr 1fr; }
  .fr-styleguide__item { grid-template-columns: minmax(0, 1fr); }
  .fr-dialog-scrim--inline { padding: 0; }
}
@media (max-width: 600px) {
  .fr-grid-3, .fr-site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .fr-site-header__inner { gap: var(--sp-4); }
  .fr-nav { gap: var(--sp-3); }
  .fr-nav .fr-button { display: none; }
  .fr-site-header__user { max-width: calc(var(--sp-1) * 30); }
}