/* Wondpleister 2.1.1 - restore the layout of existing editorial components.
   Works with previously saved WordPress content; no text replacement needed.
   Mobile is the base. Layout expands only with min-width media queries. */

.header-inner { flex-wrap: wrap; padding-block: .65rem; }
.desktop-nav { flex-wrap: wrap; }
.mobile-nav { flex: 0 0 auto; }
html { scroll-padding-top: calc(var(--wpw-header-height, 6rem) + var(--header-offset, 0px) + 1.25rem); }
.prose > section { margin-block-end: 2.5rem; }
.prose :is(h2, h3, h4) { text-wrap: pretty; }
.prose :is(p, li, div, article, section, figure) { min-width: 0; }
.prose :is(p, a, strong, td, th, span) { overflow-wrap: anywhere; }
.prose :is(.principle-box, .medical-boundary, .albert-tip-box, .knowledge-note, .definition-box) > :last-child { margin-bottom: 0; }

/* Number and heading are distinct grid cells. Body text uses full card width. */
.prose :is(.decision-grid, .mental-scar-grid, .question-grid) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
  list-style: none; padding: 0; margin: 1.75rem 0 2rem;
}
.prose :is(.decision-grid, .mental-scar-grid, .question-grid) > :is(div, article, li) {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem .85rem; align-items: start; align-content: start;
  margin: 0; padding: 1.125rem; border: 1px solid var(--line);
  border-radius: 1rem; background: #fff; min-width: 0;
}
.prose :is(.decision-grid, .mental-scar-grid, .question-grid) > :is(div, article, li) > span:first-child,
.prose .signal-grid > :is(article, div) > span:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin: 0; padding: 0;
  background: #e3f1e9; border: 1px solid #d3e6d9; border-radius: .75rem;
  color: #184835; font-size: 1rem; font-weight: 750; line-height: 1;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.prose :is(.decision-grid, .mental-scar-grid, .question-grid) > :is(div, article, li) > :is(strong, h3) {
  display: block; align-self: center; margin: 0;
  font-size: 1.075rem; font-weight: 730; line-height: 1.4;
  letter-spacing: -.012em; color: var(--ink);
}
.prose :is(.decision-grid, .mental-scar-grid, .question-grid) > :is(div, article, li) > p {
  grid-column: 1 / -1; margin: 0; font-size: 1rem; line-height: 1.75;
  color: #37574a; max-width: none;
}
.prose .decision-grid > .decision-grid__warning { border-color: #decba8; background: #fff9ef; }
.prose .decision-grid > .decision-grid__warning > span:first-child { background: #faead0; color: #634318; border-color: #e9d6b4; }
.prose .mental-scar-grid > :is(div, article, li) { background: #f5faf6; border-color: #d5e4d8; }
.prose .mental-scar-grid > :is(div, article, li) > span:first-child { background: #e0eee4; }

/* Other numbered paragraphs in retained knowledge guides. */
.prose .signal-grid > :is(article, div) { background: #fff; border-radius: 1rem; padding: 1.125rem; }
.prose .signal-grid > :is(article, div) > span:first-child { margin-bottom: .75rem; }
.prose .signal-grid h3 { margin: 0 0 .625rem; line-height: 1.4; }
.prose .signal-grid p:last-child { margin-bottom: 0; }
.prose .knowledge-steps { display: grid; gap: 1rem; padding: 0; list-style: none; }
.prose .knowledge-steps > li {
  display: grid; grid-template-columns: 2.125rem minmax(0, 1fr);
  gap: .875rem; padding: 1.125rem 0; margin: 0;
  border-bottom: 1px solid var(--line); align-items: start;
}
.prose .knowledge-steps > li:last-child { border-bottom: 0; }
.prose .knowledge-steps > li > span:first-child {
  display: inline-flex; justify-content: center; align-items: center;
  width: 2.125rem; min-height: 2.125rem; padding: .2rem;
  border-radius: .625rem; font-size: .95rem; line-height: 1.2;
}
.prose .knowledge-steps > li > div { min-width: 0; }
.prose .knowledge-steps h3 { margin: 0 0 .5rem; font-size: 1.125rem; line-height: 1.4; }
.prose .knowledge-steps p:last-child { margin-bottom: 0; }
.prose .knowledge-steps--compact { gap: .375rem; }

/* Headings previously touched the first word of their explanation. */
.prose .check-list { display: grid; gap: .875rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.prose .check-list > li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; margin: 0; }
.prose .check-list > li > span { display: inline-flex; justify-content: center; align-items: center; min-height: 1.75rem; color: #236246; font-weight: 750; }
.prose .check-list > li > p { margin: 0; line-height: 1.75; }
.prose .check-list > li > p > strong:first-child { display: block; margin-bottom: .2rem; line-height: 1.5; }
.prose .check-list--large > li { padding: .875rem 0; border-bottom: 1px solid var(--line); }

/* Quotes remain text, not a large decorative image. */
.prose .article-quote {
  margin: 1.75rem 0; padding: 1.25rem;
  border: 1px solid #d7e6dc; border-inline-start: 4px solid #6d997d;
  border-radius: .25rem 1rem 1rem .25rem; background: #edf6f0;
  font-size: 1.05rem; line-height: 1.75; font-style: normal;
  overflow-wrap: anywhere;
}
.prose .article-quote > span[aria-hidden="true"] { display: none; }
.prose .article-quote > strong:first-of-type { display: block; margin-bottom: .6rem; font-size: 1.125rem; line-height: 1.5; }
.prose .article-quote > p:last-child { margin-bottom: 0; }
.prose .article-quote--mental { background: #eaf4ee; }

.prose :is(.scenario-list, .claim-list) { display: grid; gap: 1rem; margin: 1.5rem 0; }
.prose :is(.scenario-list, .claim-list) > article { padding: 1.125rem; border: 1px solid var(--line); background: white; border-radius: .875rem; }
.prose .scenario-list > article > span:first-child { display: inline-block; color: var(--accent); background: var(--mint-soft); padding: .25rem .625rem; border-radius: .375rem; font-size: .85rem; font-weight: 700; margin-bottom: .75rem; }
.prose :is(.scenario-list, .claim-list) h3 { margin: 0 0 .5rem; }
.prose .claim-list strong { display: block; margin-bottom: .5rem; }
.prose :is(.scenario-list, .claim-list) p:last-child { margin-bottom: 0; }
.prose .comparison-note { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .875rem; background: #edf5ef; border: 1px solid var(--line); border-radius: .75rem; padding: 1.125rem; margin: 1.5rem 0; }
.prose .comparison-note > span { font-weight: 750; color: var(--accent); }
.prose .comparison-note p { margin: 0; }

/* Legacy ARIA tables keep their complete column headers and scroll locally. */
.prose :is(.material-table, .size-choice-table, .comparison-table, .observation-table) {
  width: 100%; min-width: 0; max-width: 100%; overflow-x: auto;
  overscroll-behavior-inline: contain; border: 1px solid var(--line);
  border-radius: .875rem; margin: 1.5rem 0; background: white;
}
.prose :is(.material-row, .size-choice-row, .comparison-row, .observation-row) {
  display: grid; gap: 1rem; align-items: start; padding: 1rem;
  border-bottom: 1px solid var(--line); font-size: .93rem; line-height: 1.7;
}
.prose :is(.material-row, .size-choice-row) { grid-template-columns: minmax(140px, .85fr) repeat(2, minmax(180px, 1.1fr)); min-width: 620px; }
.prose .comparison-row { grid-template-columns: minmax(125px, .85fr) repeat(3, minmax(165px, 1fr)); min-width: 750px; }
.prose .observation-row { grid-template-columns: minmax(160px, 1fr) minmax(250px, 1.5fr); min-width: 480px; }
.prose :is(.material-head, .size-choice-head, .comparison-head, .observation-head) { background: #e9f2ec; font-weight: 720; color: var(--ink); }
.prose :is(.material-row, .size-choice-row, .comparison-row, .observation-row):last-child { border-bottom: 0; }
.prose .size-choice-row--warning { background: #fff7e9; }
.prose :is(.table-scroll, .material-table, .size-choice-table, .comparison-table, .observation-table):focus-visible { outline: 3px solid #ae590b; outline-offset: 3px; }
.prose .table-scroll:has(table) { background: white; }
.prose .source-list li > span { flex: 0 0 1.5rem; font-variant-numeric: tabular-nums; }
.prose .source-list li > div { min-width: 0; }
.prose .inline-faq { margin-block: 1.5rem; }
.prose details > :last-child { margin-bottom: 1.125rem; }

/* Restore the existing labelled pleister-format diagram; not a product image. */
.prose .size-anatomy { border: 1px solid var(--line); background: #f2f8f3; border-radius: 1rem; padding: 1.25rem; }
.prose .size-anatomy__visual { min-width: 0; text-align: center; }
.prose .size-anatomy__outer-label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .75rem; }
.prose .size-anatomy__plaster { margin: .75rem auto 1rem; width: min(100%, 360px); padding: 1.2rem 24%; background: #ebd2a6; border: 1px solid #ad8c59; border-radius: 1.25rem; }
.prose .size-anatomy__pad { height: 4rem; border-radius: .35rem; background: #fffdf7; border: 1px solid #b4ae9c; }
.prose .size-anatomy__legend { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; justify-content: center; font-size: .875rem; }
.prose .size-anatomy__legend > span { display: inline-flex; align-items: center; gap: .5rem; }
.prose .size-anatomy__swatch { display: inline-block; flex-shrink: 0; width: 1rem; height: 1rem; border: 1px solid #a38f70; border-radius: .2rem; }
.prose .size-anatomy__swatch--pad { background: #fffdf7; }
.prose .size-anatomy__swatch--skin { background: #ebd2a6; }
.prose .size-anatomy figcaption { font-size: .875rem; margin-top: 1rem; }

/* Never squeeze explanatory cards into two columns on a phone. */
@media (min-width: 760px) {
  .prose :is(.decision-grid, .mental-scar-grid, .question-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose :is(.decision-grid, .mental-scar-grid, .question-grid) > :is(div, article, li) { padding: 1.35rem; }
  .prose .article-quote { padding: 1.5rem 1.625rem; }
}
@media print {
  .prose :is(.mental-scar-grid, .decision-grid, .question-grid) { display: block; }
  .prose :is(.mental-scar-grid, .decision-grid, .question-grid) > :is(div, article, li) { break-inside: avoid; margin-bottom: .8rem; }
  .prose .article-quote { break-inside: avoid; }
  .prose :is(.material-table, .size-choice-table, .comparison-table, .observation-table) { overflow: visible; }
  .prose :is(.material-row, .size-choice-row, .comparison-row, .observation-row) { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prose .comparison-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .prose .observation-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Long Dutch words must also wrap in summaries and the article introduction. */
.prose summary, .article-top .lead { overflow-wrap: anywhere; word-break: normal; }