/* Opmaak voor de subpagina's: product-, verhaal-, kennisbank-, service- en
   juridische pagina's. Laadt na styles.css en gebruikt dezelfde tokens. */

body.subpage {
  background: var(--cream);
}

/* ---------------------------------------------------------------- kop */

.page-head {
  padding: clamp(150px, 17vh, 210px) var(--page-gutter) clamp(40px, 5vw, 72px);
  max-width: var(--content-max);
  margin-inline: auto;
}
.page-head.center {
  text-align: center;
}
.page-head.center .page-lede {
  margin-inline: auto;
}
.page-head h1 {
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  letter-spacing: -0.035em;
  margin: 0 0 1.4rem;
  max-width: 20ch;
}
.page-head.center h1 {
  margin-inline: auto;
}
.page-head h1 em {
  font-style: italic;
  color: var(--green);
}
.page-lede {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.62;
  color: rgba(31, 31, 31, 0.78);
  margin: 0;
}
.page-meta {
  margin: 1.6rem 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.5);
}
.page-head.dark {
  background: var(--dark);
  color: var(--cream);
  max-width: none;
}
.page-head.dark .page-lede {
  color: rgba(244, 239, 228, 0.82);
}
.page-head.dark .crumbs,
.page-head.dark .page-meta {
  color: rgba(244, 239, 228, 0.55);
}
.page-head.dark .eyebrow {
  color: var(--gold);
}
.page-head.dark h1 em {
  color: var(--gold);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.52);
}
.crumbs a:hover {
  color: var(--terra);
}
.crumbs [aria-current] {
  color: var(--ink);
}

/* ------------------------------------------------------------ tekstlaag */

.prose {
  max-width: 74ch;
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(31, 31, 31, 0.86);
}
.prose.wide {
  max-width: 92ch;
}
.prose > * + * {
  margin-top: 1.1rem;
}
.prose h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.04;
  margin: 3.4rem 0 1.2rem;
  letter-spacing: -0.02em;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  margin: 2.4rem 0 0.8rem;
  color: var(--terra);
}
.prose h4 {
  font: 600 0.78rem var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 2rem 0 0.6rem;
}
.prose strong {
  font-weight: 600;
  color: var(--ink);
}
.prose em {
  font-style: italic;
}
.prose a:not(.button):not(.text-link) {
  border-bottom: 1px solid rgba(107, 58, 34, 0.4);
  color: var(--terra);
}
.prose a:not(.button):not(.text-link):hover {
  border-color: var(--terra);
}
.prose ul,
.prose ol {
  padding-left: 1.2rem;
  margin: 1.2rem 0;
}
.prose li + li {
  margin-top: 0.5rem;
}
.prose ul {
  list-style: none;
  padding-left: 0;
}
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
}
.prose ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--green);
}
.prose ol {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}
.prose ol > li {
  counter-increment: item;
  position: relative;
  padding-left: 2.2rem;
}
.prose ol > li:before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font: 500 0.85rem var(--sans);
  color: var(--terra);
  letter-spacing: 0.08em;
}
.prose blockquote {
  margin: 2.4rem 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--gold);
  font: italic 500 clamp(1.25rem, 2.2vw, 1.7rem) / 1.4 var(--serif);
  color: var(--terra);
}
.prose figure {
  margin: 2.5rem 0;
}
.prose figure img {
  height: auto;
  border-radius: 4px;
}
.prose figcaption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: rgba(31, 31, 31, 0.55);
}
.prose .lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink);
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
}

/* ------------------------------------------------------------- secties */

.section-narrow {
  padding: clamp(48px, 6vw, 96px) var(--page-gutter);
  max-width: var(--content-max);
  margin-inline: auto;
}
.section-narrow > .prose {
  margin-inline: auto;
}
/* Gelijk aan .section-narrow, zodat een band niet ineens meer lucht krijgt dan
   de tekstsecties eromheen. */
.band {
  padding: clamp(48px, 6vw, 96px) var(--page-gutter);
}
.band-green {
  background: var(--green);
  color: var(--cream);
}
.band-dark {
  background: var(--dark);
  color: var(--cream);
}
.band-terra {
  background: var(--terra);
  color: var(--cream);
}
.band-green .prose,
.band-dark .prose,
.band-terra .prose {
  color: rgba(244, 239, 228, 0.86);
}
.band-green h2,
.band-dark h2,
.band-terra h2,
.band-green h3,
.band-dark h3,
.band-terra h3 {
  color: var(--cream);
}
.band-green .prose h3,
.band-terra .prose h3,
.band-dark .prose h3 {
  color: var(--gold);
}
.band-green .eyebrow,
.band-dark .eyebrow,
.band-terra .eyebrow {
  color: var(--gold);
}
.band-inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  max-width: var(--content-max);
  margin-inline: auto;
}
.split.narrow-left {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.split-sticky {
  position: sticky;
  top: 130px;
}

/* --------------------------------------------------------- bouwstenen */

.callout {
  margin: 2.6rem 0;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 3px;
}
.callout h3,
.callout .callout-kop {
  margin: 0 0 0.7rem;
  font-size: 1.35rem;
}
.callout p {
  margin: 0 0 0.6rem;
  font-size: 0.96rem;
  line-height: 1.65;
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout.green {
  background: var(--green);
  color: var(--cream);
}
.callout.green h3,
.callout.green .callout-kop {
  color: var(--gold);
}
.callout.terra {
  background: var(--terra);
  color: var(--cream);
}
.callout.terra h3,
.callout.terra .callout-kop {
  color: var(--gold);
}
.callout.cream {
  background: rgba(74, 93, 58, 0.07);
  border: 1px solid rgba(74, 93, 58, 0.2);
}
.callout.cream h3,
.callout.cream .callout-kop {
  color: var(--terra);
}
.callout ul li:before {
  border-color: currentColor;
  opacity: 0.6;
}

.table-wrap {
  overflow-x: auto;
  margin: 2.2rem 0;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.spec-table caption {
  text-align: left;
  font: 600 0.7rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  padding-bottom: 0.9rem;
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: 0.85rem 1.2rem 0.85rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th {
  width: 38%;
  font-weight: 500;
  color: rgba(31, 31, 31, 0.6);
}
.spec-table thead th {
  color: var(--terra);
  font: 600 0.7rem var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: auto;
}
.spec-table.cols th {
  width: auto;
}

.faq {
  max-width: 74ch;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font: 500 clamp(1.05rem, 1.6vw, 1.3rem) / 1.35 var(--serif);
  transition: color 0.4s var(--spring);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font: 300 1.5rem var(--sans);
  color: var(--terra);
  transition: transform 0.4s var(--spring);
}
.faq details[open] summary {
  color: var(--terra);
}
.faq details[open] summary:after {
  content: "−";
}
.faq summary:hover {
  color: var(--terra);
}
.faq-body {
  padding: 0 2.5rem 1.6rem 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(31, 31, 31, 0.78);
  max-width: 66ch;
}
.faq-body p + p {
  margin-top: 0.8rem;
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 2.4rem 0 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.steps li {
  counter-increment: step;
  background: var(--cream);
  padding: 1.8rem 0 1.8rem 4rem;
  position: relative;
}
.steps li:before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.9rem;
  font: 500 1rem var(--sans);
  letter-spacing: 0.1em;
  color: var(--gold);
}
.steps h3 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
}
.steps p {
  margin: 0;
  max-width: 62ch;
  color: rgba(31, 31, 31, 0.75);
  font-size: 0.96rem;
}
.band-green .steps,
.band-dark .steps,
.band-terra .steps {
  background: rgba(244, 239, 228, 0.2);
  border-color: rgba(244, 239, 228, 0.25);
}
.band-green .steps li,
.band-dark .steps li,
.band-terra .steps li {
  background: inherit;
}
.band-green .steps p,
.band-dark .steps p,
.band-terra .steps p {
  color: rgba(244, 239, 228, 0.78);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 52px);
  margin-top: 2.6rem;
}
.feature-grid article b {
  display: block;
  font: 500 0.85rem var(--sans);
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.feature-grid article h3 {
  margin: 0 0 0.6rem;
  font-size: 1.45rem;
}
.feature-grid article p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.68;
  color: rgba(31, 31, 31, 0.75);
}
.band-green .feature-grid article p,
.band-dark .feature-grid article p,
.band-terra .feature-grid article p {
  color: rgba(244, 239, 228, 0.78);
}
.feature-grid.four {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: 2.8rem;
}
.stat-row div b {
  display: block;
  font: 500 clamp(2.4rem, 4.5vw, 3.6rem) / 1 var(--serif);
  color: var(--gold);
  letter-spacing: -0.02em;
}
.stat-row div p {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.8;
}

.quote-block {
  margin: clamp(40px, 6vw, 90px) auto;
  max-width: 60ch;
  text-align: center;
}
.quote-block p {
  font: italic 500 clamp(1.5rem, 3vw, 2.4rem) / 1.3 var(--serif);
  color: var(--terra);
  margin: 0 0 1.2rem;
}
.quote-block cite {
  font: 500 0.75rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(31, 31, 31, 0.55);
}

.todo {
  background: rgba(201, 162, 76, 0.24);
  border-bottom: 1px dashed rgba(107, 58, 34, 0.6);
  padding: 0 0.25em;
  font-style: italic;
  white-space: nowrap;
}

/* ------------------------------------------------------------ producten */

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(140px, 16vh, 190px) var(--page-gutter) clamp(40px, 5vw, 70px);
  max-width: var(--content-max);
  margin-inline: auto;
  align-items: start;
}
.product-media {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
/* De galerij bevat zowel staande als liggende opnamen. In een vast staand
   kader met een dwingende uitsnede ging er van de liggende foto's de helft af,
   inclusief de machine waar het bijschrift over gaat. De miniaturen tonen nu de
   hele foto in een vierkant kader op een mat, zoals de prenten elders op de
   site. De eerste foto blijft wel vullend: die is speciaal voor dit kader
   gemaakt. */
.product-media figure {
  margin: 0;
  overflow: hidden;
  background: rgba(74, 93, 58, 0.08);
  aspect-ratio: 1;
}
.product-media figure:not(:first-child) img {
  object-fit: contain;
  padding: 10px;
}
.product-media figure:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 11;
}
.product-media img {
  transition: transform 1.2s var(--silk);
}
.product-media figure:hover img {
  transform: scale(1.04);
}
.product-buy {
  position: sticky;
  top: 128px;
}
.product-badge {
  display: inline-block;
  font: 600 0.66rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  border: 1px solid rgba(107, 58, 34, 0.4);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.product-buy h1 {
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}
.product-buy .sub {
  font: italic 500 1.2rem var(--serif);
  color: var(--terra);
  margin: 0 0 1.4rem;
}
.product-buy .intro {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(31, 31, 31, 0.8);
  max-width: 48ch;
}
.icon-row {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0;
  display: grid;
  gap: 0.55rem;
}
.icon-row li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.88rem;
  color: rgba(31, 31, 31, 0.78);
}
.icon-row li span {
  color: var(--gold);
  font-size: 0.8rem;
}
.buy-box {
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.buy-price {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 1.3rem;
}
.buy-price strong {
  font: 500 2.6rem var(--serif);
  color: var(--terra);
  line-height: 1;
}
.buy-price small {
  font-size: 0.82rem;
  color: rgba(31, 31, 31, 0.6);
}
.buy-box .add {
  width: 100%;
  justify-content: center;
}
.buy-note {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: rgba(31, 31, 31, 0.6);
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  max-width: var(--content-max);
  margin-inline: auto;
}
.mini-product {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(31, 31, 31, 0.08);
}
.mini-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(74, 93, 58, 0.1);
}
/* De adoptiekaart gebruikt een staande foto in een liggend kader. Het gaat om
   het certificaat dat aan de boom hangt, en dat hangt in de bovenste helft.
   Zonder deze regel snijdt de uitsnede precies dat weg en houd je grond over. */
.mini-media[href*="boom-adopteren"] img {
  object-position: 50% 26%;
}
.mini-media img {
  transition: transform 1.1s var(--silk);
}
.mini-product:hover .mini-media img {
  transform: scale(1.05);
}
.mini-body {
  padding: 1.6rem 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.mini-sub {
  margin: 0;
  font: 600 0.64rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
}
.mini-product h3 {
  margin: 0;
  font-size: 1.75rem;
}
.mini-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: rgba(31, 31, 31, 0.72);
  flex: 1;
}
.mini-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.mini-foot strong {
  font: 500 1.5rem var(--serif);
  color: var(--terra);
  display: block;
  line-height: 1;
}
.mini-foot small {
  font-size: 0.72rem;
  color: rgba(31, 31, 31, 0.55);
}

/* ------------------------------------------------------------ kennisbank */

.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(24px, 3vw, 46px);
  max-width: var(--content-max);
  margin-inline: auto;
}
.kb-card {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
.kb-cat {
  margin: 0 0 0.9rem;
  font: 600 0.64rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
}
.kb-card h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  line-height: 1.08;
}
.kb-card h3 a:hover {
  color: var(--terra);
}
.kb-card p {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(31, 31, 31, 0.72);
}
.kb-meta {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.5);
}

.article-body {
  padding: 0 var(--page-gutter) clamp(48px, 6vw, 90px);
  max-width: var(--content-max);
  margin-inline: auto;
}
.article-body .prose {
  margin-inline: auto;
}
.summary-box {
  margin: 3rem auto 0;
  max-width: 74ch;
  background: rgba(74, 93, 58, 0.08);
  border-left: 3px solid var(--green);
  padding: 1.8rem 2rem;
}
.summary-box h2 {
  margin: 0 0 0.7rem;
  font-size: 1.5rem;
}
.summary-box p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.68;
}

/* ---------------------------------------------------------------- cta */

.cta-band {
  background: var(--dark);
  color: var(--cream);
  padding: clamp(56px, 7vw, 110px) var(--page-gutter);
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  margin: 0 0 1.1rem;
  letter-spacing: -0.03em;
}
.cta-band p {
  max-width: 58ch;
  margin: 0 auto 2.2rem;
  color: rgba(244, 239, 228, 0.8);
}
.cta-band .actions {
  justify-content: center;
}

/* ------------------------------------------------------------ formulier */

.form-card {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(107, 58, 34, 0.25);
  padding: clamp(24px, 3vw, 44px);
  max-width: 620px;
}
.form-grid {
  display: grid;
  gap: 1.1rem;
}
.form-grid label {
  display: block;
  font: 600 0.68rem var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.45rem;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  border-radius: 2px;
  font-size: 0.95rem;
}
.form-grid textarea {
  min-height: 130px;
  resize: vertical;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.form-grid .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.form-card button[type="submit"] {
  background: var(--green);
  color: var(--cream);
  border: 0;
  padding: 1rem 1.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.74rem;
  transition: background 0.4s var(--spring);
}
.form-card button[type="submit"]:hover {
  background: var(--dark);
}
.form-note {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  color: rgba(31, 31, 31, 0.6);
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-bottom: clamp(32px, 4vw, 60px);
}
.contact-cards article {
  border-top: 1px solid var(--line);
  padding-top: 1.3rem;
}
.contact-cards h3 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
}
.contact-cards p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(31, 31, 31, 0.72);
}
.contact-cards a {
  color: var(--terra);
  border-bottom: 1px solid rgba(107, 58, 34, 0.35);
}

/* ----------------------------------------------------------- recepten */

.recipe-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: 2.4rem;
}
.recipe-cards article {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(31, 31, 31, 0.08);
  padding: 1.5rem 1.5rem 1.7rem;
  border-radius: 4px;
}
.recipe-cards span {
  font: 600 0.64rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.recipe-cards h3 {
  margin: 0.8rem 0 0.6rem;
  font-size: 1.4rem;
}
.recipe-cards p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.75);
}
.recipe-cards .ingredients {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: rgba(31, 31, 31, 0.6);
}

/* -------------------------------------------------------------- footer */

.footer-contact a,
.footer-contact span {
  display: block;
  font-size: 0.78rem;
  opacity: 0.65;
  margin: 0.3rem 0;
}
.footer-pay {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(244, 239, 228, 0.14);
  margin-top: 2.5rem;
  padding-top: 1.8rem;
}
.footer-pay > span {
  display: block;
  font: 600 0.64rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.footer-pay ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  padding: 0;
  margin: 0;
}
.footer-pay li {
  font-size: 0.72rem;
  opacity: 0.5;
  letter-spacing: 0.08em;
}
.footer-legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(244, 239, 228, 0.14);
  margin-top: 2rem;
  padding-top: 1.6rem;
}
.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.footer-legal a,
.footer-legal p {
  margin: 0;
}
.promise {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 2.4rem !important;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(244, 239, 228, 0.14);
  font: 500 0.78rem var(--sans) !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85 !important;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 960px) {
  .product-detail,
  .split,
  .split.narrow-left {
    grid-template-columns: 1fr;
  }
  .product-buy,
  .split-sticky {
    position: static;
  }
  .product-media figure:first-child {
    aspect-ratio: 4 / 3;
  }
  .footer-legal {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .page-head {
    padding-top: clamp(120px, 20vh, 160px);
  }
  .product-detail {
    padding-top: 120px;
  }
  .product-media {
    grid-template-columns: 1fr;
  }
  .form-grid .row-2 {
    grid-template-columns: 1fr;
  }
  .steps li {
    padding-left: 3rem;
  }
  .prose {
    font-size: 0.98rem;
  }
}

/* ------------------------------------------- startpagina: nieuwe blokken */

.lampante {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 90px);
  padding: clamp(28px, 4vw, 60px);
  background: rgba(107, 58, 34, 0.06);
  border: 1px solid rgba(107, 58, 34, 0.18);
}
.lampante h3 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  margin: 0 0 1rem;
  color: var(--terra);
}
.lampante p {
  font-size: 0.98rem;
  line-height: 1.72;
  color: rgba(31, 31, 31, 0.8);
  max-width: 60ch;
}
.lampante em {
  font-style: italic;
}
.lampante-source {
  font-size: 0.82rem !important;
  color: rgba(31, 31, 31, 0.6) !important;
  margin-bottom: 0;
}
.lampante-source a {
  color: var(--terra);
  border-bottom: 1px solid rgba(107, 58, 34, 0.4);
}
.lampante-word span {
  display: block;
  font: 500 clamp(2.4rem, 5vw, 4.4rem) / 0.92 var(--serif);
  letter-spacing: -0.04em;
  color: var(--terra);
  margin-bottom: 1.6rem;
}
.lampante-word ol {
  counter-reset: refine;
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 1.6rem;
}
.lampante-word li {
  counter-increment: refine;
  font-size: 0.82rem;
  color: rgba(31, 31, 31, 0.62);
  padding: 0.35rem 0;
  border-top: 1px solid rgba(107, 58, 34, 0.18);
  break-inside: avoid;
}
.lampante-word li:before {
  content: counter(refine) " · ";
  color: var(--gold);
}
.problem-bridge {
  margin: clamp(36px, 4vw, 60px) 0 0;
  max-width: 54ch;
  font: italic 500 clamp(1.2rem, 2vw, 1.6rem) / 1.45 var(--serif);
  color: var(--green);
}

.scarcity-title {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  margin: 0 0 1.2rem;
  letter-spacing: -0.03em;
}
.scarcity-lede {
  max-width: 62ch;
  color: rgba(244, 239, 228, 0.82);
  font-size: 1.05rem;
  line-height: 1.66;
}
.scarcity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(40px, 5vw, 70px);
}
.scarcity-cards article {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(24px, 3vw, 40px);
}
.scarcity-cards h3 {
  margin: 0 0 0.7rem;
  font-size: 1.7rem;
  color: var(--ink);
}
.scarcity-cards p {
  margin: 0 0 1.6rem;
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(31, 31, 31, 0.75);
}

.recipes-more {
  margin-top: clamp(28px, 3vw, 46px);
}

@media (max-width: 900px) {
  .lampante {
    grid-template-columns: 1fr;
  }
  .lampante-word ol {
    columns: 2;
  }
}

/* ------------------------------------------- correcties na visuele controle */

/* Bestelknop op de productpagina's: zelfde pil als op de startpagina. */
.buy-box .add,
.mini-foot .add {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  border-radius: 999px;
  padding: 5px 6px 5px 24px;
  background: var(--green);
  color: var(--cream);
  box-shadow: 0 14px 35px rgba(38, 51, 31, 0.16);
  transition:
    transform 0.7s var(--spring),
    background 0.5s var(--spring);
}
.buy-box .add > span:first-child,
.mini-foot .add > span:first-child {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.buy-box .add .button-icon,
.mini-foot .add .button-icon {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.12);
}
.buy-box .add:hover,
.mini-foot .add:hover {
  transform: translateY(-3px) scale(1.015);
  background: var(--dark);
}
.mini-foot .add {
  min-height: 48px;
  padding-left: 18px;
  gap: 12px;
}
.mini-foot .button-icon {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
}

/* Lopende tekst lijnt uit met de paginakop in plaats van gecentreerd te staan. */
.section-narrow > .prose,
.article-body .prose,
.summary-box {
  margin-inline: 0;
}
.band-inner > .prose {
  margin-inline: 0;
}

/* Mobiel: de galerij wordt een swipebare rij, zodat titel en prijs snel in beeld staan. */
@media (max-width: 960px) {
  .product-media {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    scrollbar-width: thin;
  }
  .product-media figure,
  .product-media figure:first-child {
    flex: 0 0 min(78%, 420px);
    scroll-snap-align: center;
    aspect-ratio: 4 / 5;
  }
  /* in de mobiele carrousel is er ruimte zat, dus daar mag de hele foto in
     beeld staan in plaats van een uitsnede */
  .product-media figure img {
    object-fit: contain;
    padding: 8px;
  }
  .product-detail {
    gap: 28px;
  }
}

/* ============================================================ de fles zelf */

.bottle {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  isolation: isolate;
}
.bottle img {
  position: relative;
  z-index: 2;
  width: auto;
  height: clamp(320px, 42vw, 560px);
  object-fit: contain;
  filter: drop-shadow(0 26px 42px rgba(28, 38, 23, 0.28));
  animation: bottle-float 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}
.bottle.tall img {
  height: clamp(380px, 52vw, 680px);
}
.bottle-glow {
  position: absolute;
  z-index: 1;
  top: 8%;
  width: min(120%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 162, 76, 0.22) 0%,
    rgba(201, 162, 76, 0.07) 42%,
    transparent 68%
  );
  animation: glow-breathe 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.bottle-dark .bottle-glow {
  background: radial-gradient(
    circle,
    rgba(201, 162, 76, 0.3) 0%,
    rgba(122, 140, 84, 0.12) 45%,
    transparent 70%
  );
}
.bottle-shadow {
  position: relative;
  z-index: 0;
  margin-top: -18px;
  width: min(58%, 190px);
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(31, 31, 31, 0.3) 0%,
    rgba(31, 31, 31, 0.12) 45%,
    transparent 72%
  );
  filter: blur(5px);
  animation: shadow-breathe 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.bottle-dark .bottle-shadow {
  background: radial-gradient(
    ellipse,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.2) 45%,
    transparent 72%
  );
}
.bottle figcaption {
  margin-top: 1.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.5);
  text-align: center;
  max-width: 30ch;
}
.bottle-dark figcaption {
  color: rgba(244, 239, 228, 0.55);
}

@keyframes bottle-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.4deg);
  }
  50% {
    transform: translate3d(0, -16px, 0) rotate(0.4deg);
  }
}
@keyframes glow-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}
@keyframes shadow-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(0.86);
    opacity: 0.6;
  }
}

.hero-bottle {
  position: absolute;
  right: clamp(3vw, 7vw, 130px);
  bottom: 14%;
  z-index: 3;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.hero-bottle-glow {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 162, 76, 0.2) 0%,
    rgba(201, 162, 76, 0.06) 45%,
    transparent 70%
  );
  animation: glow-breathe 11s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-bottle img {
  position: relative;
  width: auto;
  height: min(58vh, 480px);
  object-fit: contain;
  filter: drop-shadow(0 40px 60px rgba(8, 14, 6, 0.55));
  animation: bottle-float 11s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}
@media (max-width: 1180px) {
  .hero-bottle {
    display: none;
  }
}

/* --------------------------------------------------- Special Reserve band */

.reserve-band {
  position: relative;
  overflow: hidden;
}
.reserve-band:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 70% at 26% 45%,
    rgba(122, 140, 84, 0.28) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.reserve-stage {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.reserve-copy h2 {
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  letter-spacing: -0.03em;
  margin: 0 0 1.4rem;
}
.reserve-copy h2 em {
  font-style: italic;
  color: var(--gold);
}
.reserve-lede {
  max-width: 52ch;
  color: rgba(244, 239, 228, 0.82);
  font-size: 1.02rem;
  line-height: 1.7;
}
.reserve-facts {
  display: grid;
  /* Stond op auto-fit met een minimum van 150px. Zodra het blok onder de 600px
     kwam, en dat gebeurt al bij een venster van rond de 1100px, viel de vierde
     cel op een eigen regel met een leeg groen vlak ernaast. Vier vaste kolommen
     houden de regel heel: de tekst breekt nu binnen de cel in plaats van dat de
     rij breekt. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 2.6rem 0;
  background: rgba(244, 239, 228, 0.16);
  border-block: 1px solid rgba(244, 239, 228, 0.16);
}
.reserve-facts div {
  background: var(--dark);
  /* De rechtermarge krimpt mee, anders houden vier smalle cellen te weinig
     ruimte over voor de waarde zelf. */
  padding: 1.1rem clamp(0.55rem, 1.3vw, 1.2rem) 1.1rem 0;
}
.reserve-facts dt {
  font: 600 0.62rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.reserve-facts dd {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(244, 239, 228, 0.9);
}
.reserve-action {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  flex-wrap: wrap;
}
.reserve-price {
  font: 500 2.6rem var(--serif);
  color: var(--cream);
  line-height: 1;
}
.reserve-price small {
  font: 500 0.78rem var(--sans);
  color: rgba(244, 239, 228, 0.55);
  margin-left: 0.5rem;
}

.product-stage {
  background: var(--dark);
  border-radius: 4px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.product-stage:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    58% 60% at 50% 42%,
    rgba(122, 140, 84, 0.3) 0%,
    transparent 72%
  );
}
.head-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  max-width: calc(var(--content-max) + var(--page-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  overflow: clip;
}
.head-stage {
  padding-top: clamp(150px, 17vh, 210px);
}
.head-stage .page-head {
  padding-inline: 0;
  padding-top: 0;
}
.head-stage > .bottle img {
  height: clamp(300px, 30vw, 440px);
}
.head-stage > .bottle {
  padding-bottom: clamp(24px, 4vw, 60px);
}
@media (max-width: 900px) {
  .head-stage {
    grid-template-columns: 1fr;
  }
  .head-stage > .bottle {
    display: none;
  }
  .reserve-stage {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------- verhaallijn */

/* De overgangszin staat tussen twee secties in en telde met 96px boven en
   onder dubbel op bij de sectiepadding: op drie plekken op de homepagina zat er
   daardoor bijna 250px extra tussen twee alinea's. De zin is inhoud, geen
   scheiding, dus hij hoort dichter bij de tekst te staan die hij verbindt. */
.bridge {
  max-width: 44ch;
  margin: clamp(28px, 3.4vw, 52px) auto;
  padding-inline: var(--page-gutter);
  text-align: center;
  font: italic 500 clamp(1.3rem, 2.4vw, 1.95rem) / 1.42 var(--serif);
  color: var(--green);
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 1.1s var(--silk),
    transform 1.1s var(--silk);
}
.bridge.visible {
  opacity: 1;
  transform: none;
}
.bridge.on-cream {
  color: var(--terra);
}

.photo-band {
  position: relative;
  height: clamp(320px, 46vw, 620px);
  overflow: hidden;
  display: grid;
  place-items: end start;
}
.photo-band.short {
  height: clamp(240px, 32vw, 420px);
}
.photo-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04);
}
.photo-band:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(10, 16, 8, 0.88) 0%,
    rgba(10, 16, 8, 0.55) 32%,
    rgba(10, 16, 8, 0.08) 62%,
    transparent 80%
  );
  pointer-events: none;
}
.photo-band blockquote {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(28px, 5vw, 72px) var(--page-gutter);
  max-width: 46ch;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(10, 16, 8, 0.6);
}
.photo-band blockquote p {
  font: italic 500 clamp(1.3rem, 2.6vw, 2.1rem) / 1.4 var(--serif);
  margin: 0 0 0.8rem;
}
.photo-band cite {
  font: 500 0.72rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--gold);
}

/* De band als tweeluik op grote schermen.

   De foto's die hier staan zijn staand (1200 bij 1600). In een band over de
   volle breedte van 1440 bij 620 bleef er 32 procent van het beeld over: de
   rest werd weggesneden, en het citaat lag boven op een druk stuk foto met
   alleen een verloop als achtergrond. Nu krijgt de foto een staande kolom
   waarin hij vrijwel heel past, en staat het citaat op een eigen vlak. Dat
   leest rustiger en het contrast is niet meer afhankelijk van wat er toevallig
   onder de tekst zit. */
@media (min-width: 900px) {
  .photo-band {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    place-items: stretch;
    height: auto;
    min-height: clamp(440px, 44vw, 600px);
    background: var(--green);
  }
  .photo-band img {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    height: 100%;
  }
  .photo-band:after {
    display: none;
  }
  /* Het citaat staat midden in zijn eigen vlak met een leesmaat van ongeveer
     26 tekens per regel, zodat het drie of vier regels wordt in plaats van een
     smalle kolom van zes. */
  .photo-band blockquote {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    max-width: 26ch;
    padding-block: clamp(40px, 5vw, 72px);
    text-shadow: none;
  }
  .photo-band blockquote p {
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  }
  .photo-band.short {
    min-height: clamp(340px, 32vw, 440px);
  }
}

/* Onder de tweeluikgrens blijft het citaat over de foto liggen, maar de band
   krijgt wel de ruimte om staand beeld te tonen in plaats van er een smalle
   strook uit te snijden. */
@media (max-width: 899px) {
  .photo-band {
    height: auto;
    aspect-ratio: 1;
  }
}
@media (max-width: 600px) {
  .photo-band {
    aspect-ratio: 4 / 5;
  }
}

.next-steps {
  padding: clamp(48px, 6vw, 96px) var(--page-gutter);
  max-width: var(--content-max);
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.next-label {
  margin: 0 0 2rem;
  font: 600 0.66rem var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
}
.next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
}
.next-grid a {
  position: relative;
  background: var(--cream);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(46px, 5vw, 58px);
  display: grid;
  gap: 0.5rem;
  align-content: start;
  transition:
    background 0.7s var(--silk),
    transform 0.7s var(--silk);
}
.next-grid a:hover {
  background: rgba(74, 93, 58, 0.07);
}
.next-grid span {
  font: 600 0.62rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
}
.next-grid strong {
  font: 500 clamp(1.35rem, 2vw, 1.7rem) / 1.15 var(--serif);
}
.next-grid em {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.68);
}
.next-grid b {
  position: absolute;
  left: clamp(22px, 3vw, 34px);
  bottom: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--terra);
  transition: transform 0.7s var(--silk);
}
.next-grid a:hover b {
  transform: translateX(6px);
}

.toc {
  max-width: 74ch;
  margin: 0 0 clamp(32px, 4vw, 56px);
  padding: 1.4rem 1.6rem;
  background: rgba(74, 93, 58, 0.06);
  border-left: 2px solid var(--green);
}
.toc p {
  margin: 0 0 0.7rem;
  font: 600 0.62rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}
.toc li {
  break-inside: avoid;
  padding: 0.22rem 0;
}
.toc a {
  font-size: 0.88rem;
  color: rgba(31, 31, 31, 0.75);
  border-bottom: 1px solid transparent;
}
.toc a:hover {
  color: var(--terra);
  border-color: rgba(107, 58, 34, 0.4);
}
@media (max-width: 600px) {
  .toc ol {
    columns: 1;
  }
}

.buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(244, 239, 228, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(31, 31, 31, 0.12);
  transform: translate3d(0, 110%, 0);
  transition: transform 0.6s var(--silk);
}
.buy-bar.show {
  transform: none;
}
.buy-bar strong {
  display: block;
  font: 500 1.05rem var(--serif);
}
.buy-bar span {
  font-size: 0.76rem;
  color: rgba(31, 31, 31, 0.6);
}
.buy-bar .add {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 6px 0 20px;
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.buy-bar .button-icon {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.14);
}
@media (max-width: 860px) {
  .buy-bar {
    display: flex;
  }
}

.section-narrow,
.article-body {
  position: relative;
}

/* ================================= het artikel in twee kolommen
 *
 * WAT HIER FOUT GING. De tekstkolom is 74ch en stond links in een container van
 * 1267px. Op een scherm van 1440 bleef daar ruim 470px van over die nooit iets
 * deed. Banden en rasters op diezelfde pagina liepen wél over de volle breedte,
 * dus het las niet als een keuze maar als een pagina die niet af is.
 *
 * De inhoudsopgave en de visualisatie staan nu in een eigen kolom. De
 * inhoudsopgave blijft meelopen met de lezer, want dat is precies waarvoor hij
 * bedoeld is. De samenvatting, het voorbehoud en het auteursblok blijven onder
 * de tekst staan: dat is einde-artikel-inhoud en hoort in de leesvolgorde.
 *
 * Onder 1100px klapt alles terug naar één kolom en gaat de zijkolom bovenaan
 * staan, zodat de inhoudsopgave daar blijft waar hij nu ook al staat.
 */
.artikel-rail {
  display: grid;
  gap: clamp(20px, 2vw, 28px);
  align-content: start;
}
@media (min-width: 1100px) {
  .article-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    column-gap: clamp(2.5rem, 4vw, 5rem);
    align-items: start;
  }
  .article-body > .artikel-kolom {
    grid-column: 1;
    min-width: 0;
  }
  .article-body > .artikel-rail {
    grid-column: 2;
    position: sticky;
    top: 132px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  /* in de zijkolom is de inhoudsopgave één kolom, anders wordt hij onleesbaar */
  .artikel-rail .toc {
    max-width: none;
    margin: 0;
  }
  .artikel-rail .toc ol {
    columns: 1;
  }
  .artikel-rail .grafiek {
    margin: 0;
  }
  /* de tekst mag nu breder dan 74ch omdat er een kolom naast staat */
  .article-body .artikel-kolom > .prose {
    max-width: 72ch;
    margin-inline: 0;
  }
  .article-body .summary-box,
  .article-body .voorbehoud,
  .article-body .auteur {
    max-width: 72ch;
    margin-inline: 0;
  }
}
@media (max-width: 1099px) {
  /* de zijkolom hoort bovenaan, want daar staat de inhoudsopgave in */
  .article-body {
    display: flex;
    flex-direction: column;
  }
  .article-body > .artikel-rail {
    order: -1;
  }
  /* de visualisatie is op een smal scherm een blok tussen de tekst door en
     hoeft daar niet nog een keer boven de inhoudsopgave te staan */
  .artikel-rail .rail-grafiek {
    display: none;
  }
}
body.subpage main > .section-narrow:nth-of-type(odd):before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 60% at 15% 0%,
    rgba(201, 162, 76, 0.07) 0%,
    transparent 60%
  );
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bottle img,
  .bottle-glow,
  .bottle-shadow,
  .hero-bottle img {
    animation: none;
  }
  .bridge {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================ de olijventak boven het menu
   Een botanische illustratie loopt over de volle breedte van de balk. De
   menu-items hangen eronder aan een dun steeltje met een olijf, alsof ze aan
   de tak groeien. Onder 1180px klapt het menu dicht en verdwijnt de tak. */

@media (min-width: 1181px) {
  .site-header {
    height: 122px;
    align-items: flex-end;
    padding-bottom: 17px;
  }
  .brand {
    padding-bottom: 2px;
  }
}

.branch {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 8px;
  height: 62px;
  background: url("/assets/menutak.png") repeat-x center / auto 100%;
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
  /* de uiteinden vervagen, anders snijdt de tak hard af in de ronde hoeken */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 90px,
    #000 calc(100% - 90px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 90px,
    #000 calc(100% - 90px),
    transparent 100%
  );
  animation: branch-settle 1.6s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes branch-settle {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  to {
    opacity: 0.92;
    transform: none;
  }
}

/* het steeltje waaraan een menu-item hangt */
.nav a {
  position: relative;
  padding-top: 4px;
}
.nav a:before,
.nav a:after {
  content: "";
  position: absolute;
  left: 50%;
  display: block;
  pointer-events: none;
  transition:
    background 0.6s var(--silk),
    height 0.6s var(--silk),
    transform 0.6s var(--silk),
    opacity 0.6s var(--silk);
}
/* de steel */
.nav a:before {
  bottom: calc(100% + 4px);
  width: 1px;
  height: 16px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(201, 162, 76, 0.15),
    rgba(201, 162, 76, 0.75)
  );
}
/* de olijf aan het uiteinde */
.nav a:after {
  bottom: calc(100% + 1px);
  width: 6px;
  height: 7px;
  border-radius: 50% 50% 52% 52%;
  transform: translateX(-50%) scale(1);
  background: radial-gradient(
    circle at 34% 30%,
    rgba(224, 210, 180, 0.9) 0%,
    rgba(150, 120, 58, 0.95) 45%,
    rgba(74, 58, 26, 0.95) 100%
  );
  opacity: 0.85;
}

.nav a:hover:before,
.nav a:focus-visible:before {
  height: 21px;
  background: linear-gradient(
    to bottom,
    rgba(201, 162, 76, 0.25),
    rgba(201, 162, 76, 1)
  );
}
.nav a:hover:after,
.nav a:focus-visible:after {
  opacity: 1;
  transform: translateX(-50%) scale(1.35) translateY(1px);
  background: radial-gradient(
    circle at 34% 30%,
    rgba(255, 240, 200, 0.95) 0%,
    var(--gold) 42%,
    rgba(150, 110, 40, 1) 100%
  );
}
.nav a.active:after {
  opacity: 1;
  transform: translateX(-50%) scale(1.3);
  background: radial-gradient(
    circle at 34% 30%,
    rgba(255, 240, 200, 0.95) 0%,
    var(--gold) 42%,
    rgba(150, 110, 40, 1) 100%
  );
}
.nav a.active:before {
  background: linear-gradient(
    to bottom,
    rgba(201, 162, 76, 0.2),
    rgba(201, 162, 76, 0.95)
  );
}

.nav-label {
  position: relative;
  z-index: 1;
}

@media (max-width: 1180px) {
  .branch {
    display: none;
  }
  .nav a:before,
  .nav a:after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .branch {
    animation: none;
    opacity: 0.92;
  }
}

/* ======================================= kop zonder kader, tak vrij op de pagina
   De pil is weg. Daardoor moet de tekstkleur meebewegen met wat er onder de kop
   ligt: licht op de donkere hero, donker zodra er crème onder komt. */

@media (min-width: 1181px) {
  .site-header {
    width: min(1620px, calc(100% - 40px));
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding-inline: clamp(10px, 2vw, 34px);
  }
  .site-header:before {
    display: none;
  }
  .site-header.scrolled {
    background: none;
    box-shadow: none;
    transform: translateX(-50%) translateY(-4px);
  }
  /* zachte waas in plaats van een rand, zodat de tekst leesbaar blijft */
  .site-header:after {
    content: "";
    position: absolute;
    inset: -40px -6vw -54px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(14, 21, 11, 0.72) 0%,
      rgba(14, 21, 11, 0.55) 62%,
      rgba(14, 21, 11, 0) 100%
    );
    transition: background 0.8s var(--silk);
  }
  .branch {
    left: clamp(10px, 2vw, 34px);
    right: clamp(10px, 2vw, 34px);
  }

  /* lichte ondergrond: subpagina's, en de startpagina zodra de hero voorbij is */
  body.subpage .site-header,
  .site-header.on-light {
    color: var(--ink);
  }
  body.subpage .site-header:after,
  .site-header.on-light:after {
    background: linear-gradient(
      to bottom,
      rgb(246, 240, 229) 0%,
      rgb(246, 240, 229) 72%,
      rgba(246, 240, 229, 0) 100%
    );
  }
  body.subpage .nav a,
  .site-header.on-light .nav a {
    color: rgba(31, 31, 31, 0.74);
  }
  body.subpage .nav a:hover,
  body.subpage .nav a.active,
  .site-header.on-light .nav a:hover,
  .site-header.on-light .nav a.active {
    color: var(--terra);
  }
  body.subpage .brand,
  .site-header.on-light .brand {
    color: var(--ink);
  }
  body.subpage .cart-button,
  .site-header.on-light .cart-button {
    color: var(--ink);
  }
  body.subpage .branch,
  .site-header.on-light .branch {
    opacity: 0.85;
  }
}

/* ------------------------------------------------------------- de mand */

.cart-button {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 0.69rem;
  letter-spacing: 0.115em;
  transition: color 0.55s var(--spring);
}
.cart-button:hover {
  background: none;
  color: var(--gold);
}
.cart-label {
  position: relative;
  padding-bottom: 3px;
}
/* dun streepje onder het woord, zoals de steeltjes in het menu */
.cart-label:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.28;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform 0.6s var(--silk),
    opacity 0.6s var(--silk);
}
.cart-button:hover .cart-label:after {
  transform: scaleX(1);
  opacity: 0.7;
}

/* de teller is een olijf, in dezelfde vorm als die aan de tak hangen */
.cart-count {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 27px;
  margin: 0;
  border-radius: 50% 50% 52% 52%;
  font: 600 0.72rem var(--sans);
  letter-spacing: 0;
  color: var(--dark);
  background: radial-gradient(
    circle at 34% 30%,
    rgba(255, 240, 205, 0.95) 0%,
    var(--gold) 44%,
    rgba(146, 108, 38, 1) 100%
  );
  box-shadow: 0 3px 10px rgba(28, 38, 23, 0.22);
  transition:
    transform 0.6s var(--spring),
    background 0.6s var(--silk),
    color 0.6s var(--silk),
    box-shadow 0.6s var(--silk);
}
/* het steeltje waaraan de olijf hangt */
.cart-count:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 5px;
  transform: translateX(-50%);
  background: rgba(201, 162, 76, 0.7);
}
/* lege mand: alleen een omtrek, geen vulling */
.cart-count[data-empty="true"] {
  background: none;
  color: inherit;
  box-shadow: none;
  border: 1px solid currentColor;
  opacity: 0.45;
}
.cart-button:hover .cart-count[data-empty="true"] {
  opacity: 0.75;
}
.cart-button:hover .cart-count {
  transform: translateY(1px) scale(1.06);
}

@media (max-width: 1180px) {
  .cart-count:before {
    display: none;
  }
}
@media (max-width: 520px) {
  .cart-label {
    display: none;
  }
  .cart-button {
    font-size: 0.69rem;
  }
}

/* ==================================================== de mand, opnieuw gezet
   Eén regel per product: miniatuur, naam, aantal, regeltotaal en een discrete
   kruisknop. Alles op hairlines, geen kaders. */

.cart {
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 34px) clamp(20px, 2.4vw, 30px);
}
.cart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}
.cart-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  line-height: 1;
}
.cart-head-note {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.5);
}
.cart-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(31, 31, 31, 0.55);
  border-radius: 50%;
  transition:
    background 0.5s var(--silk),
    color 0.5s var(--silk);
}
.cart-close:hover {
  background: rgba(74, 93, 58, 0.09);
  color: var(--ink);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.cart-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  grid-template-areas: "thumb info qty som";
  align-items: center;
  column-gap: 0.9rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cart-thumb {
  grid-area: thumb;
  width: 52px;
  height: 62px;
  overflow: hidden;
  background: rgba(74, 93, 58, 0.09);
  border-radius: 2px;
}
.cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-info {
  grid-area: info;
  min-width: 0;
}
.cart-info h3 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  line-height: 1.15;
}
.cart-info p {
  margin: 0;
  font-size: 0.76rem;
  color: rgba(31, 31, 31, 0.55);
}
.cart-qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.cart-qty button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(31, 31, 31, 0.16);
  border-radius: 50%;
  background: none;
  color: rgba(31, 31, 31, 0.72);
  font: 400 0.95rem/1 var(--sans);
  transition:
    background 0.45s var(--silk),
    border-color 0.45s var(--silk),
    color 0.45s var(--silk);
}
.cart-qty button:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}
.cart-qty span {
  min-width: 26px;
  text-align: center;
  font: 500 0.92rem var(--sans);
}
.cart-row > strong {
  grid-area: som;
  font: 500 1.15rem var(--serif);
  color: var(--terra);
  white-space: nowrap;
  padding-left: 0.4rem;
}
.cart-remove {
  position: absolute;
  top: 0.75rem;
  right: -6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: 50%;
  color: rgba(31, 31, 31, 0.32);
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transition:
    opacity 0.4s var(--silk),
    color 0.4s var(--silk);
}
.cart-row:hover .cart-remove,
.cart-remove:focus-visible {
  opacity: 1;
}
.cart-remove:hover {
  color: var(--terra);
}

.cart-empty {
  padding: 3rem 0 0;
}
.cart-empty p {
  margin: 0 0 1rem;
  font: italic 500 1.4rem var(--serif);
  color: rgba(31, 31, 31, 0.6);
}

.cart-bottom {
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.cart-shipping {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  color: rgba(31, 31, 31, 0.62);
}
.cart-shipping b {
  color: var(--green);
  font-weight: 600;
}
.cart-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.cart-sum span {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.55);
}
.cart-total {
  font: 500 1.9rem var(--serif);
  color: var(--terra);
}
.checkout {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
  padding: 0 6px 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background 0.5s var(--silk),
    transform 0.6s var(--spring),
    opacity 0.4s var(--silk);
}
.checkout .button-icon {
  background: rgba(255, 255, 255, 0.14);
}
.checkout:hover:not(:disabled) {
  background: var(--dark);
  transform: translateY(-2px);
}
.checkout:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cart-bottom small {
  display: block;
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(31, 31, 31, 0.5);
}

@media (max-width: 460px) {
  .cart-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb info som"
      "thumb qty  qty";
    row-gap: 0.7rem;
  }
  .cart-thumb {
    width: 46px;
    height: 56px;
  }
  .cart-remove {
    opacity: 1;
  }
}

/* ================================================= de brandende olielamp
   Boven het woord LAMPENOLIE staat een Romeinse lucerna. De lamp zelf staat
   stil, alleen de vlam en de gloed bewegen, elk op een eigen ritme zodat het
   flakkeren onregelmatig aanvoelt. */

.lamp {
  position: relative;
  width: min(300px, 68%);
  margin: 0 0 clamp(14px, 2vw, 28px);
}
.lamp-body {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(107, 58, 34, 0.16));
}
/* de vlam staat met haar voet op de pit: 9,3% breed, 20,6% hoog */
.lamp-flame {
  position: absolute;
  left: 9.3%;
  top: 20.6%;
  height: 34%;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  animation: vlam-wieg 2.9s ease-in-out infinite;
  will-change: transform;
}
.lamp-flame img {
  display: block;
  width: auto;
  height: 100%;
  transform-origin: 50% 100%;
  animation: vlam-pols 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(224, 160, 60, 0.55));
}
/* de warme gloed rond de pit */
.lamp-halo {
  position: absolute;
  left: 9.3%;
  top: 14%;
  width: 42%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(240, 190, 105, 0.5) 0%,
    rgba(226, 160, 70, 0.24) 32%,
    rgba(201, 162, 76, 0.08) 58%,
    transparent 74%
  );
  animation: gloed 3.7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vlam-wieg {
  0%,
  100% {
    transform: translate(-50%, -100%) rotate(-2.2deg);
  }
  35% {
    transform: translate(-50%, -100%) rotate(1.6deg);
  }
  70% {
    transform: translate(-50%, -100%) rotate(-0.8deg);
  }
}
@keyframes vlam-pols {
  0%,
  100% {
    transform: scale(1, 1);
    opacity: 0.94;
  }
  30% {
    transform: scale(0.96, 1.07);
    opacity: 1;
  }
  55% {
    transform: scale(1.03, 0.95);
    opacity: 0.9;
  }
  80% {
    transform: scale(0.98, 1.03);
    opacity: 1;
  }
}
@keyframes gloed {
  0%,
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.09);
  }
  65% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.97);
  }
}

@media (max-width: 900px) {
  .lamp {
    width: min(230px, 56%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lamp-flame,
  .lamp-flame img,
  .lamp-halo {
    animation: none;
  }
}

/* ================================================================= slider
   Vier bevindingen naast elkaar, met scroll-snap. Vegen op touch en
   trackpad doet de browser zelf; de knoppen springen per slide. */

.slider {
  margin-top: clamp(40px, 5vw, 76px);
}
.slider-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  scrollbar-width: none;
  border-top: 1px solid rgba(31, 31, 31, 0.16);
  border-bottom: 1px solid rgba(31, 31, 31, 0.16);
}
.slider-track::-webkit-scrollbar {
  display: none;
}
.slider-track:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: clamp(32px, 4vw, 62px) 0 clamp(34px, 4vw, 62px);
}
.slide-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 86px);
  align-items: start;
  min-height: clamp(190px, 16vw, 250px);
}
.slide-right {
  padding-left: clamp(0px, 2vw, 34px);
  border-left: 1px solid rgba(31, 31, 31, 0.14);
}

.slide-kicker {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0 0 1.1rem;
  font: 600 0.66rem var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
}
.slide-kicker i {
  font: 500 0.82rem var(--serif);
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.slide h3 {
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 14ch;
}
.slide-body {
  margin: 0;
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(31, 31, 31, 0.74);
}
/* het bewijsstuk: een citaat van het etiket zelf */
.slide-spec {
  margin: 0 0 1.3rem;
  padding: 0 0 0 1.2rem;
  border-left: 2px solid var(--gold);
  font: italic 500 clamp(1.2rem, 2.1vw, 1.75rem) / 1.4 var(--serif);
  color: var(--terra);
}
.slide-uitleg {
  margin: 0 0 1.3rem;
  font-size: 0.9rem;
  line-height: 1.68;
  color: rgba(31, 31, 31, 0.7);
}
.slide-ours {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(31, 31, 31, 0.14);
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(31, 31, 31, 0.85);
}
.slide-ours b {
  display: block;
  margin-bottom: 0.25rem;
  font: 600 0.64rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}
.slide-ours a {
  color: var(--terra);
  border-bottom: 1px solid rgba(107, 58, 34, 0.4);
}

/* bediening */
.slider-controls {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: clamp(20px, 2.4vw, 32px);
}
.slider-count {
  margin: 0;
  flex: 0 0 auto;
  font: 500 0.9rem var(--serif);
  letter-spacing: 0.1em;
  /* stond op 0.5 en haalde daarmee 3.14:1, onder de WCAG-eis van 4.5:1 */
  color: rgba(31, 31, 31, 0.72);
}
.slider-count b {
  font-weight: 500;
  color: var(--terra);
}
.slider-count i {
  font-style: normal;
  opacity: 0.4;
  margin: 0 0.2rem;
}
.slider-rail {
  flex: 1;
  height: 1px;
  background: rgba(31, 31, 31, 0.16);
  position: relative;
  overflow: hidden;
}
.slider-rail span {
  position: absolute;
  inset: 0;
  background: var(--terra);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.35s var(--silk);
}
.slider-buttons {
  flex: 0 0 auto;
  display: flex;
  gap: 0.6rem;
}
.slider-buttons button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(31, 31, 31, 0.2);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font-size: 1rem;
  transition:
    background 0.5s var(--silk),
    border-color 0.5s var(--silk),
    color 0.5s var(--silk),
    opacity 0.4s var(--silk),
    transform 0.5s var(--spring);
}
.slider-buttons button:hover:not(:disabled) {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
  transform: translateY(-2px);
}
.slider-buttons button:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

@media (max-width: 860px) {
  .slide-inner {
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: 0;
  }
  .slide-right {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(31, 31, 31, 0.14);
    padding-top: 22px;
  }
}
@media (max-width: 700px) {
  .slider-count {
    font-size: 0.82rem;
  }
  .slider-buttons button {
    width: 42px;
    height: 42px;
  }
}

/* ======================================================== de perceelkaart
   Een getekende plattegrond in de sectie "klein en direct". Het papier ligt
   als los vel op het donkergroen; de labels staan in echte tekst bovenop,
   zodat ze scherp blijven en vertaalbaar zijn. */

.direct-lede {
  max-width: 34ch;
  margin: 1.6rem 0 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(244, 239, 228, 0.78);
}

.plan {
  margin: clamp(28px, 3vw, 44px) 0 0;
}
.plan-sheet {
  position: relative;
  display: block;
  border-radius: 2px;
  box-shadow:
    0 18px 44px rgba(10, 16, 8, 0.34),
    0 2px 0 rgba(255, 255, 255, 0.06);
  transform: rotate(-0.7deg);
  transition: transform 0.9s var(--silk);
}
.plan-sheet:hover {
  transform: rotate(0deg) translateY(-3px);
}
.plan-sheet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* de labels op de kaart */
.plan-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  background: rgba(246, 240, 229, 0.88);
  border: 1px solid rgba(107, 58, 34, 0.28);
  border-radius: 999px;
  font: 600 0.58rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  white-space: nowrap;
  backdrop-filter: blur(2px);
}
.plan-pin:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terra);
}
/* het label op het pad krijgt de kleur van de olijf */
.plan-pin-weg {
  color: var(--green);
  border-color: rgba(74, 93, 58, 0.35);
}
.plan-pin-weg:before {
  background: var(--green);
}

.plan figcaption {
  margin-top: 1.1rem;
  max-width: 38ch;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(244, 239, 228, 0.6);
}

@media (max-width: 960px) {
  .plan-sheet {
    transform: none;
  }
  .plan-pin {
    font-size: 0.54rem;
    padding: 0.24rem 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-sheet,
  .plan-sheet:hover {
    transform: none;
    transition: none;
  }
}

/* ============================================ de fles in de productkaart
   De groepsfoto is vervangen door uitsnedes: elke kaart heeft nu zijn eigen
   fles, die rechts uit het kader loopt. De tekst houdt links ruimte vrij. */

.product-bottle {
  position: absolute;
  right: -7%;
  bottom: -5%;
  z-index: 0;
  width: auto;
  height: 78%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(-14px 22px 34px rgba(67, 48, 25, 0.26));
  transition: transform 1s var(--silk);
}
.product:hover .product-bottle {
  transform: translateY(-10px) rotate(-1deg);
}
/* alle inhoud blijft boven de fles liggen */
.product > *:not(.product-bottle) {
  position: relative;
  z-index: 1;
}
/* de bovenste tekst wijkt uit voor het glas */
.product h3,
.product .taste,
.product .flavour-notes {
  max-width: 62%;
}
.product .product-facts {
  max-width: 74%;
}
.product .pairing {
  max-width: 72%;
}
/* prijs en knop blijven links van het glas */
.product .buy {
  max-width: 70%;
}
.product > .text-link {
  max-width: 70%;
}

@media (max-width: 1100px) {
  .product-bottle {
    height: 62%;
    right: -9%;
  }
  .product h3,
  .product .taste,
  .product .flavour-notes {
    max-width: 68%;
  }
  .product .buy {
    max-width: 78%;
  }
}
@media (max-width: 700px) {
  /* op een smal scherm staat de fles rechtsboven, weg bij de koopknop */
  .product-bottle {
    top: 2%;
    bottom: auto;
    right: -7%;
    height: 34%;
  }
  .product h3,
  .product .taste {
    max-width: 68%;
  }
  .product .flavour-notes,
  .product .product-facts,
  .product .pairing,
  .product .buy,
  .product > .text-link {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product:hover .product-bottle {
    transform: none;
  }
}

/* uitgesneden flessen in de overzichtskaarten en in de mand: passend tonen,
   niet bijsnijden zoals bij een foto */
.mini-media.cutout {
  position: relative;
  display: block;
  background: linear-gradient(
    170deg,
    rgba(74, 93, 58, 0.1) 0%,
    rgba(201, 162, 76, 0.08) 100%
  );
}
/* absoluut plaatsen, anders rekt de hoge fles de kaart uit */
.mini-media.cutout img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px 0 12px;
  filter: drop-shadow(-8px 14px 22px rgba(67, 48, 25, 0.22));
}
.mini-product:hover .mini-media.cutout img {
  transform: translateY(-4px) scale(1.02);
}
.cart-thumb img {
  object-fit: contain;
  padding: 4px 0;
}

/* ================================== overgangszinnen altijd op één regel
   Elke zin krijgt zijn tekenaantal mee als --chars. De lettergrootte wordt
   daaruit berekend, zodat een lange en een korte zin allebei precies op één
   regel staan. Onder 760px is één regel niet meer leesbaar; daar mag hij weer
   afbreken. */

.bridge,
.problem-bridge {
  max-width: none;
  white-space: nowrap;
  /* de kolom is nooit breder dan de inhoudsmaat, dus daarop begrenzen */
  font-size: clamp(
    0.95rem,
    calc(min(84vw, 1160px) / (var(--chars, 60) * 0.375)),
    2.4rem
  );
}
.problem-bridge {
  width: 100%;
}

@media (max-width: 760px) {
  .bridge,
  .problem-bridge {
    white-space: normal;
    max-width: 28ch;
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }
  .problem-bridge {
    max-width: 32ch;
  }
}

/* ============================================ artefact per slide
   Elke bevinding krijgt een klein getekend voorwerp dat het punt samenvat:
   blanco blikken, een zandloper, een gebroken zegel, een weegschaal. Ze staan
   klein in de rechtermarge, bovenaan uitgelijnd, als een merkteken in de kantlijn.
   De hoogte van de slide blijft daarmee door de tekst bepaald. */

.slide-inner {
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.92fr)
    clamp(38px, 3.6vw, 58px);
  gap: clamp(18px, 2.6vw, 48px);
}
.slide-art {
  width: 100%;
  height: auto;
  max-height: clamp(34px, 3.4vw, 54px);
  object-fit: contain;
  object-position: right top;
  margin: 0;
  opacity: 0.92;
  filter: drop-shadow(0 6px 10px rgba(67, 48, 25, 0.12));
  transition:
    transform 0.9s var(--silk),
    opacity 0.6s var(--silk);
}
.slide:hover .slide-art {
  opacity: 1;
  transform: translateY(-2px) rotate(-1.5deg);
}

@media (max-width: 860px) {
  .slide-inner {
    grid-template-columns: 1fr;
  }
  .slide-art {
    max-height: 46px;
    width: auto;
    max-width: 64px;
    justify-self: end;
    margin-top: -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide:hover .slide-art {
    transform: none;
  }
}

/* ============================================== labels boven de koppen
   Het label kreeg een pil-achtergrond, maar als rasteritem wordt inline-flex
   geblokkeerd en rekt die pil over de volle breedte tot een balk. Boven een
   sectiekop hoort geen balk: daar is het gewoon tekst. Elders krimpt de pil
   voortaan om zijn inhoud. */

.section-heading .eyebrow,
.origin-heading .eyebrow,
.direct-title .eyebrow,
.biz-tekst .eyebrow {
  background: none;
  padding: 0;
  min-height: 0;
  border-radius: 0;
}
.eyebrow {
  justify-self: start;
  align-self: start;
  width: max-content;
  max-width: 100%;
}

/* de lamp hoort boven het woord gecentreerd, niet in de bredere kolom.
   Door beide in één blok te zetten dat om het woord heen krimpt, delen ze
   hetzelfde midden. */
.lampante-mark {
  width: max-content;
  max-width: 100%;
}
.lamp {
  width: min(76%, 300px);
  margin: 0 auto clamp(14px, 2vw, 28px);
}
@media (max-width: 900px) {
  .lamp {
    width: min(64%, 230px);
  }
}

/* het blok met lamp en woord staat gecentreerd boven de lijst met stappen */
.lampante-mark {
  margin-inline: auto;
}

/* ===================================== kopbalk over de volle schermbreedte
   De balk was 1620px breed en gecentreerd, waardoor de tak links en rechts
   ophield. Hij loopt nu van rand tot rand; de inhoud blijft binnen dezelfde
   maximale breedte door de padding mee te laten groeien. */

@media (min-width: 1181px) {
  .site-header {
    left: 0;
    width: 100%;
    transform: none;
    padding-inline: max(clamp(16px, 2.4vw, 40px), calc((100% - 1620px) / 2));
  }
  .site-header.scrolled {
    transform: translateY(-4px);
  }
  /* de tak loopt door tot beide schermranden */
  .branch {
    left: 0;
    right: 0;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 70px,
      #000 calc(100% - 70px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 70px,
      #000 calc(100% - 70px),
      transparent 100%
    );
  }
  /* de waas mag niet buiten het venster steken, anders ontstaat er een schuifbalk */
  .site-header:after {
    inset: -40px 0 -54px;
  }
}

/* "Dit ontvang je" hoort op één regel. De kop staat naast een bijzin, dus de
   maat is teruggebracht tot wat er in de resterende ruimte past. */
.adopt-details-heading span {
  white-space: nowrap;
  font-size: clamp(2rem, 3.1vw, 4rem);
}

/* ================================== gezondheidssectie met echte foto
   De linkerhelft was op het grote cijfer na leeg. Er staat nu een foto uit de
   molen: verse olie die uit de centrifuge loopt. Het cijfer staat erboven, niet
   eroverheen, zodat het beeld heel blijft. */

.health-visual {
  display: grid;
  justify-items: start;
  gap: clamp(18px, 2vw, 30px);
  width: min(100%, 420px);
  margin-inline: auto;
}
.health-visual .health-big {
  order: -1;
  align-items: baseline;
  gap: 0.7rem;
  justify-content: flex-start;
}
.health-photo {
  position: relative;
  margin: 0;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(67, 48, 25, 0.22);
}
/* De foto van de uitstromende olie is liggend (768 bij 615). In een staand
   kader van 4:5 ging er 36 procent af, precies de zijkanten waar de bak en de
   mensen staan. Het kader volgt nu de foto. */
.health-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(0.96) contrast(1.03);
}
.health-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.2rem 1.1rem 0.95rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.9);
  background: linear-gradient(
    to top,
    rgba(12, 20, 10, 0.85),
    rgba(12, 20, 10, 0.35) 55%,
    transparent
  );
}

@media (max-width: 900px) {
  .health-visual {
    width: min(88%, 360px);
  }
}

/* ==================================== proefnotities, opnieuw opgebouwd
   De notities lagen absoluut in een blok met een vaste hoogte, waardoor lange
   citaten over het label en over de knoppen heen liepen. De slides liggen nu
   in dezelfde rastercel: de hoogte volgt vanzelf de langste notitie en er
   overlapt niets meer. Ernaast staat een foto van de aangevoerde olijven. */

.tasting {
  min-height: 0;
  padding: clamp(56px, 7vw, 110px) var(--page-gutter);
  place-items: stretch;
}
.tasting:before {
  width: min(52vw, 620px);
  left: 22%;
  opacity: 0.6;
}
.tasting-inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 5vw, 88px);
  align-items: center;
}

.tasting-photo {
  margin: 0;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(6, 10, 5, 0.45);
}
.tasting-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.98) contrast(1.04);
}
.tasting-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 1.1rem 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.88);
  background: linear-gradient(
    to top,
    rgba(6, 10, 5, 0.85),
    rgba(6, 10, 5, 0.3) 55%,
    transparent
  );
}

.tasting-stage {
  width: auto;
  text-align: left;
}
/* alle notities in dezelfde cel: de hoogste bepaalt de hoogte */
.tasting-slides {
  position: static;
  min-height: 0;
  display: grid;
}
.tasting-slide {
  position: static;
  grid-area: 1 / 1;
  display: block;
  place-content: initial;
  text-align: left;
}
.tasting-slide p {
  font-size: clamp(1.45rem, 2.5vw, 2.35rem);
  line-height: 1.32;
  margin: 0 0 1.4rem;
  max-width: 24ch;
}
.tasting-slide span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}
.tasting-controls {
  justify-content: flex-start;
  margin-top: clamp(28px, 3.4vw, 46px);
}

@media (max-width: 900px) {
  .tasting-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tasting-photo {
    width: min(88%, 360px);
  }
  .tasting-slide p {
    font-size: clamp(1.35rem, 5.4vw, 1.9rem);
    max-width: none;
  }
  .tasting:before {
    left: 50%;
  }
}

/* ========================================================== de procesfilm
   Staand beeld van de oogst, naast de perceelkaart. De film heeft geen geluid,
   speelt alleen als hij in beeld staat en is met de knop rechtsonder stil te
   zetten.

   Opbouw op breed scherm: drie kolommen die allemaal op dezelfde bovenlijn
   beginnen en op dezelfde onderlijn eindigen. Links de kop met de kaart eronder,
   in het midden de vier stappen als lijst over de volle hoogte, rechts de film.
   Kaart en film zijn even breed. Zo staat er nergens een gat en blijft de
   sectie kort: geen aparte strook meer onder de kolommen. */

.direct {
  align-items: start;
  row-gap: clamp(40px, 4vw, 64px);
}
/* De titelkolom liep vroeger mee met een veel langere rechterkolom. Nu de
   kolommen even hoog zijn heeft meelopen geen zin meer: het zou de strook met
   stappen overlopen. */
.direct-title {
  position: static;
  align-self: start;
}

/* Basis (gestapeld): kaart en film even breed, met de hoogte van de film
   begrensd door het venster. */
.plan,
.film {
  margin: 0;
  min-width: 0;
  width: min(100%, 420px, 45vh);
  max-width: 100%;
}

@media (min-width: 961px) {
  .direct {
    /* Verhoudingen in fr, niet in eigen maten: geen enkele kolom kan dan
       inklappen op de eigen breedte van een afbeelding. De bovenste rij is de
       kop, de onderste vult de resterende hoogte. */
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(0, 1fr)
      minmax(0, 0.95fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(36px, 4vw, 76px);
    row-gap: clamp(28px, 3vw, 44px);
    align-items: end;
  }
  /* Kleiner dan in de andere secties: de kop staat nu in een kolom ter breedte
     van een beeld en moet daar op twee regels in passen. */
  .direct-title {
    grid-area: 1 / 1;
    align-self: start;
    max-width: none;
  }
  .direct-title h2 {
    font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  }
  .direct-lede {
    max-width: none;
  }
  .plan {
    grid-area: 2 / 1;
    align-self: end;
    justify-self: start;
    width: 100%;
    max-width: 100%;
  }
  /* 45vh breed geeft bij 9:16 een beeld van tachtig procent schermhoogte: op een
     laag venster wordt de film smaller dan zijn kolom, maar past hij nog op één
     scherm. */
  .film {
    grid-area: 1 / 3 / 3 / 4;
    align-self: end;
    justify-self: end;
    width: min(100%, 45vh);
    max-width: 100%;
  }
  .plan figcaption,
  .film figcaption {
    max-width: none;
  }
}
.film-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 4px;
  background: #1b2216;
  box-shadow:
    0 26px 60px rgba(10, 16, 8, 0.42),
    0 0 0 1px rgba(244, 239, 228, 0.14);
}
.film-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film figcaption {
  margin-top: 1rem;
  max-width: 30ch;
  font-size: 0.76rem;
  line-height: 1.6;
  color: rgba(244, 239, 228, 0.55);
}

/* de knop: alleen zichtbaar bij hover, focus of als de film stilstaat */
.film-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(244, 239, 228, 0.3);
  border-radius: 999px;
  background: rgba(16, 22, 12, 0.48);
  backdrop-filter: blur(6px);
  color: var(--cream);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s var(--silk),
    transform 0.5s var(--silk),
    background 0.5s var(--silk);
}
.film:hover .film-toggle,
.film:not(.playing) .film-toggle,
.film-toggle:focus-visible {
  opacity: 1;
  transform: none;
}
.film-toggle:hover {
  background: rgba(16, 22, 12, 0.72);
}
.film-icon {
  position: relative;
  display: block;
  width: 12px;
  height: 14px;
}
.film-icon:before,
.film-icon:after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transition: opacity 0.3s var(--silk);
}
/* stilstaand: driehoek. spelend: twee staafjes */
.film-icon:before {
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}
.film-icon:after {
  background: linear-gradient(
    to right,
    currentColor 0 34%,
    transparent 34% 66%,
    currentColor 66% 100%
  );
  opacity: 0;
}
.film.playing .film-icon:before {
  opacity: 0;
}
.film.playing .film-icon:after {
  opacity: 1;
}

/* de vier stappen als strook onder de twee kolommen */
.direct .process {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-self: start;
  align-content: start;
}
.direct .process article {
  min-height: 0;
  padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2.2vw, 34px) 0;
  border-bottom: 0;
  border-right: 1px solid rgba(244, 239, 228, 0.18);
}
.direct .process article:first-child {
  padding-left: 0;
}
.direct .process article:last-child {
  padding-right: 0;
  border-right: 0;
}
.direct .process article:hover {
  transform: none;
  background: none;
}
.direct .process b {
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  line-height: 1;
}
.direct .process h3 {
  margin: 0.55rem 0 0.4rem;
  font-size: clamp(1.15rem, 1.4vw, 1.45rem);
}
.direct .process p {
  margin: 0;
  max-width: 32ch;
}

/* Op breed scherm zijn de vier stappen geen strook maar de middenkolom: een
   lijst die van de bovenlijn tot de onderlijn doorloopt. */
@media (min-width: 961px) {
  .direct .process {
    grid-area: 1 / 2 / 3 / 3;
    align-self: stretch;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    border-top: 0;
  }
  .direct .process article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(14px, 1.3vw, 24px);
    align-content: center;
    padding: 0 0 clamp(18px, 1.8vw, 28px);
    border-right: 0;
    border-bottom: 1px solid rgba(244, 239, 228, 0.18);
  }
  .direct .process article + article {
    padding-top: clamp(18px, 1.8vw, 28px);
  }
  .direct .process article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .direct .process b {
    grid-row: 1 / 3;
    font-size: clamp(1.35rem, 1.7vw, 1.8rem);
  }
  .direct .process h3 {
    margin: 0 0 0.35rem;
  }
  .direct .process p {
    max-width: 34ch;
  }
}

/* Tussenmaat: de tekst loopt over de volle breedte, kaart en film staan
   daaronder naast elkaar op dezelfde onderlijn. */
@media (min-width: 601px) and (max-width: 960px) {
  .direct {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    column-gap: clamp(28px, 4vw, 48px);
    align-items: end;
  }
  .direct-title {
    grid-column: 1 / -1;
  }
  .plan,
  .film {
    width: 100%;
    max-width: none;
  }
  .plan {
    grid-column: 1;
  }
  .film {
    grid-column: 2;
  }
}

@media (max-width: 600px) {
  /* Gestapeld staan kaart en film onder elkaar; gelijke breedte houdt die twee
     als één blok bij elkaar. */
  .plan,
  .film {
    grid-column: 1;
  }
}

@media (max-width: 960px) {
  .direct .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .direct .process article:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }
  .direct .process article:nth-child(2n + 1) {
    padding-left: 0;
  }
  .direct .process article:nth-child(-n + 2) {
    padding-bottom: clamp(24px, 4vw, 34px);
    border-bottom: 1px solid rgba(244, 239, 228, 0.18);
  }
  .direct .process article:nth-child(n + 3) {
    padding-top: clamp(24px, 4vw, 34px);
  }
}

@media (max-width: 600px) {
  .direct .process {
    grid-template-columns: 1fr;
  }
  .direct .process article {
    padding: clamp(20px, 5vw, 28px) 0;
    border-right: 0;
    border-bottom: 1px solid rgba(244, 239, 228, 0.18);
  }
  .direct .process article:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-toggle {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ====================================================== de oogstlijn
   Het jaar van de boom als kalender: de getekende platen op een gouden lijn,
   met een markering waar we vandaag staan. De fases die geweest zijn krijgen
   volle kleur, wat nog komt staat gedempt. site.js zet --nu en de klassen. */

.oogstlijn {
  --plaat: clamp(88px, 9.5vw, 148px);
  --kolomgat: clamp(12px, 1.6vw, 30px);
  --punt: 15px;
  position: relative;
  margin-top: clamp(44px, 5vw, 78px);
}

/* Het aantal kolommen volgt het aantal fases. Het stond vast op zes terwijl er
   zeven fases in src/pages/home.mjs staan, waardoor de laatste op een eigen
   regel viel en de gouden lijn er los onder hing. Met een kolomstroom past een
   fase erbij of eraf zonder dat hier iets hoeft te veranderen. */
.oogstlijn ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--kolomgat);
}
.oogstlijn li {
  display: grid;
  grid-template-rows: var(--plaat) var(--punt) auto;
  justify-items: center;
  row-gap: clamp(12px, 1.4vw, 20px);
  text-align: center;
  /* De fases die nog moeten komen staan gedempt, maar op 0.55 zakte de tekst
     naar 4.15:1 op het groen. 0.72 houdt het onderscheid en blijft leesbaar. */
  opacity: 0.72;
  transition:
    opacity 0.8s var(--silk),
    transform 0.8s var(--silk);
}
/* alles wat al geweest is staat vol in beeld */
.oogstlijn li.is-geweest {
  opacity: 1;
}

/* de plaat */
.oogstlijn figure {
  margin: 0;
  width: var(--plaat);
  height: var(--plaat);
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  box-shadow:
    0 0 0 1px rgba(201, 162, 76, 0.45),
    0 16px 34px rgba(10, 16, 8, 0.38);
  transition:
    box-shadow 0.8s var(--silk),
    transform 0.8s var(--silk);
}
.oogstlijn figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.oogstlijn li.is-nu figure {
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 0 9px rgba(201, 162, 76, 0.16),
    0 20px 40px rgba(10, 16, 8, 0.45);
  transform: translateY(-4px);
}

/* de lijn met de voortgang */
.oogstlijn-baan {
  position: absolute;
  top: calc(var(--plaat) + clamp(12px, 1.4vw, 20px) + (var(--punt) / 2) - 1px);
  left: calc((100% - 5 * var(--kolomgat)) / 12);
  right: calc((100% - 5 * var(--kolomgat)) / 12);
  height: 2px;
  background: rgba(244, 239, 228, 0.18);
}
.oogstlijn-baan i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--nu, 0%);
  background: linear-gradient(
    90deg,
    rgba(201, 162, 76, 0.35),
    var(--gold) 70%
  );
  transform-origin: left center;
  transition: width 1.4s var(--silk);
}

/* het knooppunt per fase */
.oogstlijn-punt {
  width: var(--punt);
  height: var(--punt);
  border-radius: 50%;
  background: var(--green);
  border: 2px solid rgba(244, 239, 228, 0.35);
  transition:
    border-color 0.8s var(--silk),
    background 0.8s var(--silk),
    transform 0.8s var(--silk);
}
.oogstlijn li.is-geweest .oogstlijn-punt {
  background: var(--gold);
  border-color: var(--gold);
}
.oogstlijn li.is-nu .oogstlijn-punt {
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(201, 162, 76, 0.18);
}

/* de markering voor vandaag */
.oogstlijn-nu {
  position: absolute;
  top: 50%;
  left: var(--nu, 0%);
  /* De fasepunten krijgen een transform en komen daardoor in dezelfde
     schilderlaag terecht. Zonder z-index tekende het punt van de huidige fase
     over de markering heen, waardoor "Vandaag" halverwege werd afgedekt. */
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.3rem 0.66rem 0.3rem 0.5rem;
  border-radius: 999px;
  background: var(--gold);
  color: #2a2113;
  font: 600 0.6rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  /* de groene rand tilt de markering los van het knooppunt eronder */
  box-shadow:
    0 0 0 3px var(--green),
    0 10px 24px rgba(10, 16, 8, 0.4);
  transition: left 1.4s var(--silk);
}
.oogstlijn-nu:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a2113;
}

/* de tekst onder de lijn */
.oogstlijn-tekst {
  max-width: 24ch;
}
.oogstlijn-tekst b {
  display: block;
  font: 600 0.66rem var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.oogstlijn-tekst h3 {
  margin: 0.5rem 0 0.4rem;
  font: 500 clamp(1.1rem, 1.4vw, 1.45rem) var(--serif);
  color: var(--cream);
}
.oogstlijn-tekst p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.62;
  /* op 0.72 haalde de fasetekst 4.15:1 op het groen, net onder de eis */
  color: rgba(244, 239, 228, 0.82);
}

/* De vlag in de tekst vervangt de markering op de lijn zodra de kalender
   rechtop staat. */
.oogstlijn-vlag {
  display: none;
  margin-left: 0.6rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--gold);
  color: #2a2113;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  vertical-align: middle;
}

/* Gestapeld: de lijn staat rechtop naast de platen. */
@media (max-width: 1080px) {
  .oogstlijn {
    --plaat: clamp(72px, 11vw, 116px);
  }
  .oogstlijn-nu {
    display: none;
  }
  .oogstlijn li.is-nu .oogstlijn-vlag {
    display: inline-block;
  }
  .oogstlijn-baan {
    top: calc(var(--plaat) / 2);
    bottom: calc(var(--plaat) / 2);
    left: calc(var(--plaat) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .oogstlijn-baan i {
    inset: 0 0 auto 0;
    width: auto;
    height: var(--nu, 0%);
    background: linear-gradient(
      180deg,
      rgba(201, 162, 76, 0.35),
      var(--gold) 70%
    );
    transition: height 1.4s var(--silk);
  }
  .oogstlijn-nu {
    top: var(--nu, 0%);
    left: 1px;
    transition: top 1.4s var(--silk);
  }
  .oogstlijn ol {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    row-gap: clamp(26px, 5vw, 40px);
  }
  .oogstlijn li {
    grid-template-columns: var(--plaat) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    justify-items: start;
    column-gap: clamp(18px, 4vw, 30px);
    text-align: left;
  }
  .oogstlijn-punt {
    display: none;
  }
  .oogstlijn-tekst {
    max-width: 52ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oogstlijn-baan i,
  .oogstlijn-nu,
  .oogstlijn li,
  .oogstlijn figure {
    transition: none;
  }
}

/* ================================================== het zakelijke blok
   Stond eerst als losse kop met een tekstlink op een leeg crèmevlak. Nu volgt
   het de opbouw van de rest: tekst met haarlijnen links, een echte foto uit de
   molen rechts, allebei op dezelfde onderlijn. */

.biz-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  column-gap: clamp(40px, 5vw, 96px);
  row-gap: clamp(36px, 4vw, 56px);
  align-items: end;
}
.biz-teaser h2 {
  margin: 0.6rem 0 0;
  font-size: clamp(2.6rem, 4.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.biz-lede {
  margin: clamp(20px, 2.2vw, 32px) 0 0;
  max-width: 44ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(31, 31, 31, 0.75);
}

/* de drie punten met haarlijnen, zoals de stappen in de werkwijze */
.biz-punten {
  margin: clamp(28px, 3vw, 46px) 0 clamp(30px, 3vw, 44px);
  display: grid;
}
.biz-punten > div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  column-gap: clamp(18px, 2vw, 34px);
  align-items: baseline;
  padding: clamp(14px, 1.5vw, 20px) 0;
  border-top: 1px solid rgba(31, 31, 31, 0.14);
}
.biz-punten > div:last-child {
  border-bottom: 1px solid rgba(31, 31, 31, 0.14);
}
.biz-punten dt {
  font: 600 0.68rem var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
}
.biz-punten dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.78);
}

/* de foto uit de molen */
.biz-foto {
  margin: 0;
}
.biz-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 24px 54px rgba(31, 31, 31, 0.16);
}
.biz-foto figcaption {
  margin-top: 1rem;
  max-width: 40ch;
  font-size: 0.78rem;
  line-height: 1.62;
  /* het bijschrift bevat een link, die haalde op 0.55 maar 3.61:1 */
  color: rgba(31, 31, 31, 0.72);
}

@media (max-width: 900px) {
  .biz-teaser {
    grid-template-columns: 1fr;
  }
  .biz-punten > div {
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
  }
}

/* ==================================================== mobiele retrofit
   Alles hieronder staat in een media query of op een klasse die alleen mobiel
   bestaat, dus de desktopopmaak blijft ongewijzigd. Inhoud, koppen en tracking
   zijn niet aangeraakt: alleen compositie, aanraakvlakken en leesbaarheid. */

:root {
  --tap-min: 44px;
  --tap-primary: 48px;
}

/* -------------------------------------------- 0. geen horizontale scroll
   Op een paar pagina's liep het menupaneel een paar pixels buiten het scherm.
   In mobiele weergave groeit de layout viewport dan mee, waarna de balk zelf
   op width: calc(100% - 24px) ook meegroeit en de pagina 125px opzij schoof.
   `overflow-x: clip` knipt de overloop af zonder een scrollpositie te maken,
   en anders dan `hidden` breekt het `position: sticky` verderop niet. */
html,
body {
  overflow-x: clip;
}
@media (max-width: 1180px) {
  .site-header {
    max-width: calc(100vw - 24px);
  }
  .nav,
  .nav-groep,
  .nav-sub {
    max-width: 100%;
  }
  /* lange menulabels mogen afbreken in plaats van de balk op te rekken */
  .nav a,
  .nav-sub a {
    white-space: normal;
  }
}
/* Een spectabel in de lopende tekst heeft een minimumbreedte van bijna 500px
   en duwde de pagina op een telefoon 125px opzij. Brede inhoud hoort in zijn
   eigen scrollvlak te schuiven, niet het hele document mee te nemen. */
@media (max-width: 760px) {
  .prose > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* -------------------------------------------------- 1. het menupaneel
   De balk is een zwevende pil met een transform, en een transform maakt een
   nieuw containing block. Het menu stond daardoor als `position: fixed` niet op
   het venster maar binnen de pil: een blokje van 364 bij 160 pixels waar de
   items uit liepen. Daarom hangt het menu nu als paneel onder de balk. */
@media (max-width: 1180px) {
  .nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    bottom: auto;
    left: 0;
    display: grid;
    align-content: start;
    gap: 0;
    padding: 10px;
    max-height: min(72vh, calc(100dvh - 128px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(20, 27, 16, 0.97);
    border: 1px solid rgba(244, 239, 228, 0.14);
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(6, 10, 4, 0.5);
    transform: translateY(-10px);
  }
  .nav.open {
    transform: none;
  }
  .nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    justify-self: stretch;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 18px;
    font: 500 clamp(1.15rem, 4.4vw, 1.45rem) / 1.2 var(--serif);
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--cream);
  }
  .nav a + a {
    box-shadow: inset 0 1px 0 rgba(244, 239, 228, 0.12);
  }
  .nav a:active {
    background: rgba(244, 239, 228, 0.08);
  }
  .nav a.active,
  .nav a[aria-current="page"] {
    color: var(--gold);
  }
  /* de olijf aan het steeltje hoort bij de tak op desktop; hier is het een pijl */
  .nav a:before {
    display: none;
  }
  .nav a:after {
    content: "→";
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    font: 400 0.95rem var(--sans);
    color: var(--cream);
    opacity: 0.4;
  }

  /* achtergrond achter het menu, en de pagina staat vast zolang het open is */
  body.menu-open {
    overflow: hidden;
  }
  body.menu-open:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(10, 14, 8, 0.55);
  }
}

/* ------------------------------------------- 2. aanraakvlakken van 44 px */
@media (max-width: 1180px) {
  .brand {
    min-height: var(--tap-min);
    padding-block: 10px;
    align-items: center;
  }
  /* de mand was 24 bij 27 pixels: te klein om te raken en het belangrijkste
     knopje van de winkel */
  .cart-button {
    min-width: var(--tap-primary);
    min-height: var(--tap-primary);
    justify-content: center;
    border-radius: 999px;
  }
  .menu-button {
    width: var(--tap-primary);
    height: var(--tap-primary);
  }
  .menu-button span {
    left: 12px;
  }
}

@media (max-width: 900px) {
  .text-link {
    min-height: var(--tap-min);
    align-items: center;
    padding-block: 8px;
  }
  .crumbs a,
  .footer-links a,
  footer a:not(.button) {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }
  .slider-prev,
  .slider-next {
    width: 46px;
    height: 46px;
  }
  .film-toggle {
    width: var(--tap-min);
    height: var(--tap-min);
  }
  .accordion-item summary,
  details summary {
    min-height: 52px;
    align-items: center;
  }
  .qty button,
  .cart-item button {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }
}

/* --------------------------------------------------- 3. leesbare maten
   Micro-labels stonden op 9 tot 12 pixels; dat leest niet op een telefoon.
   Alleen vergroot, nooit verkleind. */
@media (max-width: 900px) {
  .eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
  }
  .mini-sub,
  .slide-kicker,
  .next-label,
  .oogstlijn-tekst b,
  .biz-punten dt,
  .process b + h3,
  .spec-note {
    font-size: 0.74rem;
  }
  .stock,
  .buy-note,
  .page-meta,
  .crumbs,
  figcaption,
  .plan figcaption,
  .film figcaption,
  .footer-brand p,
  .footer-legal,
  .cart-note,
  .cart-head-note {
    font-size: 0.84rem;
    line-height: 1.6;
  }
  th,
  td {
    font-size: 0.9rem;
  }
  .mini-text,
  .slide-uitleg,
  .slide-ours,
  .slide-body,
  .oogstlijn-tekst p,
  .biz-punten dd,
  .process p,
  .stat-row div p,
  .scarcity-cards p,
  .icon-row li,
  .faq-answer p,
  .prose li {
    font-size: 0.98rem;
    line-height: 1.62;
  }
}

/* ------------------------------------------ 4. componenten die uitliepen */
@media (max-width: 700px) {
  /* de uitgesneden fles hing 25 px buiten de kaart en werd door de schermrand
     afgekapt; nu staat hij volledig binnen de kaart */
  .product-bottle {
    right: 10px;
    height: 30%;
  }
  .product h3,
  .product .taste {
    max-width: calc(100% - 92px);
  }
  /* smaaknoten wikkelen in plaats van uit beeld te lopen */
  .flavour-notes {
    flex-wrap: wrap;
  }
  /* de hero mag ook op mobiel zijn fles houden: kleiner, in de hoek, achter de
     tekst en met de kleine bestandsvariant.

     De fles stond op right: -6px en werd dus door de schermrand afgesneden, en
     de voorraadregel liep er dwars doorheen. Hij staat nu volledig in beeld en
     de regel eronder houdt een vrije strook ter breedte van de fles. */
  .hero-bottle {
    display: grid;
    right: 8px;
    bottom: 0;
    z-index: 1;
    opacity: 0.5;
  }
  .hero-bottle img {
    height: min(24vh, 210px);
  }
  .hero-bottle-glow {
    width: 190px;
    height: 190px;
  }
  .hero-content {
    position: relative;
    z-index: 2;
  }
  /* de fles is op deze hoogte ongeveer 58px breed, plus de marge ernaast */
  .hero .stock {
    padding-right: 78px;
  }
}

/* ------------------------------------------------- 5. veilige zones
   Ruimte voor de systeembalken van de telefoon, zodat de vaste balken niets
   afdekken op toestellen met een notch of een gebarenbalk. */
@media (max-width: 1180px) {
  .site-header {
    top: max(12px, env(safe-area-inset-top));
  }
  .buy-bar {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .cart {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .nav {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* --------------------------------------- 6. lichtere hero op kleine schermen
   De hero-achtergrond was een png van 2,6 MB. Dezelfde foto, maar als jpg op
   maat: 148 kB op mobiel en 282 kB op tablet. Boven 1400 px blijft de png. */
@media (max-width: 900px) {
  .hero {
    background:
      radial-gradient(
        circle at 50% 45%,
        rgba(18, 27, 14, 0.08),
        rgba(15, 24, 12, 0.82) 78%
      ),
      linear-gradient(180deg, rgba(8, 15, 7, 0.22), rgba(8, 15, 7, 0.7)),
      url("assets/hero-grove-mobiel.jpg") center / cover;
  }
}
@media (min-width: 901px) and (max-width: 1400px) {
  .hero {
    background:
      radial-gradient(
        circle at 50% 45%,
        rgba(18, 27, 14, 0.08),
        rgba(15, 24, 12, 0.82) 78%
      ),
      linear-gradient(180deg, rgba(8, 15, 7, 0.22), rgba(8, 15, 7, 0.7)),
      url("assets/hero-grove-tablet.jpg") center / cover;
  }
}

/* ---------------------------------- 3b. de laatste te kleine tekst
   Tweede ronde na meting: dit stonden nog onder de 14,5 px. Formulierlabels,
   tabelcellen en lopende tekst gaan naar leesbare maten; decoratieve
   microlabels (nummers, kaartprikkers) blijven klein maar worden groter. */
@media (max-width: 900px) {
  label {
    font-size: 0.9rem;
  }
  small {
    font-size: 0.84rem;
  }
  .trust small {
    font-size: 0.86rem;
  }
  td,
  tbody th {
    font-size: 0.95rem;
  }
  thead th {
    font-size: 0.8rem;
  }
  dl dt {
    font-size: 0.82rem;
  }
  .slide-ours b {
    font-size: 0.82rem;
  }
  .slider-count,
  .lampante-source,
  .lampante-copy ol li,
  .lampante ol li {
    font-size: 0.9rem;
  }
  .pairing p,
  .health-copy .note,
  .recipe-grid article p,
  .adopt-assurance p,
  .adopt-details-heading p,
  form p,
  .newsletter p {
    font-size: 0.92rem;
    line-height: 1.6;
  }
  .footer-brand p,
  .footer-contact,
  .footer-legal p,
  .promise,
  footer ul li,
  footer a:not(.button) {
    font-size: 0.92rem;
  }
  .stock,
  .buy-note,
  .cart-head-note,
  .cart-bottom small,
  .buy-price small {
    font-size: 0.88rem;
  }
  .product-no,
  .product-badge,
  .mini-sub {
    font-size: 0.76rem;
  }
  .plan-pin,
  .oogstlijn-vlag,
  .cart-count {
    font-size: 0.7rem;
  }
}

/* Onder de 520px is vier naast elkaar niet meer vol te houden: de kolom zakt
   dan onder de 120px en dan loopt "reserveren tot" de cel uit. Twee bij twee
   leest daar als een bewuste vorm, en niet als een rij die is afgebroken. */
@media (max-width: 519px) {
  .reserve-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* laatste vier met een specifiekere selector dan de vorige ronde */
@media (max-width: 900px) {
  .reserve-facts dt {
    font-size: 0.82rem;
  }
  .newsletter form label {
    font-size: 0.9rem;
  }
  .spec-table thead th {
    font-size: 0.8rem;
  }
  footer .promise {
    font-size: 0.9rem;
  }
}

/* --------------------------------- 2b. de laatste aanraakvlakken
   Uit de meting bleek dat min-height niets doet op `display: inline`, en dat
   de sliderknoppen een specifiekere regel hadden. Kop-links worden blokken,
   zodat de hele regel raakbaar is; losse links in lopende tekst laten we
   inline (die vallen onder de uitzondering voor tekstlinks). */
@media (max-width: 900px) {
  .text-link {
    display: inline-flex;
  }
  .slider-buttons .slider-prev,
  .slider-buttons .slider-next {
    width: 46px;
    height: 46px;
  }
  .faq-nav a,
  .kb-nav a,
  .next-grid a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: 2px;
  }
  h3 > a:only-child,
  h2 > a:only-child {
    display: block;
    padding-block: 8px;
  }
}

/* --------------------------------- 2c. koplinks en inhoudsopgave
   Koplinks kwamen op 42 px uit (26 px regel plus 2 x 8 px), de inhoudsopgave
   van een artikel stond op 19 px. Beide nu volledig raakbaar. */
@media (max-width: 900px) {
  h3 > a:only-child,
  h2 > a:only-child {
    min-height: var(--tap-min);
    padding-block: 10px;
  }
  .toc a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }
  .toc ol li + li {
    margin-top: 2px;
  }
}

/* De <picture>-wrappers om de illustraties mogen geen eigen layoutbox maken,
   anders verschuift de plaatsing van de afbeelding in grid en flex. */
picture {
  display: contents;
}

/* ------------------------- 2d. knoppen in de winkelmand
   Aantal omhoog of omlaag en het kruisje stonden op 30 en 26 pixels: te klein
   om zonder mikken te raken, en dit is de laatste stap voor het afrekenen. */
@media (max-width: 900px) {
  .cart-qty button,
  .cart-remove {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    display: inline-grid;
    place-items: center;
  }
  .cart-qty {
    gap: 2px;
  }
}

/* De poster bij de sectie over natuurlijke olijfolie. Staand beeld, dus
   begrensd op breedte zodat hij niet de halve pagina vult op desktop.

   Links uitlijnen, niet centreren. De figure staat als broer van .prose in
   een container van 1267px, terwijl de tekstkolom zelf 792px is en links
   staat. Met margin auto landt het beeld op het midden van de pagina en dus
   naast de tekst in plaats van eronder, wat leest als een foto die midden
   in de lopende tekst is gezet. */
.natuur-poster {
  margin: 2.6rem 0;
  max-width: 420px;
}
.natuur-poster img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(38, 51, 31, 0.18);
}
@media (max-width: 900px) {
  .natuur-poster {
    max-width: 88vw;
    margin: 2rem 0;
  }
}

/* Het woordmerk. De extensie iets kleiner en lichter, zodat "ECHTE OLIJFOLIE"
   het woord blijft en .nl alleen aangeeft dat het het domein is. */
.brand span i,
.footer-brand > span i {
  font-style: normal;
  font-size: 0.72em;
  opacity: 0.62;
  letter-spacing: 0.04em;
}

/* De lichtcirkel achter de hero-fles is breder dan de fles zelf en steekt op
   heel smalle schermen (rond 320 px) buiten de pagina, wat horizontaal scrollen
   veroorzaakt. clip in plaats van hidden, want hidden zou van de hero een
   scrollcontainer maken en dat breekt sticky-gedrag erbinnen. */
@media (max-width: 380px) {
  .hero {
    overflow-x: clip;
  }
}

/* ---------------------------------------------------- Maatkeuze koopblok */
/* Radiogroep als segmentkeuze. De radio zelf blijft in de a11y-boom staan en
   krijgt alleen zijn eigen tekening; :focus-visible tekent op het label, want
   dat is het element dat je ziet. */
.size-picker {
  margin: 0 0 1.3rem;
  padding: 0;
  border: 0;
}
.size-picker legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.55);
}
.size-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.5rem;
}
.size-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.size-options label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  padding: 0.65rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.size-options label strong {
  font-size: 0.9rem;
  font-weight: 500;
}
.size-options label small {
  font-size: 0.78rem;
  color: rgba(31, 31, 31, 0.6);
  font-variant-numeric: tabular-nums;
}
.size-options label:hover {
  border-color: var(--terra);
}
.size-options input:checked + label {
  border-color: var(--terra);
  background: rgba(178, 92, 56, 0.07);
}
.size-options input:checked + label small {
  color: var(--terra);
}
.size-options input:focus-visible + label {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}
.mini-maten {
  margin: -0.4rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(31, 31, 31, 0.55);
}
.product-media figcaption {
  margin-top: 0.55rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(31, 31, 31, 0.55);
}

/* ------------------------------------------------------------- abonnementen */
.abo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.4rem;
  align-items: start;
}
.abo-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 2rem 1.7rem 1.8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
}
.abo-uitgelicht {
  border-color: var(--terra);
  box-shadow: 0 14px 40px rgba(31, 31, 31, 0.07);
}
.abo-vlag {
  position: absolute;
  top: -0.72rem;
  left: 1.7rem;
  margin: 0;
  padding: 0.22rem 0.7rem;
  background: var(--terra);
  color: #fff;
  border-radius: 2px;
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.abo-kaart h3 {
  margin: 0;
  font: 500 1.5rem/1.15 var(--serif);
}
.abo-hoeveel {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.55);
}
.abo-prijs {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
}
.abo-prijs strong {
  font: 500 2.3rem/1 var(--serif);
  color: var(--terra);
  font-variant-numeric: tabular-nums;
}
.abo-prijs small {
  font-size: 0.78rem;
  color: rgba(31, 31, 31, 0.6);
}
.abo-voor {
  margin: 0;
  font-weight: 500;
}
.abo-detail {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(31, 31, 31, 0.72);
}
.abo-lijst {
  margin: 0.3rem 0 0;
  padding: 0.9rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
  font-size: 0.86rem;
}
.abo-lijst li {
  position: relative;
  padding-left: 1.15rem;
  line-height: 1.55;
}
.abo-lijst li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.6rem;
  color: var(--gold);
}
.abo-kaart .add {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.abo-later {
  margin: -0.35rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--terra);
}
.gift-uitleg {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(31, 31, 31, 0.6);
}

/* --------------------------------------------------------------- boompagina */
.boom-foto {
  margin: 0 0 2rem;
}
.boom-foto img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  display: block;
}
.boom-foto figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: rgba(31, 31, 31, 0.55);
}
.boom-logboek {
  display: grid;
  gap: 1.2rem;
}
.boom-jaar {
  padding: 1.6rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.boom-jaar h3 {
  margin: 0 0 1rem;
  font: 500 1.3rem var(--serif);
}
.boom-jaar dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem 1.4rem;
  margin: 0 0 1rem;
}
.boom-jaar dt {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.5);
  margin-bottom: 0.2rem;
}
.boom-jaar dd {
  margin: 0;
  font-size: 0.95rem;
}
.boom-jaar p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(31, 31, 31, 0.75);
}
.boom-leeg {
  padding: 1.6rem;
  border: 1px dashed var(--line);
  border-radius: 4px;
  color: rgba(31, 31, 31, 0.6);
}

/* -------------------------------------------------------------- certificaat */
.cert-tool {
  max-width: 720px;
  margin: 0 auto;
  /* Ruim onder de vaste header, anders valt de titel eronder weg. */
  padding: clamp(8rem, 14vw, 11rem) 7vw 1rem;
}
.cert-velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
}
.cert-velden label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.6);
}
.cert-velden input {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink, #1f1f1f);
  background: #fff;
}
.certificaat {
  width: 210mm;
  max-width: calc(100vw - 2rem);
  aspect-ratio: 210 / 297;
  margin: 2rem auto 5rem;
  padding: 10mm;
  background: #fbf8f1;
  box-shadow: 0 18px 50px rgba(31, 31, 31, 0.12);
  container-type: inline-size;
}
.cert-rand {
  height: 100%;
  border: 1.5px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: 3mm;
  padding: 14mm 12mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #26331f;
}
.cert-merk {
  margin: 0;
  font-size: 2.6cqw;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}
.cert-kop {
  margin: 4cqw 0 6cqw;
  /* Eigen schaal: dit is een h2, maar hij moet met het certificaat meeschalen
     en niet met de typografie van de site. */
  font: 500 8cqw/1 var(--serif) !important;
  letter-spacing: normal;
  color: inherit;
}
.cert-regel {
  margin: 0;
  font-size: 2.7cqw;
  letter-spacing: 0.05em;
  color: rgba(38, 51, 31, 0.7);
}
.cert-naam {
  margin: 1.5cqw 0 5cqw;
  font: 500 7cqw/1.15 var(--serif);
  text-wrap: balance;
}
.cert-boom {
  margin: 1cqw 0 5cqw;
  font: 500 12cqw/1 var(--serif);
  color: var(--terra);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.cert-specs {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0 5cqw;
  margin: 0 0 5cqw;
}
.cert-specs dt {
  font-size: 1.9cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(38, 51, 31, 0.5);
  margin-bottom: 0.8cqw;
}
.cert-specs dd {
  margin: 0;
  font-size: 2.4cqw;
}
.cert-bericht {
  margin: 0 0 4cqw;
  font: italic 400 3cqw/1.6 var(--serif);
  max-width: 60cqw;
}
.cert-bericht:empty {
  display: none;
}
.cert-belofte {
  margin: 0 0 auto;
  font-size: 2.2cqw;
  line-height: 1.75;
  max-width: 62cqw;
  color: rgba(38, 51, 31, 0.75);
}
.cert-voet {
  display: flex;
  gap: 12cqw;
  margin-bottom: 4cqw;
}
.cert-lijn {
  display: block;
  width: 26cqw;
  border-bottom: 1px solid rgba(38, 51, 31, 0.4);
  margin-bottom: 1.2cqw;
}
.cert-voet small {
  font-size: 1.9cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(38, 51, 31, 0.55);
}
.cert-link {
  margin: 0;
  font-size: 1.8cqw;
  color: rgba(38, 51, 31, 0.55);
}

@media print {
  body > header,
  body > footer,
  .no-print,
  .cart-panel,
  .cart-backdrop,
  .buy-bar,
  .toast {
    display: none !important;
  }
  .certificaat {
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: #fff;
  }
  @page {
    size: A4 portrait;
    margin: 10mm;
  }
}

/* ---------------------------------------------------- winkelmand: voortgang */
.cart-progress {
  margin-bottom: 1rem;
}
.cart-balk {
  height: 4px;
  border-radius: 99px;
  background: rgba(31, 31, 31, 0.1);
  overflow: hidden;
}
.cart-balk i {
  display: block;
  height: 100%;
  width: calc(var(--vol) * 100%);
  border-radius: 99px;
  background: var(--gold);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-progress.vol .cart-balk i {
  background: var(--groen, #26331f);
}
.cart-shipping {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: rgba(31, 31, 31, 0.65);
}
.cart-extras {
  padding: 1.2rem 1.6rem 0;
  border-top: 1px solid var(--line);
}
.extras-kop {
  margin: 0 0 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.5);
}
.extra {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0.5rem 0.9rem;
  align-items: start;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.extra img {
  width: 46px;
  height: auto;
  grid-row: span 2;
}
.extra strong {
  display: block;
  font-size: 0.92rem;
}
.extra p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(31, 31, 31, 0.65);
}
.extra-knop {
  grid-column: 2;
  justify-self: start;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--terra);
  border-radius: 99px;
  background: none;
  color: var(--terra);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.extra-knop:hover {
  background: var(--terra);
  color: #fff;
}
.extra-abo {
  display: block;
  padding: 0.9rem 1rem;
  margin-bottom: 1.1rem;
  border: 1px dashed var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}
.extra-abo strong {
  display: block;
  font-size: 0.88rem;
}
.extra-abo span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(31, 31, 31, 0.65);
}
.extra-abo b {
  color: var(--terra);
}
.extra-abo:hover {
  border-color: var(--terra);
}
a.checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
}
a.checkout.is-uit {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- afrekenen */
.af-stappen {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0 7vw;
  margin-bottom: 2.4rem;
}
.af-stap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: 99px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(31, 31, 31, 0.45);
}
.af-stap b {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 500;
}
.af-stap.nu {
  color: var(--terra);
  background: rgba(178, 92, 56, 0.08);
}
.af-stap.klaar {
  color: var(--groen, #26331f);
}
.af-stap.klaar b {
  background: var(--groen, #26331f);
  border-color: var(--groen, #26331f);
  color: #fff;
  font-size: 0;
}
.af-stap.klaar b::after {
  content: "✓";
  font-size: 0.75rem;
}

.af-blad {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding: 0 7vw clamp(5rem, 9vw, 8rem);
}
@media (max-width: 900px) {
  .af-blad {
    grid-template-columns: 1fr;
  }
}
.af-sectie {
  padding-bottom: 2.4rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--line);
}
.af-sectie:last-child {
  border-bottom: 0;
}
.af-sectie h2 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.4rem;
  font: 500 1.5rem var(--serif);
}
.af-nr {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--groen, #26331f);
  color: #fff;
  font: 500 0.85rem var(--sans, inherit);
}
.af-regel {
  display: grid;
  grid-template-columns: 54px 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.af-thumb img {
  width: 54px;
  height: auto;
  display: block;
}
.af-regel strong {
  display: block;
  font-size: 0.95rem;
}
.af-regel small {
  font-size: 0.8rem;
  color: rgba(31, 31, 31, 0.6);
}
.af-regel b {
  font-variant-numeric: tabular-nums;
}
.af-leeg {
  padding: 1.6rem 0;
  color: rgba(31, 31, 31, 0.6);
}

.af-bump,
.af-abo {
  display: block;
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--gold);
  border-radius: 4px;
  background: rgba(201, 162, 76, 0.06);
}
.af-bump > label,
.af-abo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  cursor: pointer;
}
.af-bump input,
.af-abo input {
  margin-top: 0.25rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--terra);
}
.af-bump-tekst,
.af-abo > span {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.7);
}
.af-bump-tekst strong,
.af-abo strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.95rem;
  color: var(--ink, #1f1f1f);
}
.af-kaartje {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  padding-left: 1.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.6);
}
.af-abo {
  border-style: solid;
  border-color: var(--line);
  background: none;
}

.af-hulp {
  margin: -0.6rem 0 1.4rem;
  font-size: 0.88rem;
  color: rgba(31, 31, 31, 0.62);
}
.af-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.af-veld.breed {
  grid-column: 1 / -1;
}
@media (max-width: 560px) {
  .af-raster {
    grid-template-columns: 1fr;
  }
}
.af-veld {
  display: grid;
  gap: 0.35rem;
}
.af-veld > span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.6);
}
.af-veld > span i {
  font-style: normal;
  opacity: 0.6;
}
.af-veld input,
.af-veld select,
.af-kaartje input {
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink, #1f1f1f);
}
.af-veld input:focus-visible,
.af-veld select:focus-visible,
.af-kaartje input:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 1px;
}
.af-veld small {
  font-size: 0.76rem;
  color: rgba(31, 31, 31, 0.55);
}

.af-betaal {
  display: grid;
  gap: 0.6rem;
}
.af-methode {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.af-methode input {
  accent-color: var(--terra);
  width: 1.05rem;
  height: 1.05rem;
}
.af-methode strong {
  display: block;
  font-size: 0.95rem;
}
.af-methode small {
  font-size: 0.8rem;
  color: rgba(31, 31, 31, 0.6);
}
.af-methode:has(input:checked) {
  border-color: var(--terra);
  background: rgba(178, 92, 56, 0.05);
}
.af-klein {
  margin-top: 1.4rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.55);
}

.af-sam-binnen {
  position: sticky;
  top: 6.5rem;
  padding: 1.7rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.6);
}
.af-sam-moed {
  margin: 0 0 1.1rem;
  font: 500 1.15rem/1.4 var(--serif);
  color: var(--terra);
  text-wrap: balance;
}
.af-regels {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.af-regels div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.af-regels b {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.af-totalen {
  margin: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.88rem;
}
.af-totalen div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.af-totalen dt,
.af-totalen dd {
  margin: 0;
}
.af-totalen dd {
  font-variant-numeric: tabular-nums;
}
.af-eind {
  padding-top: 0.7rem;
  margin-top: 0.3rem;
  border-top: 1px solid var(--line);
  font: 500 1.15rem var(--serif);
}
.af-btw {
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  color: rgba(31, 31, 31, 0.5);
}
.af-balk {
  margin: 1.2rem 0 0;
}
.af-balk-baan {
  height: 4px;
  border-radius: 99px;
  background: rgba(31, 31, 31, 0.1);
  overflow: hidden;
}
.af-balk-baan i {
  display: block;
  height: 100%;
  width: calc(var(--vol) * 100%);
  background: var(--gold);
  border-radius: 99px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.af-balk p {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: rgba(31, 31, 31, 0.65);
}
.af-betaalknop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: 1.4rem;
  padding: 1rem 1.3rem;
  border: 0;
  border-radius: 99px;
  background: var(--groen, #26331f);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.af-betaalknop:hover:not(:disabled) {
  background: var(--terra);
  transform: translateY(-1px);
}
.af-betaalknop:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.af-betaalknop-bedrag {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.af-levering {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  text-align: center;
  color: rgba(31, 31, 31, 0.65);
}
.af-gerust {
  margin: 1.4rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(31, 31, 31, 0.62);
}
.af-gerust li {
  position: relative;
  padding-left: 1.2rem;
}
.af-gerust li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
}
@media (prefers-reduced-motion: reduce) {
  .cart-balk i,
  .af-balk-baan i,
  .af-betaalknop {
    transition: none;
  }
}

/* `hidden` moet winnen van de display-waarden hierboven; anders blijft een
   verborgen totaalregel of kaartveld gewoon staan. */
.af-blad [hidden],
.cart-extras[hidden],
.cart-progress[hidden] {
  display: none !important;
}
/* De flessen zijn hoge PNG's. Zonder hoogtebegrenzing wordt elke mandregel
   drie keer zo hoog als nodig. */
.af-thumb {
  display: grid;
  place-items: center;
  height: 72px;
}
.af-thumb img {
  width: auto;
  max-width: 54px;
  max-height: 72px;
}
/* De aantalknoppen komen uit de winkelmand en dragen daar `grid-area: qty`.
   Dat gebied bestaat op de afrekenpagina niet, waardoor ze een eigen rij
   aanmaakten. Hier gewoon meelopen in de kolomindeling. */
.af-regel .cart-qty {
  grid-area: auto;
}
.af-code {
  margin-top: 1.4rem;
}
.af-code > label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.6);
}
.af-code-rij {
  display: flex;
  gap: 0.5rem;
  max-width: 26rem;
}
.af-code-rij input {
  flex: 1;
  min-width: 0;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.af-code-rij button {
  padding: 0 1.1rem;
  border: 1px solid var(--groen, #26331f);
  border-radius: 3px;
  background: none;
  color: var(--groen, #26331f);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.af-code-rij button:hover {
  background: var(--groen, #26331f);
  color: #fff;
}
.af-code-uitslag {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  min-height: 1.2em;
}
.af-code-uitslag.goed {
  color: var(--groen, #26331f);
}
.af-code-uitslag.fout {
  color: var(--terra);
}

/* Onderlinge receptlinks. Elk recept was alleen bereikbaar via het overzicht;
   met drie zijlinks per pagina staan ze in een net in plaats van aan één draad. */
.recept-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.recept-kaart {
  display: grid;
  gap: 0.3rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.recept-kaart:hover {
  border-color: var(--terra);
  transform: translateY(-2px);
}
.recept-kaart span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.5);
}
.recept-kaart strong {
  font: 500 1.1rem/1.25 var(--serif);
}
.recept-kaart em {
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(31, 31, 31, 0.65);
}

/* Werkelijke bestelling op de bedankpagina. */
.bevestig-order {
  padding: 1.7rem 1.8rem;
  margin-bottom: 2.4rem;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: rgba(201, 162, 76, 0.07);
}
.bevestig-order[hidden] {
  display: none !important;
}
.bevestig-kop {
  margin: 0 0 0.5rem;
  font: 500 1.35rem var(--serif);
}
.bevestig-tekst {
  margin: 0 0 1rem;
  color: rgba(31, 31, 31, 0.75);
}
.bevestig-regels {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}
.bevestig-bedrag {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(31, 31, 31, 0.6);
}

/* ------------------------------------------------------------- bronnenlijst */
.bronlijst {
  padding: 2rem 2.1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.45);
}
.bronlijst h2 {
  margin: 0 0 1.2rem;
  font: 500 1.3rem var(--serif);
}
.bronlijst ol {
  margin: 0;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(31, 31, 31, 0.78);
}
.bron-auteur {
  font-weight: 500;
  color: var(--ink, #1f1f1f);
}
.bronlijst a {
  white-space: nowrap;
}
.bron-opmerking {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: rgba(31, 31, 31, 0.6);
}
.bronverwijzing {
  font-size: 0.7em;
  line-height: 0;
}
.bronverwijzing a {
  text-decoration: none;
  padding: 0 0.1em;
}

/* ---------------------------------------------------------------- oogstdata */
.partij-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.partij {
  padding: 1.6rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.45);
}
.partij header {
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.partij h3 {
  margin: 0;
  font: 500 1.25rem var(--serif);
}
.partij-cultivar {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.5);
}
.partij dl {
  margin: 0;
  display: grid;
  gap: 0.65rem;
}
.partij dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.86rem;
}
.partij dt {
  color: rgba(31, 31, 31, 0.62);
}
.partij dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* De wettelijke grens achter een meetwaarde. Bewust kleiner en lichter dan het
   getal zelf: het cijfer is het nieuws, de grens is de context. Op een eigen
   regel, want naast een lange waarde als "6,0 meq O₂/kg" past hij niet meer op
   dezelfde regel zonder dat de kolom gaat breken. */
.partij .grens {
  display: block;
  font-size: 0.74rem;
  font-variant-numeric: normal;
  color: rgba(31, 31, 31, 0.45);
}
.partij-toelichting {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.68);
}
.partij-oordeel {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.55;
}
.partij-oordeel.boven {
  color: var(--groen, #26331f);
}
.partij-oordeel.onder {
  color: var(--terra);
}

/* -------------------------------------------------------------- citaten */
.citaat {
  margin: 2rem 0;
  padding: 1.7rem 1.9rem;
  border-left: 3px solid var(--gold);
  background: rgba(201, 162, 76, 0.06);
}
.citaat blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.citaat blockquote p {
  margin: 0;
  font: italic 400 1.12rem/1.65 var(--serif);
}
.citaat figcaption {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.1rem;
  font-size: 0.82rem;
}
.citaat figcaption span {
  color: rgba(31, 31, 31, 0.6);
}
.citaat-leeg {
  border-left-style: dashed;
  background: none;
}
.citaat-kop {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
}
.citaat-leeg p:last-child {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(31, 31, 31, 0.6);
}

/* ------------------------------------------------------------ Duitse laag */
/* Balk boven elke Duitse pagina met de leveringsvoorwaarde, en het
   wachtlijstformulier. Vormgeving volgt bewust de bestaande .af-veld-stijl van
   de afrekenpagina, zodat het Duitse deel niet als een ander merk oogt. */

.de-hinweis {
  margin: 0;
  padding: 0.85rem clamp(1rem, 5vw, 3rem);
  background: var(--forest, #26331f);
  color: #f4f1e8;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}
.de-hinweis p {
  margin: 0 auto;
  max-width: 68ch;
}
.de-hinweis a {
  color: var(--gold, #c9a24c);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.warteliste {
  display: grid;
  gap: 1rem;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.wl-veld {
  display: grid;
  gap: 0.35rem;
}
.wl-veld label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.6);
}
.wl-veld input,
.wl-veld select {
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink, #1f1f1f);
}
.wl-veld input:focus-visible,
.wl-veld select:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 1px;
}
.warteliste button[type="submit"] {
  justify-self: start;
}
.wl-klein {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(31, 31, 31, 0.6);
}
.wl-status {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 3px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.wl-status.is-goed {
  background: rgba(38, 51, 31, 0.06);
  border-left: 3px solid var(--forest, #26331f);
}
.wl-status.is-fout {
  background: rgba(176, 74, 45, 0.08);
  border-left: 3px solid var(--terra, #b04a2d);
}

/* ------------------------------------------------------ bronnenregister */
/* /onderzoek/. De balansbalk bovenaan is het punt van de pagina: hij laat in
   één oogopslag zien hoeveel bronnen ons tegenspreken. */

.os-balans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin: 1.6rem 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.os-balans > div {
  display: grid;
  gap: 0.2rem;
  padding: 1.1rem 1rem;
  background: #fff;
  text-align: center;
}
.os-balans b {
  font-family: var(--display, "Cormorant Garamond", serif);
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 600;
  color: var(--forest, #26331f);
}
.os-balans span {
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(31, 31, 31, 0.62);
}

.os-lijst {
  display: grid;
  gap: 1rem;
}
.os-studie {
  display: grid;
  gap: 0.45rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 4px;
  background: #fff;
  scroll-margin-top: 5rem;
}
.os-studie:target {
  border-left-color: var(--gold, #c9a24c);
  background: rgba(201, 162, 76, 0.05);
}
.os-kop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: baseline;
  justify-content: space-between;
}
.os-kop h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}
.os-weegt {
  flex: none;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.os-steunt {
  background: rgba(38, 51, 31, 0.09);
  color: var(--forest, #26331f);
}
.os-nuanceert {
  background: rgba(201, 162, 76, 0.18);
  color: #6b5218;
}
.os-tegen {
  background: rgba(176, 74, 45, 0.12);
  color: var(--terra, #b04a2d);
}
.os-studie p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}
.os-titel {
  font-style: italic;
  color: rgba(31, 31, 31, 0.8);
}
.os-bron {
  font-size: 0.82rem !important;
  color: rgba(31, 31, 31, 0.58);
}
.os-waarom {
  padding-top: 0.15rem;
  color: rgba(31, 31, 31, 0.75);
}
.os-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem !important;
  color: rgba(31, 31, 31, 0.55);
}
.os-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------- grafieken */
/* Inline SVG bij de onderzoeken. Getekend uit de werkelijke meetwaarden, dus
   ze mogen prominent staan: dit is bewijs, geen decoratie. */

.grafiek {
  margin: 1.8rem 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.grafiek-svg {
  display: block;
  width: 100%;
  height: auto;
  background: #fdfcf9;
}
.grafiek figcaption {
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem 1.15rem 1.05rem;
  border-top: 1px solid var(--line);
}
.grafiek figcaption strong {
  font-size: 0.98rem;
  line-height: 1.35;
}
.grafiek figcaption span {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.72);
}
.grafiek figcaption cite {
  font-size: 0.78rem;
  font-style: normal;
  color: rgba(31, 31, 31, 0.55);
}
.grafiek figcaption cite a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------- boomgaardjournaal */
.jaren {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto;
}
.jaar {
  position: relative;
  padding: 1.3rem 1.4rem 1.4rem 4.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.jaar-nr {
  position: absolute;
  left: 1.3rem;
  top: 1.25rem;
  margin: 0;
  font-family: var(--display, "Cormorant Garamond", serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--gold, #c9a24c);
  font-variant-numeric: tabular-nums;
}
.jaar h3 {
  margin: 0 0 0.5rem;
  font-size: 1.12rem;
  line-height: 1.3;
}
.jaar p,
.jaar li {
  font-size: 0.93rem;
  line-height: 1.62;
}
.jaar p {
  margin: 0 0 0.55rem;
}
.jaar ul {
  margin: 0.4rem 0 0.7rem;
  padding-left: 1.1rem;
  color: rgba(31, 31, 31, 0.72);
}
.jaar-bron {
  margin: 0.6rem 0 0 !important;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem !important;
  color: rgba(31, 31, 31, 0.55);
}
.jaar-leeg {
  border-style: dashed;
  background: #fdfcf9;
}
.jaar-vol {
  border-left: 3px solid var(--forest, #26331f);
}

/* -------------------------------------------- Duitse juridische pagina's */
/* Het Muster-Widerrufsformular is een formulier dat de klant uitprint of
   overtypt, geen lopende tekst. Het krijgt daarom een kader en invulregels:
   zo ziet een lezer meteen wat hij moet invullen, en dat is precies wat de
   wetgever met "Muster" bedoelt. */
.adressblock {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
  line-height: 1.7;
}
.formular-muster {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fbfaf5;
}
.formular-muster .prose > p {
  margin-bottom: 0.9rem;
}
ul.formular-felder {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.formular-felder li {
  margin: 0 0 1.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #cfc9b4;
  font-size: 0.9rem;
  color: #6b6858;
}
.formular-fussnote {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: #6b6858;
}

/* ----------------------------------------------------- medisch voorbehoud */
/* Staat op de vier gezondheidsartikelen, direct boven het auteursblok. Rustig
   getekend en niet als waarschuwing: het is geen alarm maar een afbakening, en
   een rood kader eromheen zou suggereren dat er gevaar is. Dezelfde breedte en
   dezelfde linkerlijn als het auteursblok, zodat de twee als één geheel lezen. */
.voorbehoud {
  max-width: 46rem;
  margin: 2.2rem auto 0;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 3px solid #b7ab86;
  border-radius: 4px;
  background: #fbfaf5;
}
.voorbehoud + .auteur {
  margin-top: 0.75rem;
}
.voorbehoud-kop {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6858;
}
.voorbehoud p {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #46443b;
}
.voorbehoud p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- auteur */
/* Wie dit schrijft. Staat onder de inhoudspagina's omdat een lezer daar de
   vraag stelt, en omdat Google-beoordelaars expliciet nagaan of er iemand
   aanwijsbaar verantwoordelijk is. */
.auteur {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  max-width: 46rem;
  margin: 2.2rem auto 0;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest, #26331f);
  border-radius: 4px;
  background: #fdfcf9;
}
.auteur-foto {
  flex: 0 0 auto;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}
.auteur-compact .auteur-foto {
  width: 3.6rem;
  height: 3.6rem;
}
.auteur-tekst {
  min-width: 0;
}
.auteur-naam {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin: 0 0 0.4rem;
  font-family: var(--display, "Cormorant Garamond", serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}
.auteur-rol {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(31, 31, 31, 0.55);
}
.auteur-waarom {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.78);
}
.auteur-links {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(31, 31, 31, 0.5);
}
.auteur-links a {
  color: var(--forest, #26331f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 34rem) {
  .auteur {
    flex-direction: column;
    gap: 0.9rem;
  }
}

/* Losse oogstverhalen, nog zonder jaartal. Twee kolommen omdat het er vier zijn
   en ze los van elkaar te lezen horen; de `waarom` staat lichter zodat het
   verschil zichtbaar is tussen wat verteld is en wat wij eraan toevoegen. */
.verhalen {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  margin: 0 auto;
}
@media (min-width: 46rem) {
  .verhalen {
    grid-template-columns: 1fr 1fr;
  }
}
.verhaal {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold, #c9a24c);
  border-radius: 4px;
  background: #fff;
}
.verhaal h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  line-height: 1.3;
}
.verhaal p {
  margin: 0 0 0.6rem;
  font-size: 0.93rem;
  line-height: 1.62;
}
.verhaal p:last-child {
  margin-bottom: 0;
}
.verhaal-waarom {
  color: rgba(31, 31, 31, 0.66);
}

/* ------------------------------------------------------------ publiek beeld */
/* Historische prenten en vrij gelicentieerde foto's. De credit hoort zichtbaar
   bij het beeld: bij CC BY en CC BY-SA is naamsvermelding een voorwaarde. */

/* --------------------------------------------------------------- beeldblok

   Twee soorten beeld met bewust twee behandelingen.

   Een museumprent is een voorwerp op papier. Die krijgt een passe-partout: een
   warme mat met een haarlijn eromheen, zoals hij in een collectie hangt. Dat
   maakt in één oogopslag duidelijk dat het geen foto van ons is — precies de
   reden dat we prenten gebruiken in plaats van stockbeeld.

   Een eigen foto is documentatie. Die staat vol in het kader, zonder mat, met
   een subtiele schaduw zodat hij van de crèmekleurige achtergrond loskomt.

   Het bijschrift is geen onderschrift maar inhoud: de uitleg staat in de
   leesletter, de herkomst eronder in klein kapitaal. Een lijntje aan de
   linkerkant bindt ze samen en geeft het blok een anker in de kolom. */

.pubbeeld {
  margin: 2.4rem 0;
  padding: 0;
  /* De figure staat als broer van .prose in de sectiecontainer en werd dus
     zo breed als de hele pagina, terwijl de tekstkolom 74ch is en links
     staat. Het beeld erin werd gecentreerd en kwam daardoor rechts naast de
     tekst uit te hangen. Zelfde breedte als de kolom houdt beeld en tekst
     op één linkerlijn. 46rem komt overeen met de sizes-hint op de img. */
  max-width: min(100%, 46rem);
}

/* Staande foto's niet dwingend bijsnijden. Een malaxeur of een botanische plaat
   is hoog; die op een vaste hoogte afkappen haalt de kop of de voet eraf. In
   plaats van croppen begrenzen we de hoogte en centreren we het beeld. */
.pubbeeld img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 34rem;
  margin-inline: 0;
  border-radius: 3px;
  background: #efe9dc;
}
/* De brede variant is bewust een band over de volle kolom, dus die houdt
   de sectiebreedte in plaats van de tekstkolom.

   De hoogtelimiet van 26rem maakte van een kolom van 1267px een strook van
   3,05 breed tegen hoog. De foto's erin zijn ongeveer 1,5 breed tegen hoog, dus
   er ging de helft af. Met 16:9 blijft het een band, maar valt er nog maar een
   achtste weg. */
.pubbeeld-breed {
  max-width: 100%;
}
.pubbeeld-breed img {
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* Eigen foto: documentatie, dus vol in beeld en met diepte. */
.eigenfoto img {
  box-shadow:
    0 1px 2px rgba(31, 31, 31, 0.08),
    0 12px 28px -12px rgba(38, 51, 31, 0.35);
}

/* Museumprent: een voorwerp op papier, dus in een passe-partout. */
.pubbeeld:not(.eigenfoto) img {
  padding: clamp(0.7rem, 2.4vw, 1.5rem);
  background: #f8f4ea;
  border: 1px solid rgba(31, 31, 31, 0.13);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.pubbeeld figcaption {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
}
.pb-uitleg {
  font-size: 0.95rem;
  line-height: 1.62;
  color: rgba(31, 31, 31, 0.8);
  max-width: 62ch;
  text-wrap: pretty;
}
.pb-credit {
  font-size: 0.68rem;
  line-height: 1.55;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* stond op 0.45 en haalde 2.74:1; hoofdletters op 0.68rem hebben juist meer
     contrast nodig, niet minder */
  color: rgba(31, 31, 31, 0.74);
}
.pb-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(31, 31, 31, 0.28);
}
.pb-credit a:hover {
  color: var(--terra);
  text-decoration-color: currentColor;
}

@media (max-width: 700px) {
  .pubbeeld {
    margin: 1.8rem 0;
  }
  .pubbeeld img {
    max-height: 26rem;
  }
  .pubbeeld figcaption {
    padding-left: 0.7rem;
  }
}

/* Uitvoerende instelling bij een studie. Lichter dan de bevinding: het is
   herkomst, geen uitkomst. Alleen zichtbaar waar de affiliatie is nagelopen. */
.os-instelling {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(31, 31, 31, 0.6);
}

/* ------------------------------------------------------------- programma */
/* De tien-boomgaardenteller. Sober gehouden: de rest van de site is ingehouden
   van toon en een juichende balk zou dat ondermijnen. Een getal, tien punten,
   een peildatum. */
.programma {
  max-width: 42rem;
  margin: 2rem auto;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--forest, #26331f);
  border-radius: 4px;
  background: #fdfcf9;
}
.pr-kop {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-family: var(--display, "Cormorant Garamond", serif);
}
.pr-nu {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--forest, #26331f);
  font-variant-numeric: tabular-nums;
}
.pr-van {
  font-size: 1.05rem;
  color: rgba(31, 31, 31, 0.7);
}
.pr-punten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}
.pr-punt {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
}
.pr-punt.vol {
  border-color: var(--forest, #26331f);
  background: var(--forest, #26331f);
}
/* Het tussendoel krijgt een ring, zodat zichtbaar is waar de eerste mijlpaal
   ligt zonder dat er een extra label bij hoeft. */
.pr-punt.tussen {
  box-shadow: 0 0 0 2px #fdfcf9, 0 0 0 3px var(--gold, #c9a24c);
}
.pr-tussen,
.pr-uitleg,
.pr-link {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.72);
}
.pr-balk {
  height: 6px;
  margin: 0.9rem 0 0.7rem;
  border-radius: 3px;
  background: rgba(31, 31, 31, 0.09);
  overflow: hidden;
}
.pr-balk i {
  display: block;
  height: 100%;
  width: calc(var(--deel) * 100%);
  min-width: 3px;
  border-radius: 3px;
  background: var(--gold, #c9a24c);
}
.pr-link {
  margin-bottom: 0;
}
.pr-link a {
  color: var(--forest, #26331f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.programma-compact {
  padding: 1.2rem 1.3rem;
}
.programma-compact .pr-nu {
  font-size: 1.9rem;
}

/* --------------------------------------------- zekerheden onder de koopknop

   Geen keurmerkbadges en geen vinkjes in een vrolijke kleur. Drie feitelijke
   regels in de kleinste leesbare maat, met dezelfde ruit die elders op de site
   een opsomming markeert. Ze horen niet op te vallen: ze horen er te zijn op het
   moment dat iemand ernaar zoekt, en verder stil te blijven. */

/* De dagprijs onder de literprijs. Kleiner en lichter: het is context bij het
   bedrag, geen tweede prijs. Zie dagRegel() in src/layout.mjs voor waarom hij
   er staat. */
/* Waarschuwing in de mand als de bestelling niet meer in de voorraad past.
   Terra en niet rood: het is geen fout van de klant. */
.cart-voorraad {
  margin: 0 0 0.7rem;
  padding: 0.7rem 0.85rem;
  border-radius: 4px;
  background: rgba(176, 96, 58, 0.09);
  color: #7a3f22;
  font-size: 0.78rem;
  line-height: 1.5;
}
.cart-voorraad a {
  color: inherit;
  text-decoration: underline;
}

.buy-price .buy-perdag {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: rgba(31, 31, 31, 0.5);
}

.buy-zeker {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.95rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
}
.buy-zeker li {
  display: grid;
  grid-template-columns: 0.9rem 1fr;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(31, 31, 31, 0.62);
  text-wrap: pretty;
}
.buy-zeker .zeker-ruit {
  color: var(--gold);
  font-size: 0.6rem;
  line-height: 2.1;
}

/* De tekst hoort in één grid-item. Een losse <a> naast een tekstknoop levert
   drie items op in een tweekolomsgrid, en dan valt alles na de link naar een
   nieuwe rij die onder de ruit begint. Zie koopZekerheid() in src/layout.mjs. */
.buy-zeker .zeker-tekst {
  min-width: 0;
}
.buy-zeker a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(31, 31, 31, 0.3);
}
.buy-zeker a:hover {
  color: var(--terra);
}

/* ------------------------------------------------- de mand die was blijven staan

   Onderin, niet in het midden. Een balk die je kunt negeren terwijl je verder
   leest is iets anders dan een venster dat de pagina afdekt en om een reactie
   vraagt. Dat verschil is het hele punt: dit is een herinnering, geen halte.

   Komt op met een korte translate en respecteert prefers-reduced-motion. */

.mand-terug {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  z-index: 60;
  width: min(30rem, calc(100vw - 2rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.85rem 0.85rem 1.15rem;
  background: var(--dark);
  color: #f6f2e8;
  border-radius: 6px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translate(-50%, calc(100% + 1.5rem));
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.mand-terug.in {
  opacity: 1;
  transform: translate(-50%, 0);
}
.mand-terug p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
}
.mand-terug strong {
  font-weight: 600;
}
.mand-terug div {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.mand-terug-knop {
  padding: 0.5rem 0.95rem;
  border-radius: 4px;
  background: var(--gold);
  color: var(--dark);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.mand-terug-knop:hover {
  background: #d8b365;
}
.mand-terug-weg {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(246, 242, 232, 0.65);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.mand-terug-weg:hover {
  color: #f6f2e8;
  background: rgba(255, 255, 255, 0.08);
}
.mand-terug :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mand-terug {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}

/* De vaste koopbalk op mobiel zit op dezelfde plek. Eén van de twee is genoeg. */
@media (max-width: 700px) {
  body:has(.buy-bar:not([hidden])) .mand-terug {
    display: none;
  }
  .mand-terug {
    bottom: 0.7rem;
    padding: 0.7rem 0.7rem 0.7rem 0.95rem;
  }
  .mand-terug p {
    font-size: 0.8rem;
  }
}

/* ------------------------------------------------------------------ claims
   Een goedgekeurde gezondheidsclaim is geen marketingzin en mag er ook niet
   als een marketingzin uitzien. De vormgeving hieronder leent van een
   bijsluiter, niet van een banner: smalle regel ernaast, ingetogen kleur, en
   de vier verplichte vermeldingen uit artikel 10 lid 2 van Verordening
   1924/2006 in kleiner corps eronder — zichtbaar, niet weggedrukt.

   De claim staat bewust NIET in de accentkleur van de knoppen. Wie hem voor
   een verkoopargument aanziet, leest hem verkeerd. */

.claimblok {
  margin: 2.4rem 0;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--lijn, #d9d4c7);
  border-left: 3px solid #7d8b5f;
  background: #fbfaf6;
  border-radius: 3px;
}

.claimblok .eyebrow {
  margin: 0 0 0.6rem;
}

.claimblok h3 {
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
}

.claim-tekst {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}

.claim-tekst p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.55;
  font-style: italic;
}

.claim-herkomst {
  margin: 0 0 1.2rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #5c5a52;
}

dl.claim-voorwaarden {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid #e4e0d4;
}

dl.claim-voorwaarden div {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 0.9rem;
}

dl.claim-voorwaarden dt {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b6858;
}

dl.claim-voorwaarden dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

p.claim-voorwaarden {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #5c5a52;
}

@media (max-width: 620px) {
  dl.claim-voorwaarden div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* De korte variant onder een specificatietabel op een productpagina. */
.claimregel {
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid #7d8b5f;
  background: #f7f6f1;
  border-radius: 2px;
}

.claimregel p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.62;
  color: #4a4840;
}

.claimregel p + p {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: #66635a;
}

.claimregel strong {
  font-style: italic;
  font-weight: 500;
  color: #2c2a24;
}

/* Ingesprongen subregel in een voedingswaardetabel ("waarvan verzadigd"). */
.spec-table .inspring {
  display: inline-block;
  padding-left: 1.1rem;
  font-weight: 400;
}

/* Statuslabel in de tabel met gereguleerde vermeldingen. */
.tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  background: #e8e5da;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b6858;
  vertical-align: middle;
}

.tag-open {
  background: #f0e2cd;
  color: #8a5c22;
}

.prose p.klein {
  font-size: 0.85rem;
  line-height: 1.65;
  color: #5c5a52;
}

/* Een goedgekeurde claim die wij NIET voeren, zoals de polyfenolclaim zolang de
   meting ontbreekt. Die mag er niet uitzien als een claim die wel gevoerd wordt:
   grijs in plaats van groen, en het label zegt het zelf. Wie alleen de vorm
   scant en de kleine letters overslaat, moet aan de kleur al zien wat hier
   staat. */
.claimblok.niet-gevoerd {
  border-left-color: #b3ada0;
  background: #f4f3ee;
}

.claimblok.niet-gevoerd .claim-tekst p {
  color: #6b675c;
}

.claimblok.niet-gevoerd .eyebrow {
  color: #7a7568;
}

/* Links in een specificatietabel.
   `.prose a` styleert alleen links binnen lopende tekst; een tabel valt daar
   buiten. Daardoor stond "Volledige tabel per eetlepel" in de spectabel als
   gewone zwarte tekst — een link die niemand als link herkent is geen link.
   Ook `.claimregel a`, om dezelfde reden. */
.spec-table a,
.claimregel a {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.spec-table a:hover,
.claimregel a:hover {
  text-decoration-thickness: 2px;
}

/* ------------------------------------------------------ Duitse kopbalk
   De Duitse kant erft `site-header` uit styles.css, maar niet `.nav`: die is
   onder 960 pixels verborgen tot site.js hem opent, en de Duitse pagina's
   laden geen script. `de-nav` doet hetzelfde werk zonder die afhankelijkheid.
   Zie de toelichting boven headerDe() in src/de/layout-de.mjs. */

.de-nav {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 30px);
  margin-left: auto;
  white-space: nowrap;
}

/* GEEN eigen kleur. De kopbalk is bovenaan de pagina doorzichtig boven een
   crèmekleurige achtergrond en wordt pas donker zodra je scrollt. Wie hier een
   vaste lichte kleur invult, krijgt crème op crème: precies wat er gebeurde
   toen ik dat wél deed en de Duitse navigatie onzichtbaar werd. `inherit`
   volgt de kopbalk in beide toestanden, net als .nav a in styles.css. */
.de-nav a {
  flex: 0 0 auto;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}

.de-nav a:hover,
.de-nav a.active {
  color: var(--gold);
}

.de-taal {
  flex: 0 0 auto;
  margin-left: clamp(12px, 2vw, 26px);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.62;
  text-decoration: none;
  transition: opacity 0.4s ease;
}

.de-taal:hover {
  opacity: 1;
}

/* Onder 960 px is er geen menuknop om op te drukken, dus de balk groeit mee
   in plaats van de navigatie te verbergen. */
@media (max-width: 960px) {
  .site-header.de-head {
    height: auto;
    flex-wrap: wrap;
    row-gap: 4px;
    padding-block: 10px;
    /* Ruimer dan de 12 px die styles.css hier zet: de balk heeft afgeronde
       hoeken en de laatste letter van "NEDERLANDS" liep anders de bocht in. */
    padding-inline: 22px;
  }
  /* Merk en taalkeuze delen de eerste regel, de navigatie krijgt de tweede.
     Dat scheelt een hele regel ten opzichte van drie losse rijen, en op een
     scherm van 390 pixels is de kopbalk anders een kwart van het beeld.

     Ik heb dit onderweg één keer verkeerd "gerepareerd": op een screenshot
     leek de taalkeuze afgesneden ("NEDER…"), maar dat was een artefact —
     headless Chrome dwingt een minimale vensterbreedte af en rendert dus
     breder dan je opgeeft. Opgemeten stond het element netjes binnen de balk.
     Screenshots bij smalle vensters zijn hier geen bewijs; apparaatemulatie
     via DevTools wel. */
  .de-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0;
    gap: 8px 14px;
    white-space: normal;
  }
  .de-nav a {
    font-size: 0.62rem;
  }
  .de-taal {
    margin-left: auto;
    font-size: 0.6rem;
  }
}

/* ============================================ koopzekerheden en de brugbalk
   Uit de doorlichting van de startpagina kwamen twee gaten in de koopkant naar
   voren. Dit blok dicht ze allebei. */

/* ---- 1. wat je kunt verwachten, onder de productkaarten
   Verzendkosten, levertijd, bedenktijd en betaalmethoden stonden alleen in de
   winkelmand en op de servicepagina's, dus pas nadat iemand al iets had
   toegevoegd. Ze horen op de plek waar de prijs staat. */
.koopzekerheid {
  margin: clamp(40px, 4.6vw, 68px) auto 0;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 36px);
  max-width: 1100px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
  border: 1px solid rgba(31, 31, 31, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.42);
}
.koopzekerheid li {
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.72);
  text-wrap: pretty;
}
.koopzekerheid b {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 900px) {
  .koopzekerheid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .koopzekerheid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ---- 2. de tweede keuze in de hero
   De adoptieknop stond even zwaar naast de bestelknop en was zelfs breder,
   terwijl het verschil 21,95 tegen 175 euro per jaar is. Als tekstregel blijft
   de route bestaan zonder de eerste beslissing in tweeën te hakken. */
.hero-alt {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font: 500 0.82rem var(--sans);
  letter-spacing: 0.02em;
}
.hero-alt a {
  color: rgba(244, 239, 228, 0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 228, 0.28);
  padding-bottom: 2px;
  transition:
    color 0.5s var(--silk),
    border-color 0.5s var(--silk);
}
.hero-alt a span {
  display: inline-block;
  margin-left: 0.3rem;
  transition: transform 0.5s var(--silk);
}
.hero-alt a:hover {
  color: var(--cream);
  border-color: var(--gold);
}
.hero-alt a:hover span {
  transform: translateX(4px);
}

/* ---- 3. de brugbalk over het gat zonder koopmogelijkheid
   Gemeten liep er 17.200px op desktop en 25.857px op mobiel tussen de
   productkaarten en de eerstvolgende link naar dezelfde olie. De balk staat
   alleen in dat stuk; site.js zet de klasse. */
.buy-bar-home:not([hidden]) {
  display: flex;
}
.buy-bar-home strong {
  letter-spacing: 0.01em;
}
.buy-bar-knop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 8px 0 22px;
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font: 700 0.72rem var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.5s var(--silk),
    transform 0.5s var(--silk);
}
.buy-bar-knop .button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: transform 0.5s var(--silk);
}
.buy-bar-knop:hover {
  background: #3d4d30;
}
.buy-bar-knop:hover .button-icon {
  transform: translateX(3px);
}

/* Op een breed scherm hoort hij niet van rand tot rand: als zwevend eiland
   sluit hij aan bij de kopbalk en dekt hij minder van de pagina af. */
@media (min-width: 861px) {
  .buy-bar-home:not([hidden]) {
    left: 50%;
    right: auto;
    bottom: 22px;
    width: min(540px, calc(100% - 48px));
    padding: 0.55rem 0.55rem 0.55rem 1.5rem;
    border: 1px solid rgba(31, 31, 31, 0.1);
    border-radius: 999px;
    box-shadow: 0 20px 54px rgba(10, 15, 8, 0.2);
    transform: translate3d(-50%, calc(100% + 34px), 0);
  }
  .buy-bar-home.show {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buy-bar-home,
  .buy-bar-knop,
  .buy-bar-knop .button-icon,
  .hero-alt a,
  .hero-alt a span {
    transition: none;
  }
}

/* ---- 4. de kopbalk krimpt zodra je gaat lezen
   Op desktop is de balk 122px hoog om de tak ruimte te geven, oftewel veertien
   procent van een scherm van 900px, en dat de hele pagina lang. Boven aan de
   hero mag dat, want daar is de tak onderdeel van het beeld. Zodra je scrolt is
   het alleen nog navigatie en kan hij een derde kleiner. site.js zet de klasse
   .scrolled al vanaf 40px, dus er is geen extra scrollafhandeling nodig.

   Hier wordt wel de hoogte zelf geanimeerd in plaats van een transform. Dat mag
   hier: de balk staat fixed, dus er verschuift niets in de pagina eronder, en
   met een transform zou de tak vervormen in plaats van meekrimpen. */
@media (min-width: 1181px) {
  .site-header {
    transition:
      background 0.6s var(--silk),
      transform 0.6s var(--silk),
      box-shadow 0.6s var(--silk),
      height 0.6s var(--silk),
      padding-bottom 0.6s var(--silk);
  }
  .site-header.scrolled {
    height: 86px;
    padding-bottom: 13px;
  }
  .branch {
    transition:
      height 0.6s var(--silk),
      opacity 0.6s var(--silk);
  }
  .site-header.scrolled .branch {
    height: 44px;
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .branch {
    transition: none;
  }
}

/* ================================== de weg van olijf naar olie, in stappen
   Deze sectie was ruim achthonderd woorden lopende tekst aan één stuk. De
   inhoud is gebleven, want die doet het werk voor de vindbaarheid, maar hij is
   nu opgedeeld in drie blokken met een eigen ritme: de keten van vijf stappen,
   de vergelijking met de oude pers, en drie genummerde verschillen.

   De platen zijn in dezelfde hand getekend als die van de oogstlijn, zodat het
   één tekenaar lijkt en niet een verzameling losse plaatjes. */

.perslijn {
  margin: clamp(40px, 4.6vw, 72px) 0 clamp(44px, 5vw, 80px);
}
.perslijn > h3 {
  margin: 0 0 clamp(24px, 2.8vw, 40px);
  font: 500 clamp(1.5rem, 2.3vw, 2.2rem) var(--serif);
  line-height: 1.1;
  color: var(--ink);
}
.perslijn ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Bij elkaar opgeteld met de padding hieronder stond er eerst 88px tussen
     twee stappen. Dat is ruimer dan het ritme van de rest van de pagina en het
     rekte de sectie onnodig op. */
  gap: clamp(20px, 2.2vw, 32px);
}
.perslijn li {
  display: grid;
  grid-template-columns: clamp(96px, 13vw, 190px) minmax(0, 1fr);
  /* De platen zijn vierkant en dus even hoog, terwijl de stappen sterk in
     lengte verschillen. Op start uitlijnen liet onder de korte stappen een gat
     van bijna een halve plaat staan. */
  align-items: center;
  column-gap: clamp(20px, 2.6vw, 40px);
  padding-bottom: clamp(20px, 2.2vw, 32px);
  border-bottom: 1px solid rgba(31, 31, 31, 0.09);
}
.perslijn li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.perslijn figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(31, 31, 31, 0.03);
}
.perslijn figure img {
  display: block;
  width: 100%;
  height: auto;
}
.perslijn-tekst b {
  display: block;
  font: 600 0.68rem var(--sans);
  letter-spacing: 0.2em;
  color: var(--gold);
}
.perslijn-tekst h4 {
  margin: 0.4rem 0 0.5rem;
  font: 500 clamp(1.4rem, 2.1vw, 2rem) var(--serif);
  line-height: 1.1;
  color: var(--ink);
}
.perslijn-tekst p {
  margin: 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(31, 31, 31, 0.78);
  text-wrap: pretty;
}
/* Het detail onder de stap is de harde controleerbare claim, niet zomaar een
   bijschrift. Daarom een gouden streep ervoor en geen cursief. */
.perslijn-tekst small {
  display: inline-block;
  margin-top: 0.8rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--gold);
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(31, 31, 31, 0.66);
}

/* Op een telefoon werd de plaat naast de tekst 72px breed, en dan is er van een
   decanter of een malaxeur niets meer te herkennen. Juist die tekeningen zijn
   hier het punt, dus staat de plaat op smalle schermen boven de tekst en groot
   genoeg om te lezen. */
@media (max-width: 640px) {
  .perslijn li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    justify-items: start;
  }
  .perslijn figure {
    width: min(46%, 168px);
  }
  .perslijn-tekst h4 {
    font-size: 1.25rem;
  }
  .perslijn-tekst p {
    font-size: 0.94rem;
  }
}

/* ---- oud naast nieuw */
.pers-vergelijk {
  display: grid;
  grid-template-columns: clamp(220px, 26vw, 340px) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(28px, 3.4vw, 56px);
  margin: 0 0 clamp(44px, 5vw, 80px);
}
.pers-vergelijk figure {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(31, 31, 31, 0.03);
}
.pers-vergelijk figure img {
  display: block;
  width: 100%;
  height: auto;
}
.pers-vergelijk h3 {
  margin: 0 0 0.7rem;
  font: 500 clamp(1.5rem, 2.3vw, 2.2rem) var(--serif);
  line-height: 1.1;
  color: var(--ink);
}
.pers-vergelijk p {
  margin: 0 0 0.9rem;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.72;
  color: rgba(31, 31, 31, 0.78);
  text-wrap: pretty;
}
.pers-vergelijk p:last-child {
  margin-bottom: 0;
}
/* De kern van het hele stuk: oud en nieuw verschillen principieel niet. Die
   zin mag eruit springen, anders verdrinkt hij in de uitleg eromheen. */
.pers-kern {
  padding-left: clamp(14px, 1.4vw, 20px);
  border-left: 2px solid var(--gold);
  color: rgba(31, 31, 31, 0.86) !important;
}

@media (max-width: 860px) {
  .pers-vergelijk {
    grid-template-columns: 1fr;
    row-gap: clamp(20px, 4vw, 30px);
    justify-items: start;
  }
  .pers-vergelijk figure {
    width: min(70%, 300px);
  }
}

/* ---- de drie verschillen */
.pers-verschil h3 {
  margin: 0 0 0.5rem;
  font: 500 clamp(1.5rem, 2.3vw, 2.2rem) var(--serif);
  line-height: 1.1;
  color: var(--ink);
}
.pers-verschil-lede {
  margin: 0 0 clamp(24px, 2.8vw, 40px);
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(31, 31, 31, 0.7);
}
.pers-verschil ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.pers-verschil li {
  padding-top: clamp(16px, 1.8vw, 24px);
  border-top: 2px solid rgba(31, 31, 31, 0.14);
}
.pers-verschil li b {
  display: block;
  font: 600 0.68rem var(--sans);
  letter-spacing: 0.2em;
  color: var(--gold);
}
.pers-verschil li h4 {
  margin: 0.45rem 0 0.6rem;
  font: 500 clamp(1.15rem, 1.5vw, 1.4rem) var(--serif);
  line-height: 1.15;
  color: var(--ink);
}
.pers-verschil li p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.72;
  color: rgba(31, 31, 31, 0.76);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .pers-verschil ol {
    grid-template-columns: 1fr;
    gap: clamp(22px, 4vw, 32px);
  }
}

/* ============================== natuurlijk versus geraffineerd, en de vijf
   herkenpunten
   Dezelfde ingreep als bij de perssectie: de tekst blijft staan voor de
   vindbaarheid, maar de vorm is opgedeeld. Het verschil tussen de twee routes
   stond als twee alinea's onder elkaar, terwijl het juist een tegenstelling is.
   En de vijf dingen waaraan je het zelf herkent stonden als kale opsomming,
   terwijl dat precies de punten zijn die iemand in de winkel voor de hand moet
   hebben. */

.twee-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin: clamp(30px, 3.4vw, 52px) 0 clamp(44px, 5vw, 76px);
  align-items: start;
}
.twee-routes article {
  padding-top: clamp(16px, 1.8vw, 24px);
  border-top: 2px solid rgba(31, 31, 31, 0.16);
}
/* De geraffineerde route krijgt de terracottakleur van de waarschuwing
   elders op de site, zodat het onderscheid ook zonder de tekst leesbaar is. */
.twee-routes .route-tegen {
  border-top-color: var(--terra);
}
.twee-routes figure {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  width: min(100%, 300px);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(31, 31, 31, 0.03);
}
.twee-routes figure img {
  display: block;
  width: 100%;
  height: auto;
}
.twee-routes b {
  display: block;
  font: 600 0.68rem var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.twee-routes .route-tegen b {
  color: var(--terra);
}
.twee-routes h4 {
  margin: 0.45rem 0 0.7rem;
  font: 500 clamp(1.3rem, 1.9vw, 1.75rem) var(--serif);
  line-height: 1.12;
  color: var(--ink);
}
.twee-routes p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.72;
  color: rgba(31, 31, 31, 0.78);
  text-wrap: pretty;
}
.route-slot {
  margin-top: 0.9rem !important;
  padding-left: clamp(12px, 1.2vw, 16px);
  border-left: 2px solid var(--terra);
  font-weight: 500;
  color: rgba(31, 31, 31, 0.88) !important;
}

@media (max-width: 760px) {
  .twee-routes {
    grid-template-columns: 1fr;
    gap: clamp(26px, 5vw, 40px);
  }
  .twee-routes figure {
    width: min(60%, 240px);
  }
}

/* ---- de vijf herkenpunten */
.herkenpunten > h3 {
  margin: 0 0 clamp(24px, 2.8vw, 40px);
  font: 500 clamp(1.5rem, 2.3vw, 2.2rem) var(--serif);
  line-height: 1.1;
  color: var(--ink);
}
.herkenpunten ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}
.herkenpunten li {
  display: grid;
  align-content: start;
}
.herkenpunten figure {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(31, 31, 31, 0.03);
}
.herkenpunten figure img {
  display: block;
  width: 100%;
  height: auto;
}
.herkenpunten h4 {
  margin: 0 0 0.45rem;
  font: 500 clamp(1.02rem, 1.3vw, 1.22rem) var(--serif);
  line-height: 1.18;
  color: var(--ink);
}
.herkenpunten p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(31, 31, 31, 0.76);
  text-wrap: pretty;
}
.herkenpunten-slot {
  margin: clamp(32px, 3.6vw, 52px) 0 0;
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid rgba(31, 31, 31, 0.1);
}

/* Vijf naast elkaar wordt onder de 1080px te smal voor de tekst eronder, dus
   daar drie en dan twee. De laatste rij blijft links uitgelijnd, dat leest
   rustiger dan gecentreerde restjes. */
@media (max-width: 1080px) {
  .herkenpunten ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .herkenpunten ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 4vw, 28px);
  }
}
/* Onder de 420px past er nog maar één punt op een regel, en dan is de plaat
   boven de tekst zonde van de hoogte. De plaat staat daar links naast de tekst.
   De tekst zit in een eigen omhulsel, anders belandt de alinea in de smalle
   beeldkolom in plaats van naast de plaat. */
@media (max-width: 420px) {
  .herkenpunten ol {
    grid-template-columns: 1fr;
  }
  .herkenpunten li {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
  }
  .herkenpunten figure {
    margin-bottom: 0;
  }
}

/* ==================================================== het uitklapmenu leesbaar
   Twee dingen liepen hier mis.

   1. De links in het uitklapblok stonden op crème, want dat erven ze van de
      kopbalk die over de donkere hero ligt. Het blok zelf is licht, dus stond er
      crème op wit: 1.15 op 1, praktisch onzichtbaar. Ze krijgen nu dezelfde
      donkere kleur als de kopbalk gebruikt zodra hij op een lichte ondergrond
      staat, met terracotta bij hover, precies zoals de hoofdlinks.

      Let op de plek van dit blok: het moet ná de .site-header.on-light-regels
      staan, want die hebben dezelfde zwaarte. Verplaatsen naar boven maakt het
      stil ongedaan.

   2. De hangende olijf onder een menu-item wordt getekend met .nav a:before en
      :after, en die selector raakt ook de links ín het uitklapblok. Daardoor
      liep er een gouden kettinkje van olijven dwars door het paneel, over de
      tekst heen. De decoratie hoort alleen bij de hoofdlinks.

   Het paneel zelf was wit met hoeken van 4px, terwijl de rest van de site op
   crème staat met zachte rondingen. Nu crème, zodat het als een blaadje papier
   op de foto ligt in plaats van als een systeemmenu. */

@media (min-width: 1181px) {
  .nav-sub {
    padding: 0.5rem;
    border: 1px solid rgba(31, 31, 31, 0.1);
    border-radius: 12px;
    background: var(--cream);
    box-shadow: 0 18px 44px rgba(10, 15, 8, 0.2);
  }
  .site-header .nav .nav-sub a {
    border-radius: 7px;
    color: rgba(31, 31, 31, 0.82);
    font-size: 0.78rem;
    transition:
      color 0.35s var(--silk),
      background 0.35s var(--silk);
  }
  .site-header .nav .nav-sub a:hover,
  .site-header .nav .nav-sub a:focus-visible,
  .site-header .nav .nav-sub a.active {
    color: var(--terra);
    background: rgba(201, 162, 76, 0.16);
  }
  /* de olijf aan het steeltje hoort alleen onder een hoofdlink */
  .nav-sub a:before,
  .nav-sub a:after {
    display: none;
  }
}

/* ==================================================== mobiele retrofit, ronde 2
   Alles hieronder staat in een media query, dus de desktopopmaak blijft
   onaangeraakt. Gemeten op 390x844 met apparaatemulatie, niet op het oog.

   Drie dingen kwamen uit de meting:

   1. De Duitse kopbalk was 111 px hoog en de navigatielinks waren 16 px hoog.
      Dat is te klein om te raken, en de balk brak in twee regels omdat de
      links naast elkaar niet pasten.
   2. Op de Duitse pagina's begon de h1 pas op 422 px, precies de helft van een
      scherm van 844 px. De ruimte boven de titel was afgestemd op een balk van
      64 px, niet op een die er 111 telt.
   3. Twee losse knoppen op de afrekenpagina bleven net onder de 44 px.

   Wat hier NIET is aangepast en waarom:
   - De galerij op de productpagina houdt `loading="lazy"` op beeld twee en
     drie. Dat is een swipe-rij; die staan buiten beeld naar rechts en laden
     zodra je veegt. Een audit-script ziet ze als "boven de vouw" omdat het
     alleen naar de DOM-volgorde kijkt.
   - Het postcodeveld krijgt geen `inputmode="numeric"`. Een Nederlandse
     postcode is 1234 AB, dus met een cijfertoetsenbord kun je de letters niet
     typen. */

@media (max-width: 960px) {
  /* ---- 1. Duitse navigatie: alle vijf de links zichtbaar én raakbaar.

     Ze waren 16 px hoog en stonden in twee krappe regels. Nu zijn het twee
     regels van 44 px.

     Ik heb eerst een schuifbare rij van één regel gebouwd, want dat hield de
     balk lager. Op 390 px paste daar precies drie van de vijf links in en werd
     "Herkunft" halverwege afgekapt, met "Warteliste" helemaal buiten beeld.
     Dat is nu net het item waar de hele Duitse tak op stuurt: er is nog geen
     Duitse winkel, dus de wachtlijst ís de conversie. Een navigatie die de
     enige actie verstopt achter een veeg is geen mobiele verbetering.
     Zichtbaarheid wint hier van 22 px hoogte.

     Een uitklapmenu zou beide kunnen, maar de Duitse pagina's laden bewust
     geen enkel script, en een CSS-only <details> kun je op desktop niet open
     forceren. */
  .de-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0;
    gap: 0 12px;
  }
  .de-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* Ook in de breedte: "Start" is een kort woord en mat 39 px. */
    min-width: 44px;
    /* 0.62rem was ongeveer 10 px in hoofdletters met ruime letterafstand.
       Leesbaar op een screenshot, niet in een rijdende trein. */
    font-size: 0.68rem;
  }
  .de-taal {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: auto;
    font-size: 0.64rem;
  }
  /* De balk wordt met twee regels van 44 px vanzelf hoger. Dat compenseren we
     door de eigen ruimte eromheen terug te brengen; netto blijft hij binnen
     een paar pixels van wat hij was. */
  .site-header.de-head {
    row-gap: 0;
    padding-block: 4px;
  }

  /* ---- 2. Ruimte boven de titel afstemmen op de balk die er echt staat.

     `.page-head` hield clamp(120px, 20vh, 160px) aan. Bij een balk van 64 px
     is dat al royaal; bij de Duitse balk bleef de titel onder de vouw hangen.
     De waarde is nu gekoppeld aan de werkelijke balkhoogte plus lucht. */
  .page-head {
    padding-top: clamp(96px, 13vh, 124px);
  }
  .de-head ~ main .page-head,
  .de-head + main .page-head {
    padding-top: clamp(112px, 15vh, 140px);
  }
  .product-detail {
    padding-top: clamp(96px, 13vh, 124px);
  }
}

@media (max-width: 600px) {
  /* ---- 3. De twee zichtbare vinkjes op de afrekenpagina.

     Ze meten 17 px. Het bijbehorende <label> is wel groot genoeg en schakelt
     mee, dus bereikbaar waren ze al; dit is winst in precisie voor wie het
     vakje zelf aanwijst. Bewust op id en niet op `input[type=checkbox]`: de
     betaalmethodes en de maatkiezer gebruiken keuzerondjes die met opzet tot
     1 px zijn teruggebracht met een opgemaakt label eroverheen. Een generieke
     regel zou die weer zichtbaar maken. */
  #af-cadeau,
  #af-abonnement,
  /* Ook de betaalmethodes. Die staan op 1,05rem, oftewel 17 px. Het label
     eromheen is een rij van de volle breedte met ruime padding, dus raken kon
     je ze al; maar dit is de laatste stap vóór betalen en daar hoort het
     bolletje zelf ook aanwijsbaar te zijn. De rij is een grid met `auto 1fr`,
     dus een breder eerste vak schuift alleen de tekst een paar pixels op. */
  .af-methode input {
    min-width: 24px;
    min-height: 24px;
  }
}

/* Wat hier bewust NIET staat: een regel die "Zo werkt het" op de
   afrekenpagina naar 44 px trekt. Mijn meting gaf 259 bij 40 en dat leek een
   knop, maar het is een gewone link midden in een lopende zin binnen het
   abonnement-label. Voor tekstlinks in lopende tekst geldt de uitzondering van
   WCAG 2.5.8, en hem opblazen zou de zin uit elkaar trekken. */