/* pvh-champignon 1.0.0: alleen geladen op post 28 met marker. Wit, champignonbruin, uienpaars als signaal. */
html:has(body.pvh-ch) { overflow-x: clip; }
body.pvh-ch {
  --ch-wit: #fff; --ch-inkt: #1d2320; --ch-zacht: #4b524e; --ch-lijn: #e4e7e5; --ch-vlak: #f3f5f4;
  --ch-bruin: #6e5038; --ch-ui: #7b2d63; --ch-ui-vlak: #f6e9f2; --ch-zout: #2f5470; --ch-zout-vlak: #e8f0f6;
  --ch-vaag: #7a5410; --ch-vaag-vlak: #fbf1dc; --ch-donker: #1c2621;
  background: var(--ch-wit) !important; color: var(--ch-inkt);
}
body.pvh-ch .pvh-artikel, body.pvh-ch main, body.pvh-ch .pvh-verder { background: var(--ch-wit) !important; }
body.pvh-ch .pvh-artikel > .pvh-lees { display: block !important; width: min(68ch, calc(100% - 40px)) !important; margin-inline: auto !important; }
body.pvh-ch .pvh-lijf { padding-top: 0; }
.pvh-ch .pvh-ch-band { position: relative; width: 100vw; left: 50%; margin-left: -50vw; padding: 72px 24px; box-sizing: border-box; }
.pvh-ch .pvh-ch-band > .pvh-ch-binnen { max-width: 1120px; margin: 0 auto; }
.pvh-ch .pvh-ch-band--vlak { background: var(--ch-vlak); }
.pvh-ch .pvh-ch-band--donker { background: var(--ch-donker); color: #f4f6f5; }
.pvh-ch .pvh-ch-band h1, .pvh-ch .pvh-ch-band h2, .pvh-ch .pvh-ch-band h3 { font-family: inherit; letter-spacing: -0.01em; color: inherit; margin: 0 0 16px; }
.pvh-ch .pvh-ch-band p { max-width: 62ch; }

/* Hero */
.pvh-ch .pvh-ch-hero { padding-top: 40px; }
.pvh-ch .pvh-ch-hero .pvh-ch-binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: 'tekst tool' 'rest tool'; grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }
.pvh-ch .pvh-ch-hero__tekst { grid-area: tekst; }
.pvh-ch .pvh-ch-hero__tool { grid-area: tool; }
.pvh-ch .pvh-ch-hero__rest { grid-area: rest; }
.pvh-ch .pvh-ch-eyebrow { font-size: 0.85rem; font-weight: 600; color: var(--ch-bruin); text-transform: none; margin: 0 0 12px; }
.pvh-ch .pvh-ch-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; font-weight: 700; }
.pvh-ch .pvh-ch-lead { font-size: 1.15rem; line-height: 1.6; color: var(--ch-zacht); }
.pvh-ch .pvh-ch-getal { display: flex; gap: 16px; align-items: baseline; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--ch-lijn); }
.pvh-ch .pvh-ch-getal strong { font-size: 2.6rem; line-height: 1; color: var(--ch-ui); font-variant-numeric: tabular-nums; }
.pvh-ch .pvh-ch-getal span { color: var(--ch-zacht); font-size: 0.95rem; max-width: 34ch; }

/* App-venster */
.pvh-ch .pvh-ch-app { background: var(--ch-wit); border-radius: 14px; box-shadow: 0 1px 2px rgba(20,30,25,.06), 0 18px 48px rgba(20,30,25,.12); overflow: hidden; }
.pvh-ch .pvh-ch-app__balk { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--ch-vlak); }
.pvh-ch .pvh-ch-app__balk span { width: 10px; height: 10px; border-radius: 50%; background: #cfd5d2; }
.pvh-ch .pvh-ch-app__balk p { margin: 0 0 0 8px; font-size: 0.85rem; font-weight: 600; color: var(--ch-zacht); }
.pvh-ch .pvh-ch-app__lijf { padding: 20px; }
.pvh-ch .pvh-ch-app__label { display: block; font-weight: 600; margin-bottom: 8px; text-transform: none !important; letter-spacing: 0; }
.pvh-ch .pvh-ch-app textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; line-height: 1.5; padding: 12px; border: 1px solid #c9cfcc; border-radius: 8px; background: var(--ch-wit); color: var(--ch-inkt); resize: vertical; min-height: 120px; }
.pvh-ch .pvh-ch-app textarea:focus-visible, .pvh-ch .pvh-ch-knop:focus-visible, .pvh-ch .pvh-ch-chip:focus-visible, .pvh-ch .pvh-ch-faq summary:focus-visible { outline: 3px solid var(--ch-ui); outline-offset: 2px; }
.pvh-ch .pvh-ch-app textarea[aria-invalid="true"] { border-color: #b3261e; }
.pvh-ch .pvh-ch-app__voorbeelden { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 0.9rem; color: var(--ch-zacht); }
.pvh-ch .pvh-ch-chip { font: inherit; font-size: 0.88rem; padding: 6px 12px; border-radius: 999px; border: 1px solid #c9cfcc; background: var(--ch-wit); color: var(--ch-inkt); cursor: pointer; }
.pvh-ch .pvh-ch-chip:hover { border-color: var(--ch-inkt); }
.pvh-ch .pvh-ch-app__knoppen { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
html body.pvh-ch .pvh-ch-knop { font: inherit; font-weight: 600; padding: 12px 20px; border-radius: 8px !important; border: 0; background: var(--ch-donker) !important; color: #fff !important; cursor: pointer; }
html body.pvh-ch .pvh-ch-knop--stil { background: transparent !important; color: var(--ch-inkt) !important; box-shadow: inset 0 0 0 1px #c9cfcc; }
.pvh-ch .pvh-ch-app__melding { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fbeaea; color: #8a1c15; font-size: 0.95rem; }
.pvh-ch .pvh-ch-uitslag { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ch-lijn); }
.pvh-ch .pvh-ch-uitslag__kop { font-weight: 700; font-size: 1.1rem; margin: 0 0 10px; }
.pvh-ch .is-allium .pvh-ch-uitslag__kop { color: var(--ch-ui); }
.pvh-ch .pvh-ch-uitslag__etiket { font-size: 0.95rem; line-height: 1.7; background: var(--ch-vlak); padding: 12px; border-radius: 8px; margin: 0 0 12px; white-space: pre-wrap; word-break: break-word; }
.pvh-ch mark.pvh-ch-m { padding: 1px 4px; border-radius: 4px; font-weight: 600; }
.pvh-ch mark.pvh-ch-m--allium, .pvh-ch mark.pvh-ch-m--giftig_ander { background: var(--ch-ui-vlak); color: var(--ch-ui); box-shadow: inset 0 -2px 0 var(--ch-ui); }
.pvh-ch mark.pvh-ch-m--zout { background: var(--ch-zout-vlak); color: var(--ch-zout); }
.pvh-ch mark.pvh-ch-m--vaag { background: var(--ch-vaag-vlak); color: var(--ch-vaag); }
.pvh-ch .pvh-ch-uitslag__groepen { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.pvh-ch .pvh-ch-uitslag__groepen li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.93rem; padding: 6px 0; border-bottom: 1px solid var(--ch-lijn); margin: 0; }
.pvh-ch .pvh-ch-uitslag__groepen li::before { content: none !important; }
.pvh-ch .pvh-ch-uitslag__groepen li span { color: var(--ch-zacht); text-align: right; }
.pvh-ch .pvh-ch-uitslag__groepen li.is-raak span { color: var(--ch-inkt); font-weight: 600; }
.pvh-ch .pvh-ch-uitslag__zin { margin: 0; font-size: 0.97rem; line-height: 1.55; }

/* Split-secties */
.pvh-ch .pvh-ch-split .pvh-ch-binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pvh-ch .pvh-ch-split--om .pvh-ch-beeld { order: 2; }
.pvh-ch .pvh-ch-split h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; }

/* Meting */
.pvh-ch .pvh-ch-meting { margin: 0; background: var(--ch-wit); border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(20,30,25,.06), 0 12px 32px rgba(20,30,25,.08); }
.pvh-ch .pvh-ch-meting__kop { font-weight: 700; margin: 0 0 16px; }
.pvh-ch .pvh-ch-meting__rijen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pvh-ch .pvh-ch-meting__rijen li { display: grid; grid-template-columns: 9.5em 1fr 5.5em; gap: 12px; align-items: center; margin: 0; font-size: 0.95rem; }
.pvh-ch .pvh-ch-meting__rijen li::before { content: none !important; }
.pvh-ch .pvh-ch-meting__balk { height: 12px; background: var(--ch-vlak); border-radius: 6px; overflow: hidden; }
.pvh-ch .pvh-ch-meting__balk span { display: block; height: 100%; background: var(--ch-ui); border-radius: 6px; }
.pvh-ch .pvh-ch-meting__getal { text-align: right; font-variant-numeric: tabular-nums; color: var(--ch-zacht); }
.pvh-ch .pvh-ch-meting figcaption { margin-top: 16px; font-size: 0.85rem; color: var(--ch-zacht); line-height: 1.5; }

/* Etiket-mockup */
.pvh-ch .pvh-ch-etiket { background: var(--ch-wit); border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(20,30,25,.06), 0 12px 32px rgba(20,30,25,.08); font-size: 0.95rem; line-height: 1.7; }
.pvh-ch .pvh-ch-etiket p { margin: 0 0 10px; }
.pvh-ch .pvh-ch-etiket__titel { font-weight: 700; }
.pvh-ch .pvh-ch-etiket__noot { font-size: 0.85rem; color: var(--ch-zacht); }

/* Stappen */
.pvh-ch .pvh-ch-stappen { list-style: none; counter-reset: st; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pvh-ch .pvh-ch-stappen li { counter-increment: st; margin: 0; padding-top: 0; }
.pvh-ch .pvh-ch-stappen li::before { content: counter(st) !important; display: block; font-weight: 700; font-size: 1.4rem; color: var(--ch-bruin); margin-bottom: 6px; background: none !important; position: static !important; width: auto !important; height: auto !important; }
.pvh-ch .pvh-ch-stappen strong { display: block; margin-bottom: 4px; }

/* CTA-band */
.pvh-ch .pvh-ch-band--donker a { color: #fff; }
.pvh-ch .pvh-ch-cta .pvh-ch-binnen { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.pvh-ch .pvh-ch-cta p { margin: 0; color: #d9dfdc; }
html body.pvh-ch .pvh-ch-cta .pvh-ch-knop { background: #fff !important; color: var(--ch-donker) !important; text-decoration: none; display: inline-block; }

/* FAQ */
.pvh-ch .pvh-ch-faq details { border-bottom: 1px solid var(--ch-lijn); padding: 4px 0; }
.pvh-ch .pvh-ch-faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.pvh-ch .pvh-ch-faq summary::-webkit-details-marker { display: none; }
.pvh-ch .pvh-ch-faq summary::after { content: "+"; font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--ch-bruin); }
.pvh-ch .pvh-ch-faq details[open] summary::after { content: "–"; }
.pvh-ch .pvh-ch-faq details p { margin: 0 0 14px; color: var(--ch-zacht); }
.pvh-ch .pvh-ch-noot { font-size: 0.9rem; color: var(--ch-zacht); }
.pvh-ch .pvh-ch-band a { text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .pvh-ch .pvh-ch-uitslag:not([hidden]) { animation: pvhChIn .25s ease-out; }
  @keyframes pvhChIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 900px) {
  .pvh-ch .pvh-ch-hero .pvh-ch-binnen { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'tekst' 'tool' 'rest'; row-gap: 28px; }
  .pvh-ch .pvh-ch-split .pvh-ch-binnen { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pvh-ch .pvh-ch-lead { font-size: 1.05rem; }
  .pvh-ch .pvh-ch-split--om .pvh-ch-beeld { order: 0; }
  .pvh-ch .pvh-ch-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pvh-ch .pvh-ch-band { padding: 48px 24px; }
  .pvh-ch .pvh-ch-stappen { grid-template-columns: minmax(0, 1fr); }
  .pvh-ch .pvh-ch-meting__rijen li { grid-template-columns: 1fr 5em; }
  .pvh-ch .pvh-ch-meting__balk { grid-column: 1 / -1; order: 3; }
  .pvh-ch .pvh-ch-app__lijf, .pvh-ch .pvh-ch-meting, .pvh-ch .pvh-ch-etiket { padding: 16px; }
}
html body.pvh-ch .pvh-ch-band--donker p { color: #d9dfdc !important; }
html body.pvh-ch .pvh-ch-band--donker h2 { color: #fff !important; }