/* Gedeelde stijl.

   ---------------------------------------------------------------------------
   ÉÉN VISUELE TAAL MET KLIMAATLOG
   ---------------------------------------------------------------------------

   Ordly en Klimaatlog zijn twee producten van dezelfde maker en delen daarom
   dezelfde vormtaal. Die is bij Klimaatlog vastgelegd en hier overgenomen:

     warm grijs vlak #f6f4f1, witte kaarten met hoeken van 22 en een dubbele
     zachte schaduw (een dichtbij, een ver weg), haarlijn #d2d2d7, accent
     #2553d6 / donker #1b3fa8 / zacht #e9eefc, invoervelden met hoek 12 en een
     focusring van vier pixels op 12%, pilknoppen die bij het aanwijzen even
     opveren, meldingen als witte kaart met een gekleurde lijn aan de zijkant,
     en in donker warm antraciet #161513 met kaarten #232220 die hun rand
     dragen in plaats van een schaduw.

   Eén regel die geen smaak is maar een afspraak: NERGENS uppercase-labels met
   letterspacing. Ze lezen slechter, ze schreeuwen, en ze zijn het handschrift
   van elke gegenereerde pagina. Een kop is klein en grijs — dat is genoeg.

   ---------------------------------------------------------------------------
   EN DE KLEUREN VAN BOL
   ---------------------------------------------------------------------------

   Een verkoper die het partnerplatform van bol gewend is, moet hier iets
   herkennen: blauw als hoofdkleur, een warm accent ernaast. Maar níet hun
   kleuren. Bol gebruikt #0000a4 en een geel-oranje; die exact overnemen wekt
   de indruk dat dit een product van bol is, en dat verbieden hun
   merkvoorwaarden — dezelfde die de lettercombinatie b-o-l in productnamen
   verbieden. Het accent hierboven en het oranje #e8710a voldoen daaraan.

   Het lettertype is het systeemlettertype, geen webfont: dat zou van een
   andere server moeten komen en de Content-Security-Policy laat dat niet toe.
   Terecht — dan zou die server weten wie er in het portaal zit.

   De prefix is st-, zodat deze stijl naast een andere kan bestaan zonder
   botsingen als een klant ooit iets insluit. */

:root {
  /* Het accent. Dezelfde blauwtint als Klimaatlog, want dat is de visuele taal
     die Mart voor zijn producten heeft vastgelegd — en hij voldoet nog steeds
     aan de eis hierboven: niet bol's #0000a4, geen geel. Twee producten van
     dezelfde maker horen op elkaar te lijken. */
  --st-accent: #2553d6;
  --st-accent-donker: #1b3fa8;
  --st-accent-zacht: #e9eefc;

  /* Het warme accent. Voor wat aandacht vraagt zonder alarm te zijn: een
     knop die de eerstvolgende stap is, een tel die oploopt. Oranje, niet
     geel — dat is het verschil met bol. */
  --st-warm: #e8710a;
  --st-warm-donker: #b85706;
  --st-warm-zacht: #fdeedd;

  --st-inkt: #1d1d1f;
  --st-grijs: #6e6e73;
  --st-grijs-licht: #8e8e93;
  --st-lijn: #d2d2d7;
  --st-soft: #f0eeea;
  /* Warm grijs, geen koel blauwgrijs. Dat ene verschil bepaalt of een scherm
     klinisch aanvoelt of rustig — en het is de grond waar de witte kaarten op
     liggen. */
  --st-bg: #f6f4f1;
  --st-kaart: #ffffff;
  --st-veld-bg: #ffffff;
  --st-papier: #ffffff;

  /* Grafieken. Eén reeks is de regel; komt er een tweede bij, dan is dat de
     tweede kleur en krijgt hij een eigen naam in beeld, want kleur alleen is
     geen manier om iets aan te wijzen. */
  --st-reeks-1: #2a78d6;
  --st-reeks-2: #1baf7a;
  --st-raster: #eef2f7;

  --st-groen: #17864d;
  --st-groen-zacht: #e2f5ea;
  --st-amber: #9a6300;
  --st-amber-zacht: #fdf0d8;
  --st-rood: #b3261e;
  --st-rood-zacht: #fbe6e4;

  /* Ruime hoeken en een dubbele, zachte schaduw: een dichtbij en een ver weg.
     Die tweede maakt dat een kaart op het vlak lijkt te liggen in plaats van
     erop geplakt. */
  --st-radius: 22px;
  --st-radius-klein: 12px;

  --st-schaduw: 0 2px 8px rgba(0, 0, 0, .05), 0 24px 60px rgba(0, 0, 0, .08);
  --st-schaduw-zweef: 0 4px 12px rgba(0, 0, 0, .06), 0 32px 70px rgba(0, 0, 0, .12);

  /* Eén set tijden en curves voor alles wat beweegt, zodat het aanvoelt als
     één programma en niet als losse pagina's. */
  --st-snel: 140ms;
  --st-normaal: 220ms;
  --st-traag: 380ms;
  --st-curve: cubic-bezier(.22, .61, .36, 1);
  --st-veer: cubic-bezier(.34, 1.3, .64, 1);

  /* Zodat de browser zelf ook meedoet: scrollbalken, datumkiezers en
     selectievakjes volgen het thema in plaats van wit te blijven. */
  color-scheme: light;
}

/* Donker volgt het systeem, tenzij er expliciet iets is gekozen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --st-accent: #5b82ee;
    --st-accent-donker: #8ba5f4;
    --st-accent-zacht: rgba(91, 130, 238, .18);
    --st-warm: #f28a2e;
    --st-warm-donker: #f7a75c;
    --st-warm-zacht: rgba(232, 113, 10, .18);

    --st-inkt: #f2f0ec;
    --st-grijs: #a1a09c;
    --st-grijs-licht: #86857f;
    --st-lijn: #33322e;
    --st-soft: #232220;
    /* Warm antraciet, niet koel blauwzwart: dezelfde warmte als het lichte
       vlak, alleen omgekeerd. In donker dragen de kaarten hun rand in plaats
       van een schaduw — een schaduw op zwart zie je toch niet. */
    --st-bg: #161513;
    --st-kaart: #232220;
    --st-veld-bg: #1c1b19;
    --st-papier: #ffffff;

    /* Dezelfde twee tinten, gestapt voor een donkere ondergrond — geen
       automatische omkering van de lichte. */
    --st-reeks-1: #3987e5;
    --st-reeks-2: #199e70;
    --st-raster: #232831;

    --st-groen: #5fce93;
    --st-groen-zacht: rgba(35, 170, 95, .18);
    --st-amber: #e0ae5c;
    --st-amber-zacht: rgba(210, 150, 40, .16);
    --st-rood: #f08a82;
    --st-rood-zacht: rgba(200, 70, 60, .18);

    --st-schaduw: none;
    --st-schaduw-zweef: none;
    color-scheme: dark;
  }
}

:root[data-thema="donker"] {
  --st-accent: #5b82ee;
  --st-accent-donker: #8ba5f4;
  --st-accent-zacht: rgba(91, 130, 238, .18);
  --st-inkt: #f2f0ec;
  --st-grijs: #a1a09c;
  --st-grijs-licht: #86857f;
  --st-lijn: #33322e;
  --st-soft: #232220;
  --st-bg: #161513;
  --st-kaart: #232220;
  --st-veld-bg: #1c1b19;
  --st-papier: #ffffff;
  --st-reeks-1: #3987e5;
  --st-reeks-2: #199e70;
  --st-raster: #232831;
  --st-groen: #5fce93;
  --st-groen-zacht: rgba(35, 170, 95, .18);
  --st-amber: #e0ae5c;
  --st-amber-zacht: rgba(210, 150, 40, .16);
  --st-rood: #f08a82;
  --st-rood-zacht: rgba(200, 70, 60, .18);
  --st-schaduw: none;
  --st-schaduw-zweef: none;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Verborgen is verborgen. Zonder deze regel wint `display: inline-flex` van een
   knopklasse het van het hidden-attribuut, en dan staat er een knop die er niet
   hoort te zijn — precies wat er gebeurde met "Weghalen" bij een klant zonder
   logo. */
[hidden] { display: none !important; }

/* De letter. Geen webfont: die zou van een andere server moeten komen en dat
   laat de Content-Security-Policy niet toe — terecht, want dan weet die server
   wie er in het portaal zit. Het systeemlettertype is bovendien wat een
   verkoper op zijn eigen apparaat het beste leest, en het laadt niet.

   Wat we er wél aan doen: de cijfers uitlijnen (tabular-nums, zodat bedragen
   onder elkaar netjes staan), de ligaturen aanzetten, en de randen verzachten
   zodat de tekst niet hard oogt op een scherm met veel wit. */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--st-bg);
  color: var(--st-inkt);
  font-size: 15.5px;
  line-height: 1.6;
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
::selection { background: var(--st-accent-zacht); color: var(--st-inkt); }

/* Voor wie met het toetsenbord werkt: één Tab en je bent voorbij het menu. */
.st-spring { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px;
  border-radius: 999px; background: var(--st-accent); color: #fff; font-weight: 700;
  font-size: 13.5px; text-decoration: none; transition: top var(--st-snel) var(--st-curve); }
.st-spring:focus { top: 12px; }

/* Een knop die aan het werk is. De tekst blijft staan (je wilt weten wáár je
   op drukte), er komt een draaiend randje voor en hij is even niet nog een
   keer in te drukken — twee keer 'Nu ophalen bij bol' is precies wat je niet
   wilt. Wordt gezet door de schil bij elk formulier dat verstuurt. */
.st-bezig { pointer-events: none; opacity: .75; }
.st-bezig::before { content: ''; width: 12px; height: 12px; border-radius: 999px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: st-draai .7s linear infinite; }
@keyframes st-draai { to { transform: rotate(360deg); } }

/* Een tabel die breder is dan het scherm scrolt binnen zijn kaart, niet de
   hele pagina — anders schuift op een telefoon het menu mee weg. */
.st-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.st-scroll > table { min-width: 560px; }

@media print {
  .sc-zij, .st-balk, .st-spring, .or-zoekbalk, .or-balk, form { display: none !important; }
  .sc-binnen { max-width: none; padding: 0; }
  .st-kaart { box-shadow: none; break-inside: avoid; }
  body { background: #fff; color: #000; }
}

/* Paginawissels als één doorlopende beweging in plaats van een witte flits. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: st-uit var(--st-snel) var(--st-curve) both; }
::view-transition-new(root) { animation: st-in var(--st-normaal) var(--st-curve) both; }
@keyframes st-uit { to { opacity: 0; transform: translateY(-4px); } }
@keyframes st-in { from { opacity: 0; transform: translateY(8px); } }

/* Kaarten komen kort na elkaar op in plaats van allemaal tegelijk. */
@keyframes st-opkomst {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.st-opkomst > * { animation: st-opkomst var(--st-traag) var(--st-curve) both; }
.st-opkomst > *:nth-child(2) { animation-delay: 40ms; }
.st-opkomst > *:nth-child(3) { animation-delay: 80ms; }
.st-opkomst > *:nth-child(4) { animation-delay: 120ms; }
.st-opkomst > *:nth-child(n+5) { animation-delay: 160ms; }

/* Wie beweging liever niet heeft, krijgt hem niet. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Bladspiegel ---------- */

.st-blad { max-width: 1080px; margin: 0 auto; padding: 26px 24px 70px; }
.st-blad-smal { max-width: 720px; }

/* De kop van een scherm. Één maat voor alle schermen: een titel die van
   scherm tot scherm verspringt, is het duidelijkste teken dat pagina's los van
   elkaar zijn gebouwd. */
.st-kop { margin-bottom: 24px; }
.st-titel { font-size: 30px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.15; }
.st-sub { font-size: 14.5px; color: var(--st-grijs); margin-top: 6px; max-width: 64ch;
  line-height: 1.55; }

/* ---------- Kaarten ---------- */

/* De kaart. De binnenmarge onderaan is kleiner dan bovenaan omdat wat erin
   staat — een tabel, een lijst — zijn eigen laatste regel al ruimte geeft.
   Zonder dat verschil valt er onderaan een gat van dertig pixels. */
.st-kaart {
  background: var(--st-kaart); border: 1px solid var(--st-lijn);
  border-radius: var(--st-radius); box-shadow: var(--st-schaduw);
  margin-bottom: 18px; padding: 22px 22px 6px;
}
/* Een kaart die eindigt met lopende tekst in plaats van een lijst, heeft die
   ruimte onderaan wél nodig. */
.st-kaart > p:last-child { margin-bottom: 16px; }
.st-kaart-kop { margin-bottom: 18px; }
.st-kaart h2 { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.st-kaart-uitleg { font-size: 13.5px; color: var(--st-grijs); margin-top: 3px; }

/* ---------- Knoppen ---------- */

.st-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; border: 1px solid transparent;
  background: var(--st-accent); color: #fff; text-decoration: none; cursor: pointer;
  transition: transform var(--st-snel) var(--st-veer),
              filter var(--st-snel) var(--st-curve),
              border-color var(--st-snel) var(--st-curve),
              box-shadow var(--st-snel) var(--st-curve);
}
/* Even opveren bij het aanwijzen — niet omhoog schuiven. Dat verschil is
   klein maar het is het gebaar dat het hele product deelt. */
.st-knop:hover { filter: brightness(1.05); transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(37, 83, 214, .2); }
.st-knop:active { transform: scale(.98); box-shadow: none; }
/* De warme knop: voor de eerstvolgende stap. Eén per scherm, hooguit — twee
   warme knoppen naast elkaar is geen aandacht meer maar lawaai. */
.st-knop-warm { background: var(--st-warm); }
.st-knop-warm:hover { background: var(--st-warm-donker); }
.st-lint-warm { background: var(--st-warm-zacht); color: var(--st-warm-donker); }
.st-tel-warm { background: var(--st-warm); color: #fff; }

.st-knop-stil { background: var(--st-kaart); color: var(--st-inkt); border-color: var(--st-lijn); }
.st-knop-stil:hover { border-color: var(--st-accent); filter: none; }
.st-knop-groot { font-size: 15px; padding: 12px 24px; width: 100%; }
.st-knop[disabled] { opacity: .5; cursor: default; filter: none; transform: none; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--st-accent); outline-offset: 2px; border-radius: 8px;
}

/* ---------- Velden ---------- */

.st-veld { margin-bottom: 18px; }
.st-veld label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.st-veld-uitleg { font-size: 12.5px; color: var(--st-grijs); margin-bottom: 7px; }

.st-invoer {
  width: 100%; font: inherit; font-size: 14px; padding: 11px 14px;
  border: 1px solid var(--st-lijn); border-radius: var(--st-radius-klein);
  background: var(--st-veld-bg); color: var(--st-inkt); resize: vertical;
  transition: border-color var(--st-snel) var(--st-curve),
              box-shadow var(--st-snel) var(--st-curve);
}
.st-invoer:focus { outline: 0; border-color: var(--st-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-accent) 12%, transparent); }
.st-veld.st-mis .st-invoer { border-color: var(--st-rood);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-rood) 12%, transparent); }
.st-stand { font-size: 12.5px; color: var(--st-grijs); margin-top: 6px; }
.st-stand-let { color: var(--st-rood); }

/* ---------- Meldingen ---------- */

/* Een melding is een witte kaart met een gekleurde lijn aan de zijkant, geen
   gekleurd vlak. Een fel vak schreeuwt en wordt daarom genegeerd; een lijn
   wijst aan en laat de tekst leesbaar. */
.st-lint { padding: 13px 16px; border-radius: var(--st-radius-klein); font-size: 13.5px;
  margin-bottom: 18px; background: var(--st-kaart); color: var(--st-inkt);
  border: 1px solid var(--st-lijn); border-left: 3px solid var(--st-lijn); }
.st-lint b { font-weight: 700; }
.st-lint-goed { border-left-color: var(--st-groen); }
.st-lint-let { border-left-color: var(--st-rood); }
.st-lint-stil { border-left-color: var(--st-grijs-licht); color: var(--st-grijs); }
.st-lint a { color: var(--st-accent); }

/* Een melding onder een veld schuift open in plaats van te verschijnen: dan
   zie je wélk veld hem opriep, ook als je net verder was gescrold. */
.st-bezwaar { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--st-normaal) var(--st-curve),
              opacity var(--st-normaal) var(--st-curve),
              margin-top var(--st-normaal) var(--st-curve); }
.st-bezwaar > div { overflow: hidden; }
.st-bezwaar.st-aan { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
.st-bezwaar p { padding: 9px 11px; border-radius: var(--st-radius-klein); font-size: 12.5px;
  background: var(--st-rood-zacht); color: var(--st-rood); }
.st-bezwaar p + p { margin-top: 6px; }

/* ---------- Tabellen ----------

   Eén tabelstijl voor het hele portaal. Hier stonden er tien, elk in zijn eigen
   scherm, met regelhoogtes van 10, 11, 12 en 13 pixels. Dat zie je niet bewust
   als je naar één scherm kijkt, maar je voelt het als je tussen twee schermen
   wisselt: de rijen verspringen. Precies het soort verschil waardoor software
   niet af aanvoelt zonder dat iemand kan aanwijzen waarom.

   Wat een scherm nog wél zelf bepaalt: welke kolom rechts staat, hoe breed
   iets is, wat er in een cel gebeurt. Niet de rijhoogte en niet de kopregel. */

.st-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px;
  font-variant-numeric: tabular-nums; }
/* Kopregels in gewone letters. Uppercase met letterspacing is precies het
   micro-label waar Mart bij Klimaatlog een streep door heeft gezet: het leest
   slechter, het schreeuwt, en het is het handschrift van elke gegenereerde
   pagina. Een kop is klein en grijs — dat is genoeg om hem kop te laten zijn. */
.st-tabel th { text-align: left; font-size: 12.5px; font-weight: 600;
  color: var(--st-grijs); padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--st-lijn); white-space: nowrap; }
.st-tabel td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--st-lijn);
  vertical-align: middle; }
.st-tabel th:last-child, .st-tabel td:last-child { padding-right: 0; }
.st-tabel tbody tr:last-child td { border-bottom: 0; }
/* Een rij lichten we op bij het aanwijzen: dat helpt het oog de regel volgen
   over de hele breedte, en het is het verschil tussen een lijst en een tabel
   waar je iets in opzoekt. */
.st-tabel tbody tr { transition: background var(--st-snel) var(--st-curve); }
.st-tabel tbody tr:hover { background: var(--st-soft); }
.st-tabel td b, .st-tabel td strong { display: block; font-weight: 700; }
/* De tweede regel in een cel: het ordernummer onder de naam, de EAN onder het
   artikel. Klein, grijs, en nooit belangrijker dan de regel erboven. */
.st-tabel .st-onder { display: block; font-size: 11.5px; color: var(--st-grijs-licht);
  font-weight: 400; margin-top: 2px; }
.st-tabel .st-r { text-align: right; white-space: nowrap; }
.st-tabel a { color: inherit; text-decoration: none; font-weight: 700; }
.st-tabel a:hover { color: var(--st-accent); }
/* Binnen een kaart met eigen randen loopt de tabel van rand tot rand. */
.st-tabel-ruim th { padding: 12px 18px 10px; background: var(--st-soft); }
.st-tabel-ruim td { padding: 13px 18px; }

/* ---------- Zoekbalk ----------

   Ook deze stond vier keer los in vier schermen. Eén vorm, overal hetzelfde
   gedrag: het vergrootglas ervoor, het veld ernaast, en de rand die oplicht
   zodra je erin staat. */

.st-zoekbalk { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.st-zoekveld { flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
  background: var(--st-kaart); border: 1px solid var(--st-lijn); border-radius: 999px;
  padding: 0 8px 0 14px; min-width: 0;
  transition: border-color var(--st-snel) var(--st-curve),
              box-shadow var(--st-snel) var(--st-curve); }
.st-zoekveld:focus-within { border-color: var(--st-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-accent) 12%, transparent); }
.st-zoekveld svg { width: 16px; height: 16px; color: var(--st-grijs); flex: none; }
.st-zoekveld input { flex: 1 1 auto; border: 0; background: none; font: inherit;
  font-size: 14px; padding: 10px 0; color: var(--st-inkt); outline: 0; min-width: 0; }
.st-zoekveld input::-webkit-search-cancel-button { display: none; }
.st-zoekveld input:focus-visible { outline: 0; }
.st-wis { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  color: var(--st-grijs); text-decoration: none; font-size: 18px; line-height: 1; flex: none; }
.st-wis:hover { background: var(--st-soft); color: var(--st-inkt); }
/* Op een telefoon krijgt het veld de volle breedte en gaat de rest eronder.
   Naast elkaar houdt het veld nog een centimeter over en zie je niet wat je
   typt. */
@media (max-width: 640px) {
  .st-zoekbalk { flex-wrap: wrap; }
  .st-zoekveld { flex: 1 1 100%; }
}

/* ---------- Een lege lijst ----------

   Nooit een leeg vlak: altijd één zin die zegt waarom er niets staat en wat er
   gebeurt als er wél iets komt. */

.st-leeg { padding: 24px 4px; color: var(--st-grijs); font-size: 14px; }
.st-leeg b { display: block; color: var(--st-inkt); font-size: 15px; margin-bottom: 3px; }

/* ---------- Roosters en rijen ---------- */

.st-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: start; }
@media (max-width: 940px) { .st-twee { grid-template-columns: minmax(0, 1fr); } }

.st-drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

.st-rij {
  display: block; text-decoration: none; color: inherit; background: var(--st-kaart);
  border: 1px solid var(--st-lijn); border-radius: 13px; padding: 15px 17px;
  margin-bottom: 9px; box-shadow: var(--st-schaduw);
  transition: transform var(--st-normaal) var(--st-curve),
              border-color var(--st-normaal) var(--st-curve),
              box-shadow var(--st-normaal) var(--st-curve);
}
.st-rij:hover { transform: translateY(-2px); border-color: var(--st-accent);
  box-shadow: var(--st-schaduw-zweef); }
.st-rij b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.st-rij span { font-size: 13.5px; color: var(--st-grijs); }

.st-groepkop { font-size: 13.5px; font-weight: 700; color: var(--st-grijs);
  margin: 26px 0 10px; }

/* ---------- De mail in beeld ---------- */

.st-venster { background: var(--st-kaart); border: 1px solid var(--st-lijn);
  border-radius: var(--st-radius); overflow: hidden; box-shadow: var(--st-schaduw); }
.st-venster-balk { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--st-lijn); font-size: 12.5px; color: var(--st-grijs); }
.st-stip { width: 9px; height: 9px; border-radius: 999px; background: var(--st-lijn); }
.st-mailvenster { background: var(--st-papier); padding: 28px 24px 32px; min-height: 380px;
  transition: opacity var(--st-normaal) var(--st-curve); }
.st-mailvenster.st-laadt { opacity: .45; }

/* De mail zelf. Vaste kleuren en geen variabelen: dit is de opmaak van een
   mailbericht, en dat wordt straks door een mailprogramma getoond dat onze
   stijl niet kent. Alleen de accentkleur komt van de verkoper. */
.mail { color: #1d1d1f; font-size: 14.5px; max-width: 480px; margin: 0 auto; }
.mail .mail-kop { margin-bottom: 22px; }
.mail .logo { max-height: 44px; max-width: 190px; display: block; }
.mail .woordmerk { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.mail .aanhef { margin-bottom: 12px; }
.mail .intro { margin-bottom: 14px; color: #3c3c43; }
.mail .vraag { margin-bottom: 20px; }
.mail .knopregel { margin-bottom: 24px; }
.mail .knop { display: inline-block; padding: 11px 20px; border-radius: 9px;
  background: var(--kleur); color: #fff; text-decoration: none; font-weight: 600;
  font-size: 14px; transition: background var(--st-normaal) var(--st-curve); }
.mail .groet { margin-bottom: 22px; }
.mail .afzender { color: #6e6e73; }
.mail .voet { padding-top: 16px; border-top: 1px solid #e7e7ea; font-size: 12px;
  color: #86868b; }

/* ---------- Logo en kleur kiezen ---------- */

.st-logoveld { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.st-logovak { width: 92px; height: 62px; flex: none; border: 1px dashed var(--st-lijn);
  border-radius: 11px; display: grid; place-items: center; background: var(--st-veld-bg);
  overflow: hidden; transition: border-color var(--st-snel) var(--st-curve),
                                background var(--st-snel) var(--st-curve); }
.st-logovak.st-gevuld { border-style: solid; background: #fff; }
.st-logovak img { max-width: 80px; max-height: 50px; display: block; }
.st-logovak span { font-size: 11px; color: var(--st-grijs); }

.st-kleuren { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
/* De buitenste ring is er voor de donkere kleur: zonder ring valt die weg
   tegen een donkere achtergrond en lijkt er een knop te missen. */
.st-kleur { width: 30px; height: 30px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 1px var(--st-lijn);
  transition: transform var(--st-snel) var(--st-veer),
              border-color var(--st-snel) var(--st-curve); }
.st-kleur:hover { transform: scale(1.12); }
.st-kleur[aria-pressed="true"] { border-color: var(--st-inkt); transform: scale(1.12); }
input[type=color].st-kleurkiezer { width: 40px; height: 30px; padding: 0;
  border: 1px solid var(--st-lijn); border-radius: 8px; background: var(--st-veld-bg);
  cursor: pointer; }

/* ---------- Lijst met vaste regels ---------- */

.st-vast { list-style: none; }
.st-vast li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
  font-size: 13.5px; color: var(--st-grijs); margin-bottom: 10px; }
.st-vast b { color: var(--st-inkt); font-weight: 700; }
.st-vink { color: var(--st-accent); font-weight: 800; }

/* ---------- Voet van een formulier ---------- */

.st-balk { position: sticky; bottom: 0; padding: 14px 0;
  background: linear-gradient(to top, var(--st-bg) 65%, transparent); }
.st-voetnoot { font-size: 12.5px; color: var(--st-grijs); margin-top: 14px; }