.hn-card{background:var(--surface-card);border-radius:var(--hn-radius);box-shadow:var(--hn-shadow);padding:var(--hn-s5)}
.hn-card--flat{box-shadow:none;border:var(--hn-border)}
.hn-card--sunken{background:var(--surface-sunken);box-shadow:none}

/* FAQ / accordion */
.hn-faq{border-top:var(--hn-border)}
.hn-faq__item{border-bottom:var(--hn-border)}
.hn-faq__q{display:flex;align-items:center;justify-content:space-between;gap:var(--hn-s4);width:100%;min-height:var(--hn-tap);padding:var(--hn-s4) 0;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-heading);font-size:var(--hn-h3);font-weight:var(--hn-weight-semibold);color:var(--text-heading)}
.hn-faq__q:hover{color:var(--action-primary)}
.hn-faq__sign{flex:none;width:24px;height:24px;position:relative;color:var(--hn-brand)}
.hn-faq__sign::before,.hn-faq__sign::after{content:'';position:absolute;background:currentColor;border-radius:2px}
.hn-faq__sign::before{inset:11px 2px;height:2px}
.hn-faq__sign::after{inset:2px 11px;width:2px;transition:opacity .15s ease}
.hn-faq__item[data-open="true"] .hn-faq__sign::after{opacity:0}
.hn-faq__a{padding:0 0 var(--hn-s5)}
.hn-faq__a p:last-child{margin-bottom:0}

/* Tables — supplement facts, order lines, comparison */
.hn-table{width:100%;border-collapse:collapse;font-size:var(--hn-text)}
.hn-table caption{text-align:left;font-size:var(--hn-ui);color:var(--text-muted);padding-bottom:var(--hn-s3)}
.hn-table th,.hn-table td{text-align:left;padding:var(--hn-s3) var(--hn-s4);border-bottom:var(--hn-border);vertical-align:top}
.hn-table thead th{font-size:var(--hn-label);letter-spacing:var(--hn-tracking);text-transform:uppercase;color:var(--text-muted);font-weight:var(--hn-weight-bold);background:var(--surface-sunken)}
.hn-table td.is-num,.hn-table th.is-num{text-align:right;font-variant-numeric:tabular-nums}
.hn-table tbody tr:last-child td{border-bottom:0}
/* Een tabel heeft een kleinste breedte die zijn inhoud bepaalt; op een smal
   scherm duwde die de hele pagina breder (gemeten op 320px). De omhullende kaart
   krijgt daarom eigen schuifruimte: de tabel schuift, de pagina niet. */
.hn-card:has(.hn-table){overflow-x:auto}

/* Reviews */
.hn-reviews__summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hn-s5);padding:var(--hn-s5);background:var(--surface-sunken);border-radius:var(--hn-radius)}
.hn-reviews__score{font-family:var(--font-heading);font-size:var(--hn-figure);line-height:1;color:var(--text-heading)}
.hn-review{padding:var(--hn-s5) 0;border-bottom:var(--hn-border)}
.hn-review__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hn-s3);margin-bottom:var(--hn-s3)}
.hn-review__who{font-weight:var(--hn-weight-bold);color:var(--text-heading)}
.hn-review__verified{display:inline-flex;align-items:center;gap:4px;font-size:var(--hn-ui);color:var(--hn-ok);font-weight:var(--hn-weight-bold)}
.hn-review__body{margin:0;max-width:var(--hn-measure)}
.hn-review__meta{font-size:var(--hn-ui);color:var(--text-muted)}

/* Editorial prose */
.hn-prose{max-width:var(--hn-measure)}
/* Een tussenkop in een leeskolom is geen sectiekop. --hn-h2 is 52px op 1440 —
   de maat voor een kop over de volle breedte; in een kolom van ~660px hakt die
   het stuk in brokken en overstemt hij de h1 van de pagina. Binnen .hn-prose
   zakt de schaal daarom een trap: 28 / 21 / 17px op 1440. */
.hn-prose h2{font-size:var(--hn-title);letter-spacing:var(--hn-tracking-heading);line-height:var(--hn-leading-snug);margin-top:var(--hn-s7)}
.hn-prose h3{font-size:var(--hn-h3);margin-top:var(--hn-s6)}
.hn-prose h4{font-size:var(--hn-text);margin-top:var(--hn-s5)}
.hn-prose>:first-child{margin-top:0}
.hn-prose blockquote{margin:var(--hn-s6) 0;padding-left:var(--hn-s5);border-left:3px solid var(--hn-brand-bright);font-family:var(--font-heading);font-size:var(--hn-h3);font-style:italic;color:var(--text-heading)}
.hn-prose figure{margin:var(--hn-s6) 0}
.hn-prose figcaption{font-size:var(--hn-ui);color:var(--text-muted);margin-top:var(--hn-s2)}
/* Vraag-en-antwoord in de tekst (het FAQ-blok in de artikelen): een rustige
   accordion in plaats van het kale browser-driehoekje. */
.hn-prose details{border:var(--hn-border);border-radius:var(--hn-radius);background:var(--surface-card);margin:0 0 var(--hn-s3)}
.hn-prose summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--hn-s3);padding:var(--hn-s4) var(--hn-s5);font-weight:var(--hn-weight-bold);color:var(--text-heading)}
.hn-prose summary::-webkit-details-marker{display:none}
.hn-prose summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--hn-brand);border-bottom:2px solid var(--hn-brand);transform:rotate(-45deg);transition:transform .15s ease}
.hn-prose details[open] summary::before{transform:rotate(45deg)}
.hn-prose details>*:not(summary){padding:0 var(--hn-s5)}
.hn-prose details>:last-child:not(summary){padding-bottom:var(--hn-s4)}
/* Bronvermeldingen bij overgenomen beelden: voetnootformaat onder een lijn. */
.hn-prose li.has-small-font-size{font-size:var(--hn-ui);color:var(--text-muted)}
.hn-prose ol:has(li.has-small-font-size){list-style:none;padding-left:0;border-top:var(--hn-border);margin-top:var(--hn-s6);padding-top:var(--hn-s4)}
.hn-note{background:var(--surface-sunken);border-radius:var(--hn-radius);padding:var(--hn-s4) var(--hn-s5);font-size:var(--hn-ui);color:var(--text-body)}
.hn-disclaimer{border-top:var(--hn-border);margin-top:var(--hn-s6);padding-top:var(--hn-s4);font-size:var(--hn-ui);color:var(--text-muted)}
.hn-tag{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--hn-s3);border:1px solid var(--hn-line);border-radius:var(--hn-radius);background:var(--hn-white);font-size:var(--hn-ui);color:var(--text-body);text-decoration:none}
.hn-tag:hover{border-color:var(--hn-brand);color:var(--hn-brand)}

/* Media placeholder — stands in for photography that has not been shot yet */
.hn-media-placeholder{display:grid;place-items:center;background:var(--surface-sunken);border-radius:var(--hn-radius);color:var(--text-muted);font-size:var(--hn-ui);text-align:center;padding:var(--hn-s4);aspect-ratio:4/3}