:root {
  --cream: #f4efe4;
  --green: #4a5d3a;
  --dark: #26331f;
  --terra: #6b3a22;
  --gold: #c9a24c;
  --ink: #1f1f1f;
  --line: rgba(31, 31, 31, 0.18);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}
body.lock {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  background: var(--cream);
  padding: 0.7rem 1rem;
}
.skip:focus {
  top: 1rem;
}
.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 96px;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  color: var(--cream);
  border-bottom: 1px solid rgba(244, 239, 228, 0.35);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: 0.12em;
  line-height: 1;
}
.brand svg {
  width: 28px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
}
.brand small {
  display: block;
  font: 500 0.48rem var(--sans);
  letter-spacing: 0.24em;
  margin-top: 0.55rem;
}
.nav {
  display: flex;
  gap: 2.5vw;
  margin-left: auto;
  margin-right: 3vw;
}
.nav a {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.nav a:hover {
  color: var(--gold);
}
.cart-button,
.menu-button {
  background: none;
  border: 0;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cart-count {
  display: inline-grid;
  place-items: center;
  margin-left: 0.4rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark);
}
.menu-button {
  display: none;
}
.hero {
  min-height: 860px;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 120px 7vw 60px;
  background:
    linear-gradient(
      90deg,
      rgba(16, 26, 13, 0.92) 0%,
      rgba(20, 31, 15, 0.65) 42%,
      rgba(20, 31, 15, 0.08) 72%
    ),
    url("assets/hero-grove.png") center/cover;
}
.hero-content {
  max-width: 670px;
  color: var(--cream);
}
.eyebrow {
  margin: 0 0 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--terra);
  font-weight: 700;
  font-size: 0.68rem;
}
.eyebrow.light {
  color: var(--gold);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.94;
}
h1 {
  font-size: clamp(4rem, 6.7vw, 7rem);
  letter-spacing: -0.04em;
  margin: 0 0 1.5rem;
}
.hero-copy {
  max-width: 540px;
  font: 500 1.1rem/1.7 var(--sans);
  color: rgba(244, 239, 228, 0.86);
}
.actions {
  display: flex;
  gap: 0.8rem;
  margin: 2rem 0;
}
.button {
  min-height: 54px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  /* stond op 0.72rem, oftewel 11.5px. Uitgespatieerde hoofdletters op die maat
     lezen slecht, en juist de knoppen moeten van een afstand te lezen zijn. */
  font-size: 0.81rem;
}
.button.gold {
  background: var(--gold);
  color: var(--dark);
}
.button.ghost {
  border-color: rgba(244, 239, 228, 0.6);
  color: var(--cream);
}
.button:hover {
  transform: translateY(-2px);
}
.stock {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.stock span {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #82a65e;
  border-radius: 50%;
  margin-right: 0.6rem;
  box-shadow: 0 0 0 4px rgba(130, 166, 94, 0.15);
}
.scroll-hint {
  position: absolute;
  right: 5vw;
  bottom: 2rem;
  color: var(--cream);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.scroll-hint span {
  color: var(--gold);
  font-size: 1.2rem;
  margin-left: 1rem;
}
.trust {
  background: var(--dark);
  color: var(--cream);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 2rem 6vw;
}
.trust div {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  border-right: 1px solid rgba(244, 239, 228, 0.2);
}
.trust div:last-child {
  border: 0;
}
.trust b {
  font: 500 1.9rem var(--serif);
  color: var(--gold);
}
.trust span {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.trust small {
  opacity: 0.55;
  text-transform: none;
  letter-spacing: 0;
}
.section {
  padding: clamp(5rem, 9vw, 9rem) 7vw;
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 5rem;
}
.section-heading .eyebrow {
  grid-column: 1/-1;
  margin-bottom: -1rem;
}
.section-heading h2 {
  font-size: clamp(3.2rem, 5.7vw, 6rem);
  margin: 0;
  letter-spacing: -0.04em;
}
.section-heading > p:last-child {
  max-width: 570px;
  margin: 0;
  color: #5c5a54;
}
.section-heading.centered {
  display: block;
  text-align: center;
  max-width: 850px;
  margin: 0 auto 4rem;
}
.section-heading.centered p:last-child {
  margin: 1.5rem auto;
}
h2 em {
  font-weight: 500;
  color: var(--terra);
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.problem-grid article {
  padding: 2.2rem 2rem 0 0;
  margin-right: 2rem;
  border-right: 1px solid var(--line);
}
.problem-grid article:last-child {
  border: 0;
}
.problem-grid b {
  font: 500 4.5rem var(--serif);
  color: var(--gold);
}
.problem-grid h3 {
  font-size: 1.8rem;
  margin: 0.6rem 0;
}
.problem-grid p {
  font-size: 0.9rem;
  color: #5c5a54;
}
.direct {
  background: var(--green);
  color: var(--cream);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8vw;
}
.direct-title h2 {
  font-size: clamp(3.5rem, 6vw, 6rem);
}
.direct-title em {
  color: var(--gold);
}
.process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(244, 239, 228, 0.3);
}
.process article {
  padding: 2rem;
  border-right: 1px solid rgba(244, 239, 228, 0.2);
  border-bottom: 1px solid rgba(244, 239, 228, 0.2);
}
.process b {
  color: var(--gold);
  font: 500 2.5rem var(--serif);
}
.process h3 {
  font-size: 1.65rem;
  margin: 0.5rem 0;
}
.process p {
  font-size: 0.85rem;
  opacity: 0.7;
}
.product-photo {
  height: min(52vw, 650px);
  overflow: hidden;
  margin-bottom: 4rem;
}
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  margin-bottom: 5rem;
}
.product {
  padding: 3rem 6vw 1rem 0;
}
.product + article {
  border-left: 1px solid var(--line);
  padding-left: 6vw;
}
.product-no {
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  color: var(--terra);
  font-weight: 700;
}
.product h3 {
  font-size: 3.2rem;
  margin: 0.4rem 0;
}
.taste {
  color: #6c675e;
}
.product ul,
.reserve ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  border-top: 1px solid var(--line);
}
.product li,
.reserve li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
}
.buy {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.buy strong,
.reserve-buy strong {
  display: block;
  font: 500 2.6rem var(--serif);
  color: var(--terra);
}
.buy small,
.reserve-buy small {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.add {
  border: 0;
}
.buy .add {
  background: var(--green);
  color: white;
  padding: 1rem 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
}
.reserve {
  background: var(--terra);
  color: var(--cream);
  padding: 4rem;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.55fr;
  gap: 4vw;
  align-items: end;
}
.reserve h3 {
  font-size: 3.7rem;
  margin: 0.4rem 0 1rem;
}
.reserve p {
  max-width: 650px;
  opacity: 0.78;
}
.reserve ul {
  border-color: rgba(244, 239, 228, 0.25);
}
.reserve li {
  border-color: rgba(244, 239, 228, 0.25);
}
.reserve-buy strong {
  color: var(--gold);
}
.reserve-buy .button {
  margin-top: 1rem;
  width: 100%;
}
.family {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 820px;
}
.family-photo {
  min-height: 700px;
}
.family-copy {
  align-self: center;
}
.family h2 {
  font-size: clamp(3.7rem, 6vw, 6.3rem);
}
.family-copy > p:not(.eyebrow) {
  font-size: 1.05rem;
  max-width: 580px;
}
.family blockquote {
  font: italic 500 2rem/1.25 var(--serif);
  color: var(--terra);
  margin: 3rem 0;
  padding-left: 2rem;
  border-left: 1px solid var(--gold);
}
.text-link {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--green);
  padding-bottom: 0.5rem;
}
.adoption {
  background: var(--dark);
  color: var(--cream);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 8vw;
}
.adopt-intro h2 {
  font-size: clamp(3.7rem, 6vw, 6rem);
}
.adopt-intro h2 em {
  color: var(--gold);
}
.adopt-price {
  font: 500 5.5rem var(--serif);
  color: var(--gold);
}
.adopt-price small {
  font: 600 0.7rem var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cream);
}
.adopt-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.adopt-details article {
  padding: 2rem;
  border-top: 1px solid rgba(244, 239, 228, 0.22);
}
.adopt-details b {
  font: 500 2.5rem var(--serif);
  color: var(--gold);
}
.adopt-details h3 {
  font-size: 1.7rem;
  margin: 0.3rem 0;
}
.adopt-details p {
  font-size: 0.82rem;
  opacity: 0.65;
}
.adopt-details .button {
  grid-column: 1/-1;
  width: 100%;
  margin-top: 2rem;
  background: var(--cream);
  color: var(--dark);
}
.health {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8vw;
  background: #e9e1d2;
}
.health-big {
  display: flex;
  align-items: center;
  color: var(--green);
}
.health-big span {
  font: 500 clamp(12rem, 24vw, 25rem)/0.65 var(--serif);
}
.health-big p {
  font: 500 2rem/1 var(--serif);
  margin: 0 0 0 -1rem;
}
.health-copy h2 {
  font-size: clamp(3.4rem, 5.4vw, 5.5rem);
}
.health-copy > p {
  max-width: 600px;
}
.health-copy .note {
  font-size: 0.72rem;
  /* #716b61 gaf 4.06:1 op het zandvlak, net onder de eis */
  color: #5f594f;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
}
.recipes {
  background: var(--cream);
}
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.recipe-grid article {
  padding: 3rem 2rem 4rem 0;
  border-right: 1px solid var(--line);
  min-height: 300px;
}
.recipe-grid article + article {
  padding-left: 2rem;
}
.recipe-grid span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--terra);
}
.recipe-grid h3 {
  font-size: 2.5rem;
  margin: 3.5rem 0;
}
.recipe-grid p {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.newsletter {
  background: var(--green);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: end;
}
.newsletter h2 {
  font-size: clamp(3.5rem, 6vw, 6rem);
  margin: 0;
}
.newsletter h2 em {
  color: var(--gold);
}
.newsletter form label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.newsletter form > div {
  display: flex;
  border-bottom: 1px solid var(--cream);
}
.newsletter input {
  flex: 1;
  background: none;
  border: 0;
  color: white;
  padding: 1rem 0;
  outline: 0;
}
.newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.newsletter form button {
  background: none;
  border: 0;
  color: var(--gold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.newsletter form p {
  font-size: 0.7rem;
  opacity: 0.55;
  margin-top: 0.8rem;
}
footer {
  background: #182015;
  color: var(--cream);
  padding: 5rem 7vw 2rem;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 4vw;
}
footer h3 {
  font: 600 0.68rem var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
}
footer a,
footer p {
  display: block;
  font-size: 0.78rem;
  opacity: 0.65;
  margin: 0.4rem 0;
}
.footer-brand span {
  font: 500 2.1rem var(--serif);
  letter-spacing: 0.1em;
}
.copyright {
  grid-column: 1/-1;
  border-top: 1px solid rgba(244, 239, 228, 0.15);
  padding-top: 1.5rem;
  margin-top: 3rem;
}
.cart {
  position: fixed;
  z-index: 60;
  right: 0;
  top: 0;
  height: 100%;
  width: min(460px, 100%);
  background: var(--cream);
  transform: translateX(105%);
  transition: 0.4s cubic-bezier(0.7, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
.cart.open {
  transform: none;
}
.cart-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.cart-head h2 {
  font-size: 2.5rem;
  margin: 0;
}
.cart-close {
  border: 0;
  background: none;
  font-size: 2rem;
}
.cart-items {
  flex: 1;
  overflow: auto;
  padding: 1rem 0;
}
.cart-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.cart-row h3 {
  font-size: 1.35rem;
  margin: 0;
}
.cart-row p {
  font-size: 0.8rem;
}
.cart-row button {
  border: 0;
  background: none;
  color: var(--terra);
  font-size: 0.7rem;
}
.cart-bottom > div {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}
.checkout {
  width: 100%;
  padding: 1rem;
  background: var(--green);
  color: white;
  border: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.checkout:disabled {
  opacity: 0.4;
}
.cart-bottom small {
  display: block;
  text-align: center;
  margin-top: 0.7rem;
  color: #777;
}
.backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  background: rgba(10, 15, 8, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.backdrop.show {
  opacity: 1;
  visibility: visible;
}
.toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 2rem);
  background: var(--dark);
  color: white;
  padding: 0.8rem 1.4rem;
  opacity: 0;
  transition: 0.3s;
  font-size: 0.8rem;
  /* De melding was het enige blok op de site met scherpe hoeken en zonder
     schaduw, waardoor hij als een systeemwaarschuwing las in plaats van als
     onderdeel van de winkel. */
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(10, 16, 8, 0.32);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@media (max-width: 960px) {
  .site-header {
    height: 76px;
    padding: 0 1.3rem;
  }
  .nav {
    position: fixed;
    z-index: 55;
    inset: 76px 0 auto;
    background: var(--dark);
    display: none;
    flex-direction: column;
    padding: 2rem;
  }
  .nav.open {
    display: flex;
  }
  .cart-button {
    margin-left: auto;
  }
  .menu-button {
    display: block;
    width: 44px;
  }
  .menu-button span {
    display: block;
    height: 1px;
    background: white;
    margin: 7px;
  }
  .hero {
    min-height: 740px;
    padding: 110px 1.4rem 50px;
    background-position: 62% center;
  }
  .hero-content {
    max-width: 620px;
  }
  .trust {
    grid-template-columns: 1fr 1fr;
    padding: 1.5rem;
  }
  .trust div {
    padding: 1rem;
  }
  .trust div:nth-child(2) {
    border-right: 0;
  }
  .section {
    padding: 5rem 1.4rem;
  }
  .section-heading {
    display: block;
  }
  .section-heading h2 {
    margin-bottom: 1.5rem;
  }
  .problem-grid {
    grid-template-columns: 1fr 1fr;
  }
  .problem-grid article:nth-child(2) {
    border: 0;
  }
  .direct,
  .adoption,
  .health,
  .newsletter {
    grid-template-columns: 1fr;
  }
  .product-photo {
    height: 60vw;
  }
  .reserve {
    grid-template-columns: 1fr;
  }
  .family {
    grid-template-columns: 1fr;
  }
  .family-photo {
    height: 70vh;
    min-height: 520px;
  }
  .recipe-grid {
    grid-template-columns: 1fr;
  }
  .recipe-grid article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  footer {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  h1 {
    font-size: 3.55rem;
  }
  .hero {
    min-height: 760px;
  }
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .button {
    width: 100%;
  }
  .scroll-hint {
    display: none;
  }
  .trust div {
    padding: 0.8rem 0;
    gap: 0.5rem;
  }
  .trust b {
    font-size: 1.5rem;
  }
  .trust span {
    font-size: 0.6rem;
  }
  .problem-grid,
  .product-grid,
  .adopt-details {
    grid-template-columns: 1fr;
  }
  .problem-grid article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.5rem;
  }
  .process {
    grid-template-columns: 1fr;
  }
  .product + article {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }
  .product-photo {
    height: 75vw;
    margin-inline: -1.4rem;
  }
  .reserve {
    padding: 2rem;
    margin-inline: -1.4rem;
  }
  .reserve h3 {
    font-size: 2.8rem;
  }
  .family h2 {
    font-size: 3.7rem;
  }
  .adopt-details article {
    padding-left: 0;
  }
  .health-big span {
    font-size: 14rem;
  }
  .recipe-grid h3 {
    margin: 2rem 0;
  }
  .newsletter form > div {
    display: block;
  }
  .newsletter form button {
    padding: 1rem 0;
  }
  footer {
    grid-template-columns: 1fr;
  }
  .copyright,
  .footer-brand {
    grid-column: auto;
  }
  .brand {
    font-size: 1.05rem;
  }
  .brand small {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Content stays readable even when a browser throttles scroll observers. */
.reveal {
  opacity: 1;
  transform: none;
}

/* Luxury motion layer */
:root {
  --sans: "Outfit", system-ui, sans-serif;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  --silk: cubic-bezier(0.32, 0.72, 0, 1);
}
body {
  overflow-x: hidden;
  background: #f6f0e5;
}
.film-grain {
  position: fixed;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.page-progress {
  position: fixed;
  z-index: 92;
  inset: 0 0 auto;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.page-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.site-header {
  position: fixed;
  top: 22px;
  left: 50%;
  width: min(1220px, calc(100% - 44px));
  height: 72px;
  transform: translateX(-50%);
  padding: 0 24px;
  border: 1px solid rgba(244, 239, 228, 0.18);
  border-radius: 999px;
  background: rgba(20, 30, 15, 0.58);
  box-shadow:
    0 18px 60px rgba(10, 15, 8, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  transition:
    background 0.6s var(--silk),
    transform 0.6s var(--silk),
    box-shadow 0.6s var(--silk);
}
.site-header.scrolled {
  background: rgba(24, 32, 20, 0.88);
  box-shadow:
    0 22px 70px rgba(8, 12, 6, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.13);
}
.brand {
  font-size: 1.2rem;
}
.nav a {
  position: relative;
}
.nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--spring);
}
.nav a:hover:after,
.nav a:focus-visible:after {
  transform: scaleX(1);
  transform-origin: left;
}
.cart-button {
  min-height: 44px;
  padding: 0 4px 0 14px;
  border-radius: 999px;
  transition: background 0.5s var(--spring);
}
.cart-button:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cart-count {
  width: 32px;
  height: 32px;
  transition: transform 0.6s var(--spring);
}
.cart-count.bump {
  transform: scale(1.28) rotate(8deg);
}
.hero {
  min-height: 100dvh;
  height: auto;
  justify-content: center;
  text-align: center;
  padding: 150px 5vw 80px;
  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.png") center/cover;
  overflow: hidden;
}
.hero:before {
  content: "";
  position: absolute;
  inset: -8%;
  background: inherit;
  background-position: center;
  background-size: cover;
  transform: scale(1.08);
  will-change: transform;
  animation: hero-breathe 18s var(--silk) infinite alternate;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22),
    transparent 30%,
    rgba(6, 12, 5, 0.58)
  );
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: auto;
}
.hero h1 {
  max-width: 1100px;
  font-size: clamp(4.4rem, 8.2vw, 8.8rem);
  line-height: 0.78;
  letter-spacing: -0.055em;
  text-wrap: balance;
  margin-inline: auto;
}
.hero-copy {
  max-width: 650px;
  margin-inline: auto;
  font-weight: 300;
  font-size: 1.05rem;
}
.hero .actions {
  justify-content: center;
}
.hero .stock {
  display: inline-flex;
  align-items: center;
}
.scroll-hint {
  z-index: 3;
}
@keyframes hero-breathe {
  to {
    transform: scale(1.14) translate3d(1.2%, -0.8%, 0);
  }
}
.button,
.buy .add {
  border-radius: 999px;
  min-height: 58px;
  padding: 5px 6px 5px 22px;
  transition:
    transform 0.7s var(--spring),
    background 0.5s var(--spring),
    color 0.5s var(--spring),
    border-color 0.5s var(--spring);
}
.button:hover,
.buy .add:hover {
  transform: translateY(-3px) scale(1.015);
}
.button:active,
.buy .add:active {
  transform: scale(0.98);
}
.button-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1rem;
  transition:
    transform 0.7s var(--spring),
    background 0.5s var(--spring);
}
.gold .button-icon,
.cream .button-icon,
.buy .add .button-icon {
  background: rgba(28, 38, 23, 0.1);
}
.magnetic:hover .button-icon {
  transform: translate3d(3px, -2px, 0) rotate(5deg) scale(1.08);
}
.trust {
  position: relative;
  z-index: 4;
  padding: 2.3rem 6vw;
}
.marquee {
  overflow: hidden;
  background: var(--gold);
  color: var(--dark);
  padding: 0.75rem 0;
}
.marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  animation: marquee-move 24s linear infinite;
}
.marquee span {
  font: 500 0.67rem var(--sans);
  letter-spacing: 0.22em;
}
.marquee i {
  width: 5px;
  height: 5px;
  background: var(--dark);
  border-radius: 50%;
}
@keyframes marquee-move {
  to {
    transform: translateX(-50%);
  }
}
/* De ruimte tussen twee secties is de som van twee keer deze waarde. Op 12vw
   was dat 173px onder en 173px boven, dus 346px kale ruimte tussen de laatste
   regel van de ene sectie en de eerste van de volgende, en met de dode ruimte
   binnen de secties erbij liep het op tot ruim 400px. Dat leest niet als rust
   maar als een gat. Op 7,5vw wordt het 108px per kant en blijft de sectie nog
   ruim ademen. */
.section {
  padding-top: clamp(4.25rem, 7.5vw, 8rem);
  padding-bottom: clamp(4.25rem, 7.5vw, 8rem);
}
/* Het laatste blok in een sectie liet zijn eigen ondermarge staan. Die telde op
   bij de padding, waardoor de ene overgang 40 tot 60px ruimer uitviel dan de
   andere terwijl de opmaak gelijk was. */
main > section > *:last-child,
main > section > *:last-child > *:last-child {
  margin-bottom: 0;
}
.section-heading h2,
.direct-title h2,
.family h2,
.adopt-intro h2,
.health-copy h2,
.newsletter h2 {
  text-wrap: balance;
}
/* LET OP: inline-flex maakt van elk kindelement een flex-item, en dan verdwijnt
   de witruimte ertussen. Zet dus geen <strong>, <em> of <span> midden in een
   eyebrow — "von uns <strong>nicht</strong> geführt" rendert als
   "von unsnichtgeführt". Opmaak binnen een eyebrow: niet doen. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(107, 58, 34, 0.07);
  letter-spacing: 0.18em;
}
.eyebrow.light {
  background: rgba(255, 255, 255, 0.08);
}
.problem {
  overflow: hidden;
}
.problem-grid {
  display: flex;
  border: 0;
  gap: 8px;
  min-height: 480px;
}
.accordion-item {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 2.5rem !important;
  border: 0 !important;
  border-radius: 28px;
  background: #ece5d8;
  overflow: hidden;
  cursor: pointer;
  transition:
    flex 0.8s var(--silk),
    background 0.7s var(--silk),
    color 0.7s var(--silk),
    transform 0.7s var(--spring);
}
.accordion-item:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 85% 15%,
    rgba(201, 162, 76, 0.3),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.7s var(--silk);
}
.accordion-item:hover,
.accordion-item:focus-visible,
.accordion-item.active {
  flex: 1.9;
  background: var(--dark);
  color: var(--cream);
  outline: none;
  transform: translateY(-8px);
}
.accordion-item:hover:before,
.accordion-item:focus-visible:before,
.accordion-item.active:before {
  opacity: 1;
}
.accordion-item p {
  max-width: 28rem;
  color: inherit;
  opacity: 0.58;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--spring),
    transform 0.6s var(--spring);
}
.accordion-item:hover p,
.accordion-item:focus-visible p,
.accordion-item.active p {
  opacity: 0.78;
  transform: none;
}
.accordion-item h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.8rem);
}
.accordion-mark {
  position: absolute;
  right: 24px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(74, 93, 58, 0.1);
  transition:
    transform 0.7s var(--spring),
    background 0.5s;
}
.accordion-item:hover .accordion-mark,
.accordion-item:focus-visible .accordion-mark,
.accordion-item.active .accordion-mark {
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.1);
}
.direct {
  position: relative;
  background: radial-gradient(
    circle at 20% 15%,
    #5d7248 0,
    var(--green) 32%,
    #334129 100%
  );
}
.process article {
  transition:
    transform 0.7s var(--spring),
    background 0.7s var(--spring);
}
.process article:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.055);
}
.products {
  position: relative;
}
.product-photo-shell {
  padding: 8px;
  border-radius: 34px;
  background: rgba(74, 93, 58, 0.08);
  box-shadow:
    0 35px 90px rgba(65, 48, 27, 0.13),
    inset 0 1px rgba(255, 255, 255, 0.9);
  margin-bottom: 5rem;
  transform: perspective(1400px) rotateX(0deg);
}
.product-photo {
  border-radius: 26px;
  margin: 0;
  overflow: hidden;
}
.product-photo img {
  transition: transform 1.2s var(--spring);
}
.product-photo-shell:hover img {
  transform: scale(1.035);
}
.product-grid {
  gap: 22px;
  border: 0;
  align-items: start;
}
.product {
  position: relative;
  padding: 3rem !important;
  border: 0 !important;
  border-radius: 30px;
  background: #ede5d7;
  box-shadow:
    0 28px 70px rgba(67, 48, 25, 0.09),
    inset 0 1px rgba(255, 255, 255, 0.75);
  transition:
    transform 0.8s var(--spring),
    box-shadow 0.8s var(--spring);
}
.product:first-child {
  transform: rotate(-1.2deg);
}
.product:last-child {
  transform: translateY(42px) rotate(1.2deg);
}
.product:hover {
  transform: translateY(-10px) rotate(0);
  box-shadow:
    0 40px 90px rgba(67, 48, 25, 0.15),
    inset 0 1px rgba(255, 255, 255, 0.8);
}
.reserve {
  position: relative;
  margin-top: 8rem;
  border-radius: 34px;
  overflow: hidden;
  background: radial-gradient(
    circle at 90% 20%,
    #91502f,
    var(--terra) 48%,
    #4d2818
  );
  box-shadow: 0 40px 100px rgba(74, 37, 21, 0.2);
}
.reserve:before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(201, 162, 76, 0.24);
  border-radius: 50%;
  right: -100px;
  top: -160px;
}
.reserve > * {
  position: relative;
  z-index: 1;
}
.family {
  padding: 8px;
  background: #e9e1d3;
  gap: 0;
}
.family-photo {
  margin: 22px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 35px 90px rgba(43, 37, 28, 0.18);
}
.family-photo img {
  transform: scale(1.08);
  will-change: transform;
}
.scrub-copy .word {
  opacity: 0.2;
  display: inline;
}
.adoption {
  background: radial-gradient(
    circle at 15% 10%,
    #34442a,
    var(--dark) 48%,
    #11180e
  );
}
.adopt-details article {
  transition:
    transform 0.7s var(--spring),
    background 0.7s var(--spring);
}
.adopt-details article:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.045);
}
.health {
  overflow: hidden;
}
.health-big span {
  filter: drop-shadow(0 25px 25px rgba(74, 93, 58, 0.12));
}
.recipe-grid article {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.7s var(--spring),
    background 0.7s var(--spring),
    padding 0.7s var(--spring);
}
.recipe-grid article:after {
  content: "↗";
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(74, 93, 58, 0.08);
  transform: translateY(80px) rotate(20deg);
  transition: transform 0.7s var(--spring);
}
.recipe-grid article:hover {
  background: #ece4d6;
  padding-left: 2rem;
}
.recipe-grid article:hover:after {
  transform: none;
}
.tasting {
  background: #1d2719;
  color: var(--cream);
  min-height: 780px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.tasting:before {
  content: "";
  position: absolute;
  width: min(70vw, 850px);
  aspect-ratio: 1;
  border: 1px solid rgba(201, 162, 76, 0.16);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 100px rgba(201, 162, 76, 0.025),
    0 0 0 220px rgba(201, 162, 76, 0.018);
}
.tasting-stage {
  position: relative;
  z-index: 1;
  width: min(1050px, 100%);
  text-align: center;
}
.tasting-slides {
  position: relative;
  min-height: 290px;
}
.tasting-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  opacity: 0;
  transform: translateY(35px) scale(0.97);
  pointer-events: none;
  transition:
    opacity 0.9s var(--silk),
    transform 0.9s var(--silk);
}
.tasting-slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.tasting-slide p {
  max-width: 950px;
  margin: 0 auto 2rem;
  font: italic 500 clamp(2.6rem, 5vw, 5.5rem)/0.95 var(--serif);
  text-wrap: balance;
}
.tasting-slide span {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.tasting-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.tasting-controls button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 228, 0.25);
  background: transparent;
  color: var(--cream);
  transition:
    transform 0.6s var(--spring),
    background 0.5s;
}
.tasting-controls button:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.08);
}
.tasting-controls span {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}
.tasting-controls b {
  color: var(--gold);
}
.newsletter {
  background: radial-gradient(
    circle at 70% 10%,
    #61774a,
    var(--green) 45%,
    #34402a
  );
}
.newsletter input:focus-visible {
  outline: none;
}
.newsletter form:focus-within div {
  border-color: var(--gold);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.cart {
  border-radius: 32px 0 0 32px;
  box-shadow: -30px 0 100px rgba(8, 12, 6, 0.3);
}

@media (max-width: 960px) {
  .site-header {
    top: 12px;
    width: calc(100% - 24px);
    height: 64px;
    padding: 0 12px 0 16px;
  }
  .nav {
    inset: 0;
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 110px 2rem 3rem;
    background: rgba(18, 25, 15, 0.94);
    backdrop-filter: blur(26px);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transition:
      opacity 0.6s var(--silk),
      transform 0.6s var(--silk),
      visibility 0.6s;
  }
  .nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav a {
    font: 500 clamp(2.6rem, 10vw, 5rem)/1.15 var(--serif);
    text-transform: none;
    letter-spacing: -0.03em;
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s var(--spring),
      transform 0.6s var(--spring);
  }
  .nav.open a {
    opacity: 1;
    transform: none;
  }
  .nav.open a:nth-child(2) {
    transition-delay: 0.06s;
  }
  .nav.open a:nth-child(3) {
    transition-delay: 0.12s;
  }
  .nav.open a:nth-child(4) {
    transition-delay: 0.18s;
  }
  .nav.open a:nth-child(5) {
    transition-delay: 0.24s;
  }
  .menu-button {
    position: relative;
    z-index: 56;
    height: 44px;
  }
  .menu-button span {
    position: absolute;
    left: 10px;
    width: 24px;
    margin: 0;
    transition: transform 0.7s var(--spring);
  }
  .menu-button span:first-child {
    transform: translateY(-4px);
  }
  .menu-button span:last-child {
    transform: translateY(4px);
  }
  .menu-button[aria-expanded="true"] span:first-child {
    transform: rotate(45deg);
  }
  .menu-button[aria-expanded="true"] span:last-child {
    transform: rotate(-45deg);
  }
  .hero h1 {
    font-size: clamp(4rem, 13vw, 6.7rem);
  }
  .problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }
  .accordion-item:hover,
  .accordion-item:focus-visible,
  .accordion-item.active {
    transform: none;
  }
  .product:last-child {
    transform: none;
  }
  .family-photo {
    margin: 8px;
  }
  .tasting {
    min-height: 680px;
  }
}
@media (max-width: 600px) {
  .site-header .brand svg {
    display: none;
  }
  .site-header .brand {
    font-size: 0.92rem;
  }
  .site-header .cart-button {
    font-size: 0;
  }
  .site-header .cart-count {
    font-size: 0.72rem;
  }
  .hero {
    padding-inline: 1.2rem;
  }
  .hero h1 {
    font-size: clamp(3.8rem, 16vw, 5.3rem);
    line-height: 0.82;
  }
  .hero-copy {
    font-size: 0.94rem;
  }
  .hero .actions {
    width: 100%;
  }
  .marquee-track {
    animation-duration: 18s;
  }
  .section {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .eyebrow {
    font-size: 0.58rem;
  }
  .problem-grid {
    grid-template-columns: 1fr;
  }
  .accordion-item {
    min-height: 270px;
    padding: 1.8rem !important;
  }
  .accordion-item p {
    transform: none;
  }
  .product-photo-shell {
    margin-inline: -0.6rem;
    padding: 5px;
    border-radius: 22px;
  }
  .product-photo {
    border-radius: 17px;
  }
  .product {
    padding: 2rem !important;
  }
  .product:first-child,
  .product:last-child {
    transform: none;
  }
  .reserve {
    margin-top: 3rem;
    border-radius: 24px;
  }
  .tasting {
    min-height: 720px;
  }
  .tasting-slide p {
    font-size: 2.7rem;
  }
  .tasting-slides {
    min-height: 350px;
  }
  .tasting:before {
    width: 115vw;
  }
  .cart {
    border-radius: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero:before {
    transform: scale(1.08);
  }
  .marquee-track {
    transform: none;
  }
  .family-photo img {
    transform: none;
  }
  .scrub-copy .word {
    opacity: 1;
  }
}

/* Alignment pass: one gutter, one rhythm, no colliding components */
:root {
  --page-gutter: clamp(24px, 6vw, 96px);
  --content-max: 1440px;
  --grid-gap: clamp(24px, 3vw, 48px);
}
.section {
  padding-inline: max(
    var(--page-gutter),
    calc((100vw - var(--content-max)) / 2)
  );
}
.section-heading,
.origin-heading {
  gap: var(--grid-gap);
}
.problem-grid {
  gap: 12px;
}
.accordion-item {
  padding: clamp(28px, 3vw, 48px) !important;
}
.direct {
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  column-gap: clamp(64px, 8vw, 140px);
}
.direct-title {
  position: sticky;
  top: 150px;
}
.process {
  width: 100%;
  align-self: start;
}
.process article {
  min-height: 210px;
  padding: clamp(28px, 3vw, 44px);
}
.origin-gallery {
  background: #e9e1d3;
}
.origin-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.origin-heading h2 {
  font-size: clamp(3.8rem, 6.6vw, 7rem);
  margin: 0;
  letter-spacing: -0.05em;
}
.origin-heading > p {
  max-width: 580px;
  margin: 0 0 0.7rem;
  color: #5f5a52;
}
.origin-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 460px 370px;
  gap: clamp(16px, 2vw, 30px);
  grid-auto-flow: dense;
}
.origin-card {
  position: relative;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.origin-bottle {
  grid-column: span 4;
  grid-row: span 2;
}
/* De kaartbreedtes volgen de stand van de foto, niet andersom. "Op het land"
   is een liggende opname (1000 bij 660) en stond in de smalle staande cel,
   waardoor er de helft afging. "De boomgaard" is juist staand (1200 bij 1600)
   en stond in de brede cel. Door de kolomspans om te wisselen past elke foto
   vrijwel precies in zijn cel: de bijschriften blijven bij hun eigen beeld. */
.origin-people {
  grid-column: span 5;
}
.origin-grove {
  grid-column: span 3;
}
.origin-press {
  grid-column: span 5;
}
.origin-shop {
  grid-column: span 3;
}
.origin-image {
  flex: 1;
  min-height: 0;
  padding: 7px;
  border-radius: 28px;
  background: rgba(74, 93, 58, 0.08);
  box-shadow:
    0 24px 70px rgba(57, 45, 30, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.85);
  overflow: hidden;
}
.origin-image img {
  border-radius: 21px;
  transition:
    transform 1.1s var(--spring),
    filter 1.1s var(--spring);
}
.origin-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.02);
}
.origin-card figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
}
.origin-card figcaption > span {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  font: 500 0.7rem var(--sans);
}
.origin-card figcaption div {
  display: grid;
}
.origin-card figcaption b {
  font: 500 1.3rem/1 var(--serif);
}
.origin-card figcaption small {
  margin-top: 6px;
  /* #6d675e haalde 4.31:1 op de zandkaart, net onder de eis */
  color: #5c5750;
  font-size: 0.68rem;
}
.products .section-heading {
  margin-bottom: clamp(56px, 7vw, 96px);
}
.product-photo-shell {
  margin-bottom: clamp(56px, 7vw, 96px);
}
.product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
  margin-bottom: 0;
}
.product {
  height: 100%;
  padding: clamp(32px, 4vw, 56px) !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
}
.product:hover {
  transform: translateY(-8px) !important;
}
.product .buy {
  margin-top: auto;
  padding-top: 32px;
  gap: 24px;
}
.buy .add {
  flex: 0 0 auto;
}
.reserve {
  margin-top: clamp(64px, 8vw, 112px);
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr) minmax(
      190px,
      0.45fr
    );
  align-items: center;
  gap: var(--grid-gap);
  padding: clamp(36px, 5vw, 72px);
}
.reserve h3 {
  font-size: clamp(2.8rem, 4.2vw, 4.7rem);
  text-wrap: balance;
}
.reserve ul {
  margin: 0;
}
.reserve-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.reserve-buy .button {
  min-width: 100%;
}
.family {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: clamp(8px, 1.5vw, 22px);
}
.family-photo {
  min-width: 0;
  margin: 0;
  border-radius: 28px;
}
.family-copy {
  width: 100%;
  align-self: center;
  padding: clamp(64px, 8vw, 128px);
}
.family blockquote {
  max-width: 620px;
}
.adoption {
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  column-gap: clamp(64px, 8vw, 140px);
}
.adopt-intro {
  position: sticky;
  top: 150px;
}
.adopt-details {
  gap: 0;
}
.adopt-details article {
  min-height: 210px;
  padding: clamp(28px, 3vw, 44px);
}
.adopt-details .button {
  margin-top: 32px;
}
.health {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(64px, 8vw, 140px);
}
.health-big {
  min-width: 0;
  justify-content: center;
}
.health-copy {
  max-width: 680px;
}
.recipe-grid {
  gap: 0;
}
.recipe-grid article {
  padding: clamp(32px, 4vw, 64px) !important;
  min-width: 0;
}
.recipe-grid article:first-child {
  padding-left: 0 !important;
}
.newsletter {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  column-gap: clamp(64px, 8vw, 140px);
}
.newsletter form {
  width: 100%;
  max-width: 620px;
  justify-self: end;
}

@media (max-width: 1100px) {
  .origin-grid {
    grid-template-rows: 380px 320px;
  }
  .reserve {
    grid-template-columns: 1fr 1fr;
  }
  .reserve-buy {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 24px;
  }
  .reserve-buy .button {
    grid-column: 2;
    grid-row: 1/3;
  }
  .direct,
  .adoption,
  .health {
    column-gap: 56px;
  }
}
@media (max-width: 960px) {
  .direct-title,
  .adopt-intro {
    position: static;
  }
  .direct,
  .adoption,
  .health {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }
  .process article,
  .adopt-details article {
    min-height: 0;
  }
  .origin-heading {
    grid-template-columns: 1fr;
  }
  .origin-heading > p {
    margin-top: 24px;
  }
  /* Twee kolommen met rijen van 440px dwong elke foto in hetzelfde staande
     kader. De rijhoogte volgt nu de inhoud, zodat een liggende opname ook
     liggend mag blijven. */
  .origin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    align-items: start;
  }
  .origin-image {
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .origin-people .origin-image,
  .origin-press .origin-image {
    aspect-ratio: 3 / 2;
  }
  .origin-shop .origin-image {
    aspect-ratio: 4 / 3;
  }
  .origin-bottle,
  .origin-people,
  .origin-grove,
  .origin-press,
  .origin-shop {
    grid-column: span 1;
    grid-row: span 1;
  }
  .origin-bottle {
    grid-row: span 2;
  }
  .origin-shop {
    grid-column: 2;
  }
  .family-copy {
    padding: 72px var(--page-gutter);
  }
}
@media (max-width: 700px) {
  :root {
    --page-gutter: 20px;
    --grid-gap: 20px;
  }
  .section {
    padding-inline: var(--page-gutter);
  }
  .problem-grid {
    gap: 12px;
  }
  .product-grid {
    grid-template-columns: 1fr;
  }
  .product .buy {
    align-items: center;
  }
  .reserve {
    grid-template-columns: 1fr;
    margin-inline: 0;
  }
  .reserve-buy {
    grid-column: auto;
    display: flex;
  }
  .reserve-buy .button {
    grid-column: auto;
    grid-row: auto;
  }
  .origin-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 36px;
  }
  .origin-bottle,
  .origin-people,
  .origin-grove,
  .origin-press,
  .origin-shop {
    grid-column: 1;
    grid-row: auto;
  }
  /* In één kolom is er breedte genoeg, dus hoeft de hoogte niet vast te staan.
     Elke kaart krijgt de verhouding van zijn eigen foto, waardoor er niets
     meer wordt weggesneden. */
  .origin-image {
    height: auto;
    flex: none;
    aspect-ratio: 3 / 4;
  }
  .origin-people .origin-image,
  .origin-press .origin-image {
    aspect-ratio: 3 / 2;
  }
  .origin-shop .origin-image {
    aspect-ratio: 4 / 3;
  }
  .origin-card figcaption {
    padding-inline: 4px;
  }
  .family {
    grid-template-columns: 1fr;
    padding: 8px;
  }
  .family-photo {
    height: 68svh;
    min-height: 480px;
  }
  .family-copy {
    padding: 72px 20px;
  }
  .adopt-details {
    grid-template-columns: 1fr;
  }
  .health-big {
    justify-content: flex-start;
  }
  .recipe-grid article,
  .recipe-grid article:first-child {
    padding: 40px 0 !important;
  }
  .newsletter {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .newsletter form {
    justify-self: stretch;
  }
}

/* Product choice component */
.product-grid {
  gap: clamp(20px, 2.5vw, 38px);
}
.product {
  isolation: isolate;
  min-height: 640px;
  overflow: hidden;
  padding: clamp(32px, 4vw, 58px) !important;
  background: #eee7da;
}
.product:before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -110px;
  top: -120px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 162, 76, 0.19),
    rgba(201, 162, 76, 0) 68%
  );
  transition: transform 1s var(--spring);
}
.product:hover:before {
  transform: scale(1.18) translate(-10px, 12px);
}
.product-bold {
  background: #e6dfd1;
}
.product-bold:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(145deg, transparent 58%, rgba(74, 93, 58, 0.055));
}
.product-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.product-card-head .product-no {
  margin: 0;
}
.intensity {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.intensity span {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 10px;
  background: rgba(74, 93, 58, 0.16);
}
.intensity span.filled {
  background: var(--green);
}
.product h3 {
  max-width: 100%;
  font-size: clamp(3.25rem, 5vw, 5.5rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.product .taste {
  max-width: 520px;
  min-height: 56px;
  margin-bottom: 30px;
  font-size: clamp(0.98rem, 1.3vw, 1.15rem);
  line-height: 1.55;
}
.flavour-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.flavour-notes span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(74, 93, 58, 0.075);
  color: var(--green);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.product-bold .flavour-notes span {
  background: rgba(107, 58, 34, 0.075);
  color: var(--terra);
}
.product-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(31, 31, 31, 0.14);
  margin-bottom: 0;
}
.product-facts > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 16px 20px 0;
}
.product-facts > div + div {
  padding-left: 20px;
  border-left: 1px solid rgba(31, 31, 31, 0.11);
}
.product-facts small,
.pairing > span {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #766f64;
}
.product-facts strong {
  font: 500 0.87rem/1.3 var(--sans);
}
.pairing {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
}
.pairing p {
  margin: 0;
  font-size: 0.8rem;
  color: #5e5a52;
}
.product .buy {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid rgba(31, 31, 31, 0.14);
}
.product .buy > span:first-child {
  display: grid;
}
.product .buy strong {
  font-size: clamp(2.6rem, 3.5vw, 3.8rem);
  line-height: 0.8;
}
.product .buy small {
  margin-top: 12px;
}
.product .buy .add {
  min-width: 178px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-left: 22px;
  background: var(--green);
  box-shadow: 0 14px 35px rgba(38, 51, 31, 0.16);
}
.product .buy .add > span:first-child {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.product .buy .button-icon {
  flex-basis: 42px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.1);
}
.product-bold .buy .add {
  background: var(--terra);
  box-shadow: 0 14px 35px rgba(107, 58, 34, 0.16);
}

@media (max-width: 1100px) and (min-width: 701px) {
  .product {
    min-height: 680px;
  }
  .product h3 {
    font-size: clamp(3rem, 5.5vw, 4.6rem);
  }
  .product-facts {
    grid-template-columns: 1fr;
  }
  .product-facts > div {
    padding: 12px 0 !important;
    border-left: 0 !important;
  }
  .product-facts > div + div {
    border-top: 1px solid rgba(31, 31, 31, 0.1);
  }
  .pairing {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .product .buy {
    align-items: flex-end;
    gap: 16px;
  }
  .product .buy .add {
    min-width: 150px;
  }
}
@media (max-width: 700px) {
  .product {
    min-height: 0;
    padding: 32px 24px !important;
    border-radius: 24px;
  }
  .product-card-head {
    margin-bottom: 34px;
  }
  .intensity span {
    width: 18px;
  }
  .product h3 {
    font-size: clamp(3.4rem, 15vw, 4.8rem);
  }
  .product .taste {
    min-height: 0;
  }
  .flavour-notes {
    margin-bottom: 30px;
  }
  .product-facts > div {
    padding-inline: 10px;
  }
  .product-facts > div:first-child {
    padding-left: 0;
  }
  .product-facts strong {
    font-size: 0.72rem;
  }
  .pairing {
    grid-template-columns: 64px 1fr;
  }
  .product .buy {
    gap: 18px;
  }
  .product .buy .add {
    min-width: 154px;
  }
  .product .buy strong {
    font-size: 2.8rem;
  }
}
@media (max-width: 390px) {
  .product-facts {
    grid-template-columns: 1fr;
  }
  .product-facts > div {
    padding: 12px 0 !important;
    border-left: 0 !important;
  }
  .product-facts > div + div {
    border-top: 1px solid rgba(31, 31, 31, 0.1);
  }
  .pairing {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .product .buy {
    align-items: stretch;
    flex-direction: column;
  }
  .product .buy .add {
    width: 100%;
  }
}

/* Visual tree adoption experience */
.adoption {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  align-items: start;
  gap: clamp(48px, 7vw, 120px);
}
.adopt-intro {
  position: static;
  min-width: 0;
}
.adopt-intro > p:not(.eyebrow) {
  color: rgba(244, 239, 228, 0.7);
}
.adopt-price {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.adopt-visual {
  position: relative;
  margin: 0;
  padding: 7px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow:
    0 36px 90px rgba(4, 8, 3, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.12);
}
.adopt-visual > img {
  height: clamp(520px, 52vw, 760px);
  border-radius: 25px;
  object-position: center 42%;
  filter: saturate(0.86) contrast(1.04);
  transition:
    transform 1.1s var(--spring),
    filter 1.1s var(--spring);
}
.adopt-visual {
  overflow: hidden;
}
.adopt-visual:hover > img {
  transform: scale(1.025);
  filter: saturate(1) contrast(1.02);
}
.adopt-visual:after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 25px;
  background: linear-gradient(180deg, transparent 45%, rgba(12, 19, 10, 0.75));
  pointer-events: none;
}
.adopt-visual figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 4vw, 56px);
  bottom: clamp(28px, 4vw, 52px);
  display: grid;
  color: var(--cream);
}
.adopt-visual figcaption span {
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.adopt-visual figcaption strong {
  font: 500 clamp(2rem, 3vw, 3.2rem)/0.95 var(--serif);
}
.adopt-visual figcaption small {
  margin-top: 9px;
  color: rgba(244, 239, 228, 0.65);
  font-size: 0.68rem;
}
.adopt-certificate {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 3vw, 42px);
  top: clamp(20px, 3vw, 42px);
  width: clamp(145px, 15vw, 205px);
  aspect-ratio: 0.78;
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--dark);
  background: rgba(244, 239, 228, 0.93);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(7, 11, 5, 0.28);
  transform: rotate(2.5deg);
  transition: transform 0.8s var(--spring);
}
.adopt-visual:hover .adopt-certificate {
  transform: rotate(0) translateY(-5px);
}
.adopt-certificate:after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(74, 93, 58, 0.28);
}
.adopt-certificate svg {
  width: 34px;
  margin-bottom: 12px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.4;
}
.adopt-certificate small {
  font-size: 0.48rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.adopt-certificate b {
  margin: 14px 0 7px;
  font: italic 500 clamp(1.2rem, 1.7vw, 1.7rem) var(--serif);
  border-bottom: 1px solid rgba(31, 31, 31, 0.22);
}
.adopt-certificate i {
  font: 500 0.48rem var(--sans);
  font-style: normal;
  color: #6a675f;
}
.adopt-details {
  display: block;
  padding-top: clamp(148px, 15vw, 220px);
}
.adopt-details-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(244, 239, 228, 0.24);
}
.adopt-details-heading span {
  font: 500 clamp(2.6rem, 4vw, 4.6rem)/0.9 var(--serif);
}
.adopt-details-heading p {
  max-width: 180px;
  margin: 0;
  color: rgba(244, 239, 228, 0.55);
  font-size: 0.75rem;
}
.adopt-details article {
  position: relative;
  min-height: 0 !important;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 42px;
  align-items: start;
  gap: 20px;
  padding: clamp(26px, 3vw, 38px) 0 !important;
  border-top: 0;
  border-bottom: 1px solid rgba(244, 239, 228, 0.18);
  transition:
    padding 0.7s var(--spring),
    background 0.7s var(--spring),
    transform 0.7s var(--spring);
}
.adopt-details article:hover {
  padding-inline: 18px !important;
  transform: none;
  background: rgba(255, 255, 255, 0.035);
}
.adopt-details article > b {
  font-size: 2rem;
}
.adopt-details article h3 {
  margin: 0 0 8px;
}
.adopt-details article p {
  max-width: 440px;
  margin: 0;
}
.adopt-symbol {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 162, 76, 0.1);
  color: var(--gold);
  font: 500 1.2rem var(--serif);
  transition: transform 0.7s var(--spring);
}
.adopt-details article:hover .adopt-symbol {
  transform: rotate(12deg) scale(1.08);
}
.adopt-assurance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
}
.adopt-assurance span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #86a666;
  box-shadow: 0 0 0 5px rgba(134, 166, 102, 0.1);
}
.adopt-assurance p {
  margin: 0;
  color: rgba(244, 239, 228, 0.62);
  font-size: 0.68rem;
}
.adopt-details .button {
  margin-top: 24px;
}

@media (max-width: 1100px) {
  .adoption {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .adopt-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }
  .adopt-intro > .eyebrow,
  .adopt-intro > h2,
  .adopt-intro > p,
  .adopt-intro > .adopt-price {
    grid-column: 1;
  }
  .adopt-visual {
    grid-column: 2;
    grid-row: 1/6;
  }
  .adopt-visual > img {
    height: 680px;
  }
  .adopt-details {
    padding-top: 0;
  }
}
@media (max-width: 700px) {
  .adoption {
    gap: 56px;
  }
  .adopt-intro {
    display: block;
  }
  .adopt-visual {
    margin-top: 36px;
  }
  .adopt-visual > img {
    height: 620px;
  }
  .adopt-certificate {
    width: 145px;
    padding: 18px;
  }
  .adopt-details-heading {
    align-items: start;
    flex-direction: column;
  }
  .adopt-details-heading p {
    max-width: 260px;
  }
  .adopt-details article {
    grid-template-columns: 36px minmax(0, 1fr) 40px;
    gap: 12px;
  }
  .adopt-details article:hover {
    padding-inline: 0 !important;
  }
  .adopt-details .button {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .adopt-visual > img {
    height: 520px;
  }
  .adopt-certificate {
    width: 128px;
    top: 18px;
    right: 18px;
  }
  .adopt-certificate svg {
    width: 28px;
  }
  .adopt-visual figcaption {
    left: 26px;
    bottom: 28px;
  }
  .adopt-details article {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .adopt-symbol {
    display: none;
  }
}

/* Final refinement: single-line island navigation and consistent finishing */
.site-header {
  width: min(1360px, calc(100% - 40px));
  height: 68px;
  padding-inline: 22px;
  column-gap: 20px;
}
.brand {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 1.12rem;
  letter-spacing: 0.14em;
}
.brand span {
  display: block;
  white-space: nowrap;
}
.brand small {
  display: none;
}
.nav {
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.25vw, 34px);
  margin-left: auto;
  margin-right: clamp(8px, 1.5vw, 22px);
  white-space: nowrap;
}
.nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.69rem;
  letter-spacing: 0.115em;
  transition:
    color 0.55s var(--spring),
    opacity 0.55s var(--spring);
}
.nav a.active {
  color: var(--gold);
}
.nav a.active:after {
  transform: scaleX(1);
}
.cart-button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.site-header:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.24),
    rgba(201, 162, 76, 0.22),
    rgba(255, 255, 255, 0.04)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.site-header.scrolled {
  transform: translateX(-50%) translateY(-5px);
}
.section-heading,
.origin-heading,
.direct,
.products,
.family,
.adoption,
.health,
.recipes,
.newsletter {
  scroll-margin-top: 110px;
}
.button,
.buy .add,
.checkout,
.newsletter form button {
  -webkit-tap-highlight-color: transparent;
}
.button:focus-visible,
.buy .add:focus-visible {
  box-shadow: 0 0 0 4px rgba(201, 162, 76, 0.22);
}
.origin-image,
.product-photo,
.family-photo,
.adopt-visual {
  transform: translateZ(0);
}
.product,
.reserve,
.accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.product {
  box-shadow:
    0 24px 70px rgba(67, 48, 25, 0.075),
    inset 0 1px rgba(255, 255, 255, 0.82);
}
.reserve {
  box-shadow:
    0 38px 100px rgba(74, 37, 21, 0.17),
    inset 0 1px rgba(255, 255, 255, 0.08);
}
footer {
  position: relative;
  padding-top: clamp(72px, 8vw, 120px);
}
footer:before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--page-gutter);
  right: var(--page-gutter);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 162, 76, 0.48),
    transparent
  );
}
footer a {
  width: max-content;
  transition:
    color 0.5s var(--spring),
    opacity 0.5s var(--spring),
    transform 0.5s var(--spring);
}
footer a:hover {
  color: var(--gold);
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 1180px) {
  .site-header {
    top: 12px;
    width: calc(100% - 24px);
    height: 64px;
    padding: 0 12px 0 18px;
  }
  .site-header.scrolled {
    transform: translateX(-50%) translateY(0);
  }
  .cart-button {
    margin-left: auto;
  }
  .menu-button {
    display: block;
    position: relative;
    z-index: 56;
    width: 44px;
    height: 44px;
  }
  .menu-button span {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 1px;
    margin: 0;
    background: var(--cream);
    transition: transform 0.7s var(--spring);
  }
  .menu-button span:first-child {
    transform: translateY(-4px);
  }
  .menu-button span:last-child {
    transform: translateY(4px);
  }
  .menu-button[aria-expanded="true"] span:first-child {
    transform: rotate(45deg);
  }
  .menu-button[aria-expanded="true"] span:last-child {
    transform: rotate(-45deg);
  }
  .nav {
    position: fixed;
    z-index: 55;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 110px clamp(28px, 9vw, 110px) 50px;
    background: rgba(18, 25, 15, 0.95);
    backdrop-filter: blur(26px);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transition:
      opacity 0.6s var(--silk),
      transform 0.6s var(--silk),
      visibility 0.6s;
  }
  .nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav a {
    font: 500 clamp(2.8rem, 8vw, 5.8rem)/1.06 var(--serif);
    text-transform: none;
    letter-spacing: -0.035em;
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s var(--spring),
      transform 0.6s var(--spring),
      color 0.5s var(--spring);
  }
  .nav a:after {
    display: none;
  }
  .nav.open a {
    opacity: 1;
    transform: none;
  }
  /* Getrapt binnenkomen, per menu-item. Dit stond eerst op `a:nth-child(n)`,
     maar twee van de zes items zijn een <div class="nav-groep"> en geen <a>,
     dus telde nth-child ze mee terwijl de selector ze niet raakte: item 5 kreeg
     nooit een vertraging en item 6 al helemaal niet. Nu op de directe kinderen,
     ongeacht of dat een link of een groep is. */
  .nav.open > *:nth-child(1) a {
    transition-delay: 0s;
  }
  .nav.open > *:nth-child(2) a {
    transition-delay: 0.06s;
  }
  .nav.open > *:nth-child(3) a {
    transition-delay: 0.12s;
  }
  .nav.open > *:nth-child(4) a {
    transition-delay: 0.18s;
  }
  .nav.open > *:nth-child(5) a {
    transition-delay: 0.24s;
  }
  .nav.open > *:nth-child(6) a {
    transition-delay: 0.3s;
  }
}
@media (max-width: 520px) {
  .site-header {
    padding-left: 14px;
  }
  .brand {
    font-size: 0.91rem;
    letter-spacing: 0.1em;
  }
  .brand svg {
    display: none;
  }
  .cart-button {
    font-size: 0;
    padding-left: 0;
  }
  .cart-count {
    font-size: 0.7rem;
  }
}

/* ------------------------------------------------------- menu met submenu */
/* Twee menu-items hebben onderliggende pagina's. Opengaan gebeurt met :hover en
   :focus-within en dus zonder JavaScript: het werkt daarmee ook met het
   toetsenbord en het blijft werken als een script faalt. */

.nav-groep {
  position: relative;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 1181px) {
  .nav-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 60;
    display: grid;
    min-width: 17rem;
    padding: 0.65rem 0;
    transform: translateX(-50%) translateY(6px);
    border: 1px solid var(--line, rgba(31, 31, 31, 0.12));
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(31, 31, 31, 0.12);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s;
  }
  .nav-groep:hover .nav-sub,
  .nav-groep:focus-within .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  /* Onzichtbare brug tussen het menu-item en het uitklapblok, zodat de muis er
     niet doorheen valt in de tussenruimte. */
  .nav-groep::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
  }
  .nav-sub a {
    padding: 0.5rem 1.1rem;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    white-space: nowrap;
  }
  .nav-sub a:hover {
    background: rgba(201, 162, 76, 0.1);
  }
}

@media (max-width: 1180px) {
  /* In het schermvullende menu staat alles gewoon onder elkaar. De hoofdlink
     houdt zijn formaat, de onderliggende pagina's worden kleiner zodat de
     hiërarchie zichtbaar blijft zonder inspringing. */
  .nav-groep {
    display: block;
  }
  .nav-sub {
    display: grid;
    gap: 0.1rem;
    margin: 0.4rem 0 0.9rem;
  }
  .nav.open .nav-groep a {
    opacity: 1;
    transform: none;
  }
  /* Moet specifieker zijn dan de regel hierboven, anders wint opacity: 1 en
     valt het verschil tussen hoofdlink en onderliggende pagina's weg. */
  .nav.open .nav-groep .nav-sub a,
  .nav-sub a {
    font: 400 clamp(0.95rem, 3.6vw, 1.25rem)/1.5 var(--sans, inherit);
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.72;
  }
}

/* ------------------------------------------------------------ toestemming
 *
 * De cookiebalk. Onderaan, niet als scherm eroverheen.
 *
 * WAAROM GEEN OVERLAY. Vrijwel iedereen komt hier binnen op een artikel uit een
 * zoekresultaat. Een balk die de tekst afdekt voordat je hem gelezen hebt, jaagt
 * die bezoeker terug naar Google, en dat is precies het signaal waarop Google
 * de pagina lager gaat zetten. Meten mag de meting niet bederven.
 *
 * WAAROM DE TWEE KNOPPEN ER HETZELFDE UITZIEN. Weigeren als grijze link naast
 * accepteren als gouden knop levert geen geldige toestemming op: de Autoriteit
 * Persoonsgegevens en de Duitse toezichthouders eisen gelijke prominentie. Dan
 * heb je de cookies wél geplaatst en de rechtsgrond niet. Dezelfde maat,
 * dezelfde omranding, dezelfde afstand — het enige verschil is de volgorde, en
 * weigeren staat links omdat je daar het eerst leest.
 */
.toestemming {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  background: var(--dark);
  color: var(--cream);
  border-top: 1px solid rgba(201, 162, 76, 0.4);
  padding: 1.1rem 1.4rem calc(1.1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
}
.toestemming[hidden] {
  display: none;
}
.toestemming-binnen {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.toestemming-tekst {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  opacity: 0.9;
}
.toestemming-tekst a {
  color: var(--gold);
  text-underline-offset: 3px;
}
.toestemming-knoppen {
  display: flex;
  gap: 0.7rem;
  flex-shrink: 0;
}
.toestemming-knoppen button {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.85rem 1.5rem;
  min-width: 9.5rem;
  cursor: pointer;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(244, 239, 228, 0.55);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.toestemming-knoppen button:hover {
  background: rgba(244, 239, 228, 0.12);
  border-color: var(--cream);
}
.toestemming-knoppen button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .toestemming-binnen {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .toestemming-knoppen button {
    flex: 1;
    min-width: 0;
  }
}

/* De landkeuze onder de verzendbalk in de winkelmand.
 *
 * Klein en rustig: het is een correctie, geen aanbieding. Wie in Nederland zit
 * hoeft er niet naar te kijken; wie in België of Duitsland zit moet hem kunnen
 * vinden zonder te zoeken, want anders leest hij een drempel die niet voor hem
 * geldt. Zie de toelichting bij cartDrawer() in src/layout.mjs. */
.cart-land {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.cart-land select {
  font-family: var(--sans);
  font-size: 0.74rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 2px;
  max-width: 60%;
}
.cart-land select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}