/* ============================================================
   Belevingsstijl (site-breed) — bouwstenen in inc/xp.php
   Vlakke kleurvlakken met rechte hoeken, grote koppen met een
   cursieve serif als accent, scroll-momenten uit xp.js.
   De bestelpagina en checkout gebruiken alleen header en footer.
   ============================================================ */

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
}

:root {
  --xp-creme: #fbf7ee;
  --xp-creme-2: #f3ecdf;
  --xp-limoen: #eef4c4;
  --xp-lucht: #e2eef0;
  --xp-groen: #80ba00;
  --xp-diep: #213a17;
  --xp-accent-licht: #c9e37a;   /* lime op donker, voor serif-accenten */
  --xp-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --xp-rand: clamp(20px, 4.5vw, 72px);
  --xp-breed: 1400px;
}

.xp { background: var(--xp-creme); overflow-x: clip; }
/* Eigen display-waarden (flex/grid) mogen het hidden-attribuut niet overrulen */
.xp [hidden] { display: none !important; }
.xp h1, .xp h2, .xp h3 { color: var(--ink); margin: 0; }
.xp h1 em, .xp h2 em, .site-foot h2 em {
  font-family: var(--xp-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em;
}
.xp-eyebrow {
  margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
}
.xp-intro a {
  white-space: nowrap; color: var(--ink); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--xp-groen);
}
.xp-intro a:hover { color: var(--product); }
.xp-intro { margin: 18px 0 0; max-width: 52ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--text); }
.xp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.xp-link {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.xp-link:hover { text-decoration-color: var(--xp-groen); }

.btn-licht {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 13px 26px; border-radius: var(--pill); background: var(--xp-creme); color: var(--xp-diep);
  font-family: var(--font-display); font-weight: 800; font-size: 16px; text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn-licht:hover { background: #fff; transform: translateY(-1px); }

/* Sectiekop: titel links, link rechts */
.xp-kop {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px;
  max-width: var(--xp-breed); margin: 0 auto clamp(36px, 5vw, 64px);
}
.xp-kop h2 { font-size: clamp(34px, 4.4vw, 68px); text-wrap: balance; line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; }

/* Generieke sectie */
.xp-sectie { padding: clamp(64px, 8vw, 112px) var(--xp-rand); }
.xp-sectie-creme { background: var(--xp-creme); }
.xp-sectie-creme2 { background: var(--xp-creme-2); }
.xp-sectie-limoen { background: var(--xp-limoen); }
.xp-sectie-lucht { background: var(--xp-lucht); }
.xp-binnen { max-width: var(--xp-breed); margin: 0 auto; }
.xp-smal { max-width: 860px; margin: 0 auto; }

/* ---------- Hero ---------- */
.xp-hero { padding: clamp(40px, 7vw, 96px) 0 0; }
.xp-hero-kaal { padding-bottom: clamp(56px, 7vw, 96px); }
.xp-hero-kop { padding: 0 var(--xp-rand); max-width: 1500px; margin: 0 auto; }
.xp-hero h1 {
  font-size: clamp(44px, 6.4vw, 104px); line-height: 0.94; font-weight: 800; text-wrap: balance;
  letter-spacing: -0.04em; max-width: 18ch;
}
.xp-hero-klein h1 { font-size: clamp(40px, 5.4vw, 88px); }
.xp-hero h1 em { color: var(--product); font-size: 1.06em; }
.xp-hero-onder {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 48px; margin-top: clamp(28px, 4vw, 48px);
}
.xp-hero-onder > p { margin: 0; max-width: 40ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text); }
.xp-hero-onder .xp-cta { margin-top: 0; }

.xp-hero-media { position: relative; margin-top: clamp(48px, 6vw, 88px); }
.xp-hero-beeld {
  height: clamp(420px, 82vh, 860px);
  margin: 0 var(--xp-rand);
}
.xp-hero-klein .xp-hero-beeld { height: clamp(360px, 68vh, 720px); }
/* Met JS groeit het beeld uit; dan beginnen we schermbreed met een clip */
.xp-js .xp-hero-beeld { margin: 0; }
.xp-hero-beeld video, .xp-hero-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.xp-stempel {
  position: absolute; z-index: 3; width: clamp(112px, 12vw, 168px); aspect-ratio: 1;
  right: calc(var(--xp-rand) + clamp(16px, 3vw, 48px)); top: 0; transform: translateY(-50%);
  display: grid; place-items: center;
}
.xp-stempel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xp-stempel circle { fill: var(--xp-groen); }
.xp-stempel text { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.08em; fill: var(--ink); }
.xp-stempel span { position: relative; font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.04em; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .xp-stempel svg { animation: xp-draai 26s linear infinite; }
}
@keyframes xp-draai { to { transform: rotate(360deg); } }

/* ---------- Lopende band ---------- */
.xp-ticker { overflow: hidden; padding: 20px 0; background: var(--xp-groen); }
.xp-ticker-diep { background: var(--xp-diep); }
.xp-ticker-rij { display: flex; width: max-content; align-items: center; gap: 28px; }
.xp-ticker span { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.xp-ticker i { font-style: normal; font-size: 18px; color: var(--ink); }
.xp-ticker-diep span, .xp-ticker-diep i { color: var(--xp-creme); }
@media (prefers-reduced-motion: no-preference) {
  .xp-ticker-rij { animation: xp-loop 40s linear infinite; }
}
@keyframes xp-loop { to { transform: translateX(-50%); } }

/* ---------- Statement ---------- */
.xp-statement { padding: clamp(80px, 10vw, 152px) var(--xp-rand); background: var(--xp-diep); }
.xp-statement p {
  max-width: 1180px; margin: 0 auto; color: var(--xp-creme);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(26px, 3.4vw, 52px); line-height: 1.1;
}
.xp-statement em { font-family: var(--xp-serif); font-style: italic; font-weight: 400; color: var(--xp-accent-licht); }
.xp-statement-limoen { background: var(--xp-limoen); }
.xp-statement-limoen p { color: var(--ink); }
.xp-statement-limoen em { color: var(--product); }

/* ---------- Dagdelen ---------- */
.xp-dagdelen { padding: clamp(64px, 8vw, 112px) var(--xp-rand); background: var(--xp-creme); }
.xp-dagdelen-rij { max-width: var(--xp-breed); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); }
.xp-dagdeel-beeld { aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 22px; }
.xp-dagdeel-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.xp-dagdeel:hover .xp-dagdeel-beeld img { transform: scale(1.04); }
.xp-dagdeel:nth-child(2) { margin-top: clamp(0px, 6vw, 96px); }
.xp-dagdeel-tijd { margin: 0 0 6px; font-family: var(--xp-serif); font-style: italic; font-size: 28px; line-height: 1; color: var(--product); }
.xp-dagdeel h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; }
.xp-dagdeel p:not(.xp-dagdeel-tijd) { margin: 10px 0 0; font-size: 17px; line-height: 1.55; max-width: 36ch; }

/* ---------- Menu: uitgesneden broodjes op kleurvlakken ---------- */
.xp-menu { padding: clamp(64px, 8vw, 112px) 0; background: var(--xp-creme); }
.xp-menu .xp-kop { padding: 0 var(--xp-rand); max-width: none; }
.xp-menu-baan { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.xp-menu-baan::-webkit-scrollbar { display: none; }
.xp-menu-rij { display: flex; padding: 0 var(--xp-rand); width: max-content; }
.xp-broodje {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  width: clamp(260px, 26vw, 380px); aspect-ratio: 4 / 5; padding: 28px;
  text-decoration: none; color: var(--ink); scroll-snap-align: start;
}
.xp-kleur-0 { background: var(--xp-limoen); }
.xp-kleur-1 { background: var(--xp-creme-2); }
.xp-kleur-2 { background: var(--xp-lucht); }
.xp-broodje-beeld { flex: 1; display: grid; place-items: center; min-height: 0; }
/* Witte productfoto's: multiply laat het wit opgaan in het kleurvlak */
.xp-broodje-beeld img { width: 100%; max-width: 300px; height: auto; mix-blend-mode: multiply; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.xp-broodje:hover .xp-broodje-beeld img { transform: scale(1.06) rotate(-2deg); }
.xp-broodje-tekst { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.xp-broodje-tekst b { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.015em; }
.xp-broodje-tekst span { font-size: 16px; font-weight: 700; white-space: nowrap; }
.xp-broodje-plus {
  position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff;
  transition: transform 0.25s ease, background 0.25s ease;
}
.xp-broodje-plus svg { display: block; }
.xp-broodje:hover .xp-broodje-plus { background: var(--product); transform: rotate(90deg); }
.xp-broodje-alles { background: var(--xp-diep); color: var(--xp-creme); justify-content: flex-end; }
.xp-broodje-alles .xp-broodje-tekst { flex-direction: column; align-items: flex-start; }
.xp-broodje-alles b { font-size: clamp(30px, 2.8vw, 40px); line-height: 1; color: var(--xp-creme); }
.xp-broodje-alles span { color: var(--xp-accent-licht); }
/* Desktop: vast raster van 4 × 2 in plaats van een rij die zijwaarts schuift */
@media (min-width: 900px) {
  .xp-menu-baan { overflow: visible; scroll-snap-type: none; }
  .xp-menu-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: auto; }
  .xp-menu-rij[hidden] { display: none; }
  .xp-menu-rij .xp-broodje { width: auto; aspect-ratio: 5 / 4; padding: clamp(18px, 1.8vw, 28px); }
  /* Zeven producten plus de tegel "het hele menu" maken twee volle rijen */
  .xp-menu-rij .xp-broodje:nth-child(n+8):not(.xp-broodje-alles) { display: none; }
  /* De foto krijgt de ruimte die overblijft en past zich daaraan aan. Eerder
     hield hij zijn eigen maat aan, waardoor een lange naam (drie regels op
     een laptop) dwars door de foto liep. */
  .xp-menu-rij .xp-broodje-beeld { position: relative; display: block; min-height: 0; overflow: hidden; margin-bottom: 10px; }
  .xp-menu-rij .xp-broodje-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
  /* Prijs onder de naam: zo heeft de naam de volle breedte en past hij in twee regels */
  .xp-menu-rij .xp-broodje:not(.xp-broodje-alles) .xp-broodje-tekst { flex: none; flex-direction: column; align-items: flex-start; gap: 3px; }
  .xp-menu-rij .xp-broodje-tekst b { font-size: clamp(16px, 1.35vw, 22px); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .xp-menu-rij .xp-broodje-tekst span { font-size: clamp(13px, 1.05vw, 16px); }
}
/* Laptopbreedte: hogere tegels, zodat foto en naam allebei ruimte hebben */
@media (min-width: 900px) and (max-width: 1399px) {
  .xp-menu-rij .xp-broodje { aspect-ratio: 1 / 1; }
}

/* ---------- 50/50-vlakken ---------- */
.xp-duo { display: grid; grid-template-columns: 1fr 1fr; min-height: min(92vh, 860px); }
.xp-duo-omgekeerd .xp-duo-beeld { order: 2; }
.xp-duo-beeld { position: relative; overflow: hidden; min-height: 420px; }
.xp-duo-beeld > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-js .xp-duo-beeld > img { height: 118%; top: -9%; }
/* Foto met een vast focuspunt (portret): niet groter dan het vak en geen meeschuiven */
.xp-js .xp-duo-stil .xp-duo-beeld > img { height: 100%; top: 0; transform: none !important; }
.xp-duo-visual { display: grid; place-items: center; padding: clamp(32px, 5vw, 80px); background: var(--xp-limoen); }
.xp-duo-tekst { display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 7vw, 120px) clamp(28px, 6vw, 112px); }
.xp-duo h2 { font-size: clamp(32px, 3.5vw, 56px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance; }
.xp-duo-tekst > p:not(.xp-eyebrow) { margin: 22px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.55; }
.xp-duo-tekst > p + p:not(.xp-eyebrow) { margin-top: 14px; }
.xp-duo-groen .xp-duo-tekst { background: var(--xp-groen); }
.xp-duo-groen .xp-duo-tekst > p:not(.xp-eyebrow) { color: rgba(0, 0, 0, 0.82); }
.xp-duo-groen .xp-link:hover { text-decoration-color: var(--xp-creme); }
.xp-duo-creme .xp-duo-tekst { background: var(--xp-creme-2); }
.xp-duo-limoen .xp-duo-tekst { background: var(--xp-limoen); }
.xp-duo-diep .xp-duo-tekst { background: var(--xp-diep); }
.xp-duo-diep h2, .xp-duo-diep .xp-eyebrow { color: var(--xp-creme); }
.xp-duo-diep h2 em { color: var(--xp-accent-licht); }
.xp-duo-diep .xp-duo-tekst > p:not(.xp-eyebrow) { color: rgba(251, 247, 238, 0.82); }
.xp-duo-diep .xp-duo-tekst b { color: var(--xp-creme); }
.xp-duo-diep .xp-link { color: var(--xp-creme); }

.xp-feiten { display: flex; flex-wrap: wrap; gap: 20px clamp(24px, 4vw, 56px); margin: 36px 0 0; }
.xp-feiten div { margin: 0; }
.xp-feiten dt { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.03em; color: inherit; }
.xp-feiten dd { margin: 6px 0 0; font-size: 15px; opacity: 0.72; }
.xp-duo-diep .xp-feiten dt { color: var(--xp-creme); }
.xp-duo-diep .xp-feiten dd { color: var(--xp-creme); }

/* ---------- Kaarten: aaneengesloten kleurvlakken, zoals de menukaarten ---------- */
.xp-kaarten { max-width: var(--xp-breed); margin: 0 auto; display: grid; gap: 0; }
.xp-kaarten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xp-kaarten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xp-kaarten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xp-kaart { display: flex; flex-direction: column; min-height: clamp(260px, 24vw, 360px); padding: clamp(28px, 3vw, 44px); background: var(--xp-limoen); }
.xp-kaart:nth-child(4n+2) { background: #fff; }
.xp-kaart:nth-child(4n+3) { background: var(--xp-lucht); }
.xp-kaart:nth-child(4n+4) { background: var(--xp-groen); }
.xp-kaart-nr { display: block; font-family: var(--xp-serif); font-style: italic; font-size: clamp(44px, 4vw, 64px); line-height: 0.9; color: var(--product); margin-bottom: auto; padding-bottom: 28px; }
.xp-kaart:nth-child(4n+4) .xp-kaart-nr { color: var(--ink); }
.xp-kaart h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.xp-kaart p { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: rgba(0, 0, 0, 0.78); }
.xp-kaart .xp-link { display: inline-block; margin-top: 16px; font-size: 15px; }

/* ---------- Zo werkt het: vaste foto, scrollende stappen ---------- */
.xp-stappen { padding: clamp(72px, 9vw, 128px) var(--xp-rand); background: var(--xp-creme); }
.xp-stappen-raster { max-width: var(--xp-breed); margin: 0 auto; }
.xp-stappen-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
.xp-stap-beeld { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 24px; }
.xp-stap-nr { display: block; font-family: var(--xp-serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--product); margin-bottom: 10px; }
.xp-stap h3 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.xp-stap p { margin: 14px 0 0; max-width: 40ch; font-size: 18px; line-height: 1.55; }
.xp-stap .btn-primary { margin-top: 28px; align-self: flex-start; }
/* Desktop: de drie stappen naast elkaar, elk met zijn foto. Geen
   scrolleffect meer (feedback klant, okt 2026). */
@media (min-width: 900px) {
  .xp-stappen-lijst { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(24px, 3vw, 56px); }
  .xp-stap { display: flex; flex-direction: column; }
  .xp-stap h3 { font-size: clamp(22px, 1.9vw, 30px); }
  .xp-stap p { font-size: 17px; }
}

/* ---------- Galerij ---------- */
.xp-galerij { max-width: var(--xp-breed); margin: clamp(40px, 5vw, 72px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.xp-galerij figure { margin: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.xp-galerij figure:nth-child(even) { margin-top: clamp(0px, 5vw, 72px); }
.xp-galerij img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) {
  .xp-galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Reviews ---------- */
.xp .reviews-band { background: var(--xp-creme-2); padding: clamp(64px, 8vw, 112px) var(--xp-rand); }
.xp .reviews-inner { max-width: var(--xp-breed); margin: 0 auto; }
.xp .sec-reviews-head h2 { font-size: clamp(34px, 4.4vw, 68px); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; }
.xp .review-card { background: transparent; box-shadow: none; border-radius: 0; padding: 22px 0 0; border-top: 2px solid var(--ink); }
.xp .review-card blockquote { font-family: var(--xp-serif); font-style: italic; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; color: var(--ink); }

/* ---------- Afsluiter ---------- */
.xp-slot { display: grid; grid-template-columns: 1.2fr 1fr; min-height: min(72vh, 720px); }
.xp-slot-beeld { position: relative; overflow: hidden; min-height: 380px; }
.xp-slot-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-js .xp-slot-beeld img { height: 118%; top: -9%; }
.xp-slot-tekst { background: var(--xp-limoen); display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 7vw, 112px) clamp(28px, 6vw, 96px); }
.xp-slot h2 { font-size: clamp(36px, 4vw, 64px); line-height: 1; text-wrap: balance; font-weight: 800; letter-spacing: -0.04em; }
.xp-tijden { margin: 32px 0 0; max-width: 400px; }
.xp-tijden div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
.xp-tijden dt { font-weight: 600; color: var(--ink); }
.xp-tijden dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
.xp-tijden small { display: block; font-weight: 400; font-size: 13px; color: var(--text-muted); }

/* ---------- Bestaande onderdelen in de nieuwe vorm ---------- */
.xp .home-deals .deal-card, .xp .pakket-card { border-radius: 0; box-shadow: none; }
.xp .pakket-card { background: var(--xp-creme); }
.xp .pakket-media { border-radius: 0; }
.xp .pakket-grid { max-width: var(--xp-breed); margin: 0 auto; }

/* Bezorgtabel */
.xp .table-scroll { max-width: var(--xp-breed); margin: 0 auto; }
.xp .zones-table { width: 100%; border-collapse: collapse; background: transparent; border-radius: 0; box-shadow: none; }
.xp .zones-table th { text-align: left; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); padding: 14px 16px 14px 0; background: transparent; }
.xp .zones-table td { padding: 18px 16px 18px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-size: 17px; color: var(--ink); background: transparent; }
.xp .table-note { max-width: var(--xp-breed); margin: 20px auto 0; font-size: 15px; color: var(--text-muted); }

/* Lunchpakketten: vlakke kleurtegels zoals de menukaarten */
.xp-pakketten { max-width: var(--xp-breed); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xp-pakket { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: #fff; }
.xp-pakket:nth-child(3n+2) { background: var(--xp-lucht); }
.xp-pakket:nth-child(3n+3) { background: var(--xp-creme-2); }
.xp-pakket-beeld { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.xp-pakket-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.xp-pakket:hover .xp-pakket-beeld img { transform: scale(1.04); }
.xp-pakket-tip { position: absolute; top: 18px; left: 18px; padding: 8px 12px; background: var(--xp-groen); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.xp-pakket-tekst { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.6vw, 36px); }
.xp-pakket-tekst b { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.03em; line-height: 1.05; }
.xp-pakket-prijs { margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.xp-pakket-prijs small { font-family: var(--font); font-weight: 400; font-size: 14px; color: var(--text-muted); }
.xp-pakket-desc { margin: 12px 0 24px; font-size: 16px; line-height: 1.5; color: rgba(0, 0, 0, 0.75); }
.xp-pakket-knop { margin-top: auto; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.xp-pakket-knop .xp-broodje-plus { position: static; width: 40px; height: 40px; }
.xp-pakket:hover .xp-pakket-knop .xp-broodje-plus { background: var(--product); transform: rotate(90deg); }
@media (max-width: 899px) { .xp-pakketten { grid-template-columns: 1fr; } }

/* Bezorggebieden per plaats */
.xp-plaatsen { list-style: none; margin: 0 auto; padding: 0; max-width: var(--xp-breed); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 2px solid var(--ink); }
.xp-plaatsen li { padding: 22px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.14); display: flex; flex-direction: column; gap: 4px; }
.xp-plaatsen b { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.xp-plaatsen span { font-size: 16px; color: var(--ink); }
.xp-plaatsen em { font-style: normal; font-size: 14px; color: var(--text-muted); }
.xp-plaatsen li.is-thuis { grid-column: 1 / -1; }
.xp-plaatsen li.is-thuis b { font-size: clamp(30px, 3vw, 44px); }
.xp-plaatsen li.is-thuis span { font-size: 19px; font-weight: 700; }
@media (max-width: 899px) { .xp-plaatsen { grid-template-columns: 1fr; } }

/* Veelgestelde vragen */
.xp-faq { max-width: var(--xp-breed); margin: 0 auto; }
.xp-faq details { border-top: 2px solid var(--ink); }
.xp-faq details:last-child { border-bottom: 2px solid var(--ink); }
.xp-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -0.015em; color: var(--ink);
}
.xp-faq summary::-webkit-details-marker { display: none; }
.xp-faq summary::after { content: "+"; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1; transition: transform 0.25s ease; }
.xp-faq details[open] summary::after { transform: rotate(45deg); }
.xp-faq details p { margin: 0 0 26px; max-width: 70ch; font-size: 17px; line-height: 1.6; }

/* Formulier: kop links, wit vlak rechts; of los gecentreerd */
.xp .xp-formvlak { max-width: 920px; margin: 0 auto; background: #fff; padding: clamp(28px, 4vw, 56px); }
.xp-form-raster { max-width: var(--xp-breed); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.xp-form-raster .xp-kop { margin: 0; position: sticky; top: 110px; }
/* Na het aanvragen staat rechts alleen de status: smaller, zodat de kop links
   ruimte krijgt */
.xp-form-raster:has(.bbz-status) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.xp-form-raster:has(.bbz-status) .xp-kop h2 { overflow-wrap: normal; }
.xp-form-raster .bbz-status { max-width: 560px; }
.xp-form-raster .xp-formvlak { max-width: none; margin: 0; }
/* De kopkolom is smal naast het formulier: een kleinere kop, zodat lange
   woorden ("aangevraagd,") niet buiten beeld lopen */
.xp-form-raster .xp-kop > div { min-width: 0; }
.xp-form-raster .xp-kop h2 { font-size: clamp(32px, 3.2vw, 50px); overflow-wrap: break-word; }
@media (max-width: 899px) {
  .xp-form-raster { grid-template-columns: 1fr; }
  .xp-form-raster .xp-kop { position: static; }
}

/* Factuurkaart als beeld (zakelijk) */
.xp .bizp-invoice { border-radius: 0; box-shadow: 0 30px 60px rgba(33, 58, 23, 0.16); width: min(440px, 100%); }

/* Reviewpagina: productfoto (wit) op een limoen vlak */
.xp-review-beeld { background: var(--xp-limoen); display: grid; place-items: center; }
.xp-review-beeld img { position: static !important; width: min(80%, 480px) !important; height: auto !important; mix-blend-mode: multiply; }
.xp-review-form { max-width: 760px; }

/* Mijn account: kop in de huisstijl, de inhoud blijft zoals hij was */
.xp-account { padding-bottom: 40px; }
.xp-account .account-wrap { max-width: var(--xp-breed); padding: clamp(40px, 6vw, 80px) var(--xp-rand) 40px; }
.xp-account .account-wrap > h1 { font-size: clamp(44px, 6vw, 96px); line-height: 0.95; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 clamp(28px, 4vw, 48px); }
.xp-account .account-wrap > h1 em { font-family: var(--xp-serif); font-style: italic; font-weight: 400; color: var(--product); }

/* Lopende tekst op gewone pagina's */
.xp-prose { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.65; color: var(--text); }
.xp-prose h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; margin: 48px 0 12px; }
.xp-prose h3 { font-size: 22px; margin: 32px 0 8px; }
.xp-prose a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Hero-varianten ---------- */
/* Videoband: zo gaat het aan de Binnenweg */
.xp-videoband { position: relative; overflow: hidden; background: var(--xp-diep); aspect-ratio: 16 / 9; max-height: 88svh; width: 100%; }
.xp-videoband video { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-videoband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 28, 12, 0) 55%, rgba(20, 28, 12, 0.7) 100%); pointer-events: none; }
.xp-videoband-tekst { position: absolute; z-index: 1; left: var(--xp-rand); right: var(--xp-rand); bottom: clamp(20px, 4vw, 56px); margin: 0; color: var(--xp-creme); font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.xp-videoband-tekst em { font-family: var(--xp-serif); font-style: italic; font-weight: 400; color: var(--xp-accent-licht); }
@media (max-width: 767px) { .xp-videoband { aspect-ratio: 4 / 3; } }

/* Opening met schermvullende foto en de tekst eroverheen */
.xp-hero-vol { position: relative; display: flex; align-items: flex-end; min-height: min(86svh, 940px); overflow: hidden; background: var(--xp-diep); color: var(--xp-creme); isolation: isolate; }
.xp-hv-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--xp-focus, center); transform-origin: center top; will-change: transform; }
.xp-hv-inhoud { will-change: transform, opacity; }
/* Mobiel en touch: hetzelfde idee, maar via CSS gekoppeld aan het scrollen
   zelf (geen JavaScript dat achterloopt). Zonder ondersteuning: stil. */
@media (max-width: 767px), (pointer: coarse) {
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .xp-hv-foto { animation: xp-hv-foto linear both; animation-timeline: scroll(root); animation-range: 0 85svh; }
      .xp-hv-inhoud { animation: xp-hv-tekst linear both; animation-timeline: scroll(root); animation-range: 0 60svh; }
    }
  }
}
@keyframes xp-hv-foto { to { transform: translate3d(0, 28%, 0); } }
@keyframes xp-hv-tekst { to { transform: translate3d(0, -14svh, 0); opacity: 0; } }
/* Twee lagen: van onder (voor de tekstregels) en van links (voor de kop en
   de regel erboven, die op een lichte of drukke foto anders wegvallen) */
.xp-hero-vol::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(20, 28, 12, 0.62) 0%, rgba(20, 28, 12, 0.3) 45%, rgba(20, 28, 12, 0) 72%),
  linear-gradient(180deg, rgba(20, 28, 12, 0) 30%, rgba(20, 28, 12, 0.5) 60%, rgba(20, 28, 12, 0.88) 100%); }
.xp-hv-inhoud { width: 100%; max-width: 1500px; margin: 0 auto; padding: clamp(120px, 18vh, 220px) var(--xp-rand) clamp(40px, 6vw, 80px); }
.xp-hero-vol .xp-eyebrow { color: var(--xp-creme); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.xp-hero-vol h1 { margin: 0; max-width: 20ch; text-wrap: balance; color: var(--xp-creme); font-size: clamp(42px, 5.6vw, 92px); line-height: 0.94; font-weight: 800; letter-spacing: -0.04em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.xp-hero-vol h1 em { color: var(--xp-accent-licht); }
.xp-hero-vol .xp-hv-sub { margin: 22px 0 0; max-width: 46ch; color: rgba(251, 247, 238, 0.9); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.xp-hero-vol .xp-cta { margin-top: 28px; }
.xp-hero-vol .xp-link { color: var(--xp-creme); }
.xp-hero-vol .xp-stempel { right: var(--xp-rand); top: clamp(24px, 4vw, 56px); transform: none; }
@media (max-width: 767px) {
  .xp-hero-vol { min-height: 78svh; }
  .xp-hero-vol .xp-stempel { display: none; }
  /* De knop moet op een telefoon in het eerste scherm staan: minder ruimte
     boven de tekst en de inleiding op maximaal vier regels. */
  .xp-hv-inhoud { padding-top: 88px; padding-bottom: 28px; }
  .xp-hero-vol h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .xp-hero-vol .xp-hv-sub { margin-top: 14px; font-size: 16px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .xp-hero-vol .xp-cta { margin-top: 20px; }
}

.xp-hero-split, .xp-hero-vlak { display: grid; grid-template-columns: 1fr 1fr; min-height: min(88vh, 900px); }
.xp-hv-tekst { display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 7vw, 120px) clamp(24px, 5vw, 96px) clamp(56px, 7vw, 120px) var(--xp-rand); }
.xp-hv-tekst h1 { font-size: clamp(40px, 4.6vw, 80px); line-height: 0.96; font-weight: 800; letter-spacing: -0.04em; max-width: 20ch; text-wrap: balance; }
.xp-hv-sub { margin: 26px 0 0; max-width: 42ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text); }
.xp-hv-beeld { position: relative; min-height: 420px; }
.xp-hv-beeld > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-hero-split .xp-hv-tekst h1 em { color: var(--product); }
.xp-hero-split .xp-stempel { left: 0; right: auto; top: 50%; transform: translate(-50%, -50%); }
/* Vlak: kleurvlak over de volle breedte */
.xp-vlak-diep { background: var(--xp-diep); }
.xp-vlak-diep h1, .xp-vlak-diep .xp-eyebrow { color: var(--xp-creme); }
.xp-vlak-diep h1 em { color: var(--xp-accent-licht); }
.xp-vlak-diep .xp-hv-sub { color: rgba(251, 247, 238, 0.82); }
.xp-vlak-diep .xp-link { color: var(--xp-creme); }
.xp-vlak-groen { background: var(--xp-groen); }
.xp-vlak-groen .xp-hv-sub { color: rgba(0, 0, 0, 0.82); }
.xp-vlak-limoen { background: var(--xp-limoen); }
.xp-vlak-creme { background: var(--xp-creme-2); }
.xp-hero-vlak .xp-hv-beeld { display: grid; place-items: center; padding: clamp(32px, 5vw, 80px); }
.xp-hero-vlak .xp-stempel { top: auto; right: auto; bottom: clamp(16px, 4vw, 56px); left: clamp(16px, 4vw, 56px); transform: none; }
.xp-vlak-groen .xp-stempel circle { fill: var(--xp-creme); }
.xp-hero-vlak.xp-hv-vol .xp-hv-beeld { display: block; padding: 0; overflow: visible; }
.xp-hero-vlak.xp-hv-vol .xp-hv-beeld > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
.xp-hv-overlay { position: absolute; z-index: 2; left: clamp(-120px, -6vw, -40px); bottom: clamp(32px, 6vw, 88px); width: min(440px, 80%); }
.xp-hv-overlay .bizp-invoice { width: 100%; }
.xp-hero-vlak .xp-hv-beeld > img { position: relative; inset: auto; width: 100%; height: auto; max-height: 72vh; aspect-ratio: 4 / 5; }

/* ---------- Grote lijstregels ---------- */
.xp-rijen { max-width: var(--xp-breed); margin: 0 auto; border-top: 2px solid var(--ink); }
.xp-rij {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 44px; align-items: center; gap: 24px;
  padding: clamp(22px, 2.6vw, 36px) 0; border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  color: var(--ink); text-decoration: none;
}
.xp-rij-titel { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.8vw, 44px); line-height: 1; letter-spacing: -0.035em; }
.xp-rij-titel em { font-family: var(--xp-serif); font-weight: 400; font-style: italic; color: var(--product); }
.xp-rij-tekst { font-size: 17px; line-height: 1.5; color: var(--text); }
.xp-rij-pijl { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; }
a.xp-rij:hover .xp-rij-pijl { background: var(--ink); color: var(--xp-creme); transform: translateX(4px); }
a.xp-rij:hover .xp-rij-titel { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--xp-groen); text-underline-offset: 8px; }
div.xp-rij .xp-rij-pijl { visibility: hidden; }

/* ---------- Fotoband ---------- */
.xp-fotoband { overflow: hidden; padding: clamp(24px, 3vw, 40px) 0; background: var(--xp-creme); }
.xp-fotoband-rij { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; }
/* Elke foto in zijn eigen verhouding, niet bijgesneden. Eerder kreeg om en om
   een foto een liggend kader, waardoor bij staande foto's hoofden wegvielen
   (feedback 12 okt 2026). */
.xp-fotoband img { height: clamp(220px, 30vw, 420px); width: auto; max-width: none; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .xp-fotoband-rij { animation: xp-loop 60s linear infinite; }
}

/* ---------- Cijferband ---------- */
.xp-cijfers { padding: clamp(56px, 7vw, 96px) var(--xp-rand); }
.xp-cijfers-diep { background: var(--xp-diep); color: var(--xp-creme); }
.xp-cijfers-groen { background: var(--xp-groen); color: var(--ink); }
.xp-cijfers-rij { max-width: var(--xp-breed); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.xp-cijfers b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4.6vw, 72px); line-height: 0.95; letter-spacing: -0.04em; }
.xp-cijfers span { display: block; margin-top: 10px; font-size: 16px; opacity: 0.8; }
.xp-cijfers-diep b { color: var(--xp-accent-licht); }

/* ---------- Tegels ---------- */
.xp-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xp-tegel { padding: clamp(40px, 5vw, 80px) clamp(24px, 3.5vw, 56px); min-height: 380px; display: flex; flex-direction: column; }
.xp-tegel h3 { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 36px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 18px; }
.xp-tegel p:not(.xp-eyebrow) { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink); }
.xp-tegel .xp-link { margin-top: auto; padding-top: 24px; }
.xp-tegel-groen { background: var(--xp-groen); }
.xp-tegel-limoen { background: var(--xp-limoen); }
.xp-tegel-diep { background: var(--xp-diep); }
.xp-tegel-diep h3, .xp-tegel-diep p, .xp-tegel-diep .xp-eyebrow, .xp-tegel-diep a, .xp-tegel-diep dt, .xp-tegel-diep dd { color: var(--xp-creme) !important; }
.xp-tegel-diep .xp-tijden div { border-bottom-color: rgba(251, 247, 238, 0.2); }
.xp-tegel-diep .xp-tijden small { color: rgba(251, 247, 238, 0.7); }
.xp-tegel .xp-groot { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.02em; line-height: 1.15; color: inherit; text-decoration: none; }

/* ---------- Beeldband ---------- */
.xp-beeldband { position: relative; height: clamp(320px, 62vh, 680px); overflow: hidden; }
.xp-beeldband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-js .xp-beeldband img { height: 124%; top: -12%; }

/* ---------- Formulieren ---------- */
.bbf { position: relative; }
.bbf-sec { margin: 40px 0 8px; padding-top: 22px; border-top: 2px solid var(--ink); gap: 12px; }
.bbf-sec:first-of-type { margin-top: 0; padding-top: 22px; border-top: 2px solid var(--ink); }
.bbf-sec svg { width: 36px; height: 36px; padding: 8px; background: var(--xp-groen); color: var(--ink); }
.bbf-sec b { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; }
.bbf-sec small { font-size: 15px; line-height: 1.5; }
.bbf-row { gap: 20px; }
.bbf-field { margin-top: 18px; }
.bbf-field > span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.bbf input, .bbf select, .bbf textarea {
  border-radius: 0; border: 1.5px solid rgba(0, 0, 0, 0.22); background: #fff;
  padding: 15px 16px; font-size: 17px; transition: border-color 0.2s ease;
}
.bbf textarea { border-radius: 0; min-height: 140px; }
.bbf input:hover, .bbf select:hover, .bbf textarea:hover { border-color: rgba(0, 0, 0, 0.45); }
.bbf input:focus-visible, .bbf select:focus-visible, .bbf textarea:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px var(--xp-groen); }
.bbf input::placeholder, .bbf textarea::placeholder { color: rgba(0, 0, 0, 0.42); }
.bbf select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232b2a28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.bbf .bbf-submit, .bbf button.btn-primary { width: auto; min-height: 56px; padding: 16px 34px; font-size: 17px; margin-top: 32px; }
.bbf .table-note { margin-top: 16px; font-size: 14px; color: var(--text-muted); }
.form-ok, .form-err, .bbz-notice { border-radius: 0; padding: 18px 20px; font-size: 16px; }
.form-ok, .bbz-ok { background: var(--xp-limoen); color: var(--ink); border-left: 0; }
.form-err, .bbz-err { background: #fbe3e1; color: #6b1d16; border-left: 0; }

/* Formulieren als vlak binnen een sectie */
.xp .biz-form, .xp .bras-reserveer { background: transparent; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
.xp .biz-form > h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 28px; }
.xp .bras-reserveer { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.xp .bras-reserveer h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 18px; }
.xp .bras-reserveer h2 em { font-family: var(--xp-serif); font-style: italic; font-weight: 400; color: var(--product); }
.xp .bras-reserveer-copy p { font-size: 18px; line-height: 1.55; color: var(--text); }
.xp .bras-reserveer-punten li { font-size: 17px; }
.xp .bras-reserveer-punten svg { color: var(--ink); }
.xp .bras-reserveer-form { background: #fff; border-radius: 0; box-shadow: none; padding: clamp(28px, 4vw, 48px); }
@media (max-width: 860px) { .xp .bras-reserveer { grid-template-columns: 1fr; } }

/* ============================================================
   Header
   ============================================================ */
/* Drie kolommen: merk links, menu precies in het midden, acties rechts.
   De buitenmaat volgt de pagina-inhoud, zodat het logo in lijn staat met
   de koppen eronder. Geen lijn eronder: de header hoort bij het vlak. */
.topbar { background: var(--xp-creme); border-bottom: 0; }
.topbar-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  max-width: calc(var(--xp-breed) + 2 * var(--xp-rand)); height: 84px; padding: 0 var(--xp-rand);
}
.topbar .brand { justify-self: start; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; font-family: var(--font-display); }
.topbar .brand svg { height: 34px; }

.mainnav { flex: none; justify-self: center; gap: 4px; }
.mainnav > a, .navdrop-btn {
  position: relative; font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; border-radius: 0; padding: 10px 14px; text-decoration: none; background: none;
}
/* Onderstreping die van links aangroeit, in brandgroen */
.mainnav > a::after, .navdrop-btn::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px;
  background: var(--xp-groen); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.navdrop-btn::after { right: 32px; }
.mainnav > a:hover, .navdrop-btn:hover { background: none; }
.mainnav > a:hover::after, .navdrop-btn:hover::after, .navdrop-btn[aria-expanded="true"]::after, .mainnav > a.current::after { transform: scaleX(1); }
.mainnav > a.current { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .mainnav > a::after, .navdrop-btn::after { transition: none; } }

/* Het menu staat in het midden, dus het uitklapmenu ook */
.navdrop-menu {
  left: 50%; transform: translateX(-50%); top: calc(100% + 14px);
  background: var(--xp-creme); border-radius: 0; border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1); width: 340px;
}
.navdrop-menu::before { top: -16px; height: 16px; }
.navdrop-menu a { border-radius: 0; }
.navdrop-menu a:hover { background: var(--xp-creme-2); }
.navdrop-ic { border-radius: 0; background: var(--xp-limoen); color: var(--ink); }

.topbar-actions { justify-self: end; gap: 18px; }
.topbar-login {
  font-family: var(--font-display); font-size: 16px; padding: 10px 2px;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: rgba(0, 0, 0, 0.18);
}
.topbar-login:hover { text-decoration-color: var(--xp-groen); }
.topbar-actions .btn-sm { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; font-size: 16px; font-weight: 800; font-family: var(--font-display); }

/* In de bestelflow blijft de header wit, passend bij de witte bestelpagina,
   met een lijn omdat de pagina eronder ook wit is */
body.post-type-archive-product .topbar, body.woocommerce-checkout .topbar { background: #fff; border-bottom: 1px solid var(--line); }
@media (max-width: 1100px) {
  .topbar-inner { gap: 12px; }
  .mainnav > a, .navdrop-btn { padding: 10px 10px; }
  .mainnav > a::after { left: 10px; right: 10px; }
  .navdrop-btn::after { left: 10px; right: 28px; }
}
@media (max-width: 900px) {
  .topbar-inner { grid-template-columns: 1fr auto; height: 64px; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
}
@media (max-width: 440px) {
  .topbar .brand span { font-size: 16px; }
  .topbar-actions .btn-sm { padding: 0 14px; font-size: 14px; }
}
.site-menu { background: var(--xp-creme); border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding: 16px var(--xp-rand) 28px; }
.site-menu a { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; padding: 10px 0; border-radius: 0; }
.site-menu a:hover { background: none; text-decoration: underline; text-decoration-color: var(--xp-groen); text-decoration-thickness: 3px; }

/* Pagina's in de nieuwe stijl sluiten direct aan op de footer */
body:has(main.xp) .site-foot { margin-top: 0; }

/* ============================================================
   Footer
   ============================================================ */
.site-foot { background: var(--xp-diep); color: rgba(251, 247, 238, 0.82); overflow: hidden; }
.sf-top {
  max-width: 1500px; margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--xp-rand) clamp(48px, 6vw, 80px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px;
  border-bottom: 1px solid rgba(251, 247, 238, 0.14);
}
.sf-top h2 { margin: 0; color: var(--xp-creme); font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.035em; }
.sf-top h2 em { color: var(--xp-accent-licht); }
.sf-top .xp-cta { margin-top: 0; }
.sf-top .xp-link { color: var(--xp-creme); }
.site-foot-grid { max-width: 1500px; padding: clamp(48px, 6vw, 72px) var(--xp-rand); }
.site-foot h3 { color: var(--xp-accent-licht); font-family: var(--font-display); letter-spacing: 0.12em; }
.site-foot a { color: var(--xp-creme); }
.site-foot .btn-licht { color: var(--xp-diep); }
.sf-brand p { color: rgba(251, 247, 238, 0.82); }
.sf-logo { border-radius: 0; }
.sf-hours li { max-width: 280px; }
.sf-hours span { color: rgba(251, 247, 238, 0.72); }
.sf-hours b { color: var(--xp-creme); }
.sf-hours-sub { border-top-color: rgba(251, 247, 238, 0.18); }
/* Nieuwsbrief: compact in de eerste kolom, onder de merktekst */
.sf-nb { margin-top: 28px; max-width: 380px; }
.sf-nb h3 { margin-bottom: 8px; }
.sf-nb > p { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: rgba(251, 247, 238, 0.72); }
.sf-nb-veld { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--pill); border: 1px solid rgba(251, 247, 238, 0.24); }
.sf-nb-veld:focus-within { border-color: var(--xp-creme); }
.sf-nb-veld input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--xp-creme); font: 500 15px var(--font); outline: none; }
.sf-nb-veld input::placeholder { color: rgba(251, 247, 238, 0.5); }
.sf-nb-veld button { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: var(--pill); background: var(--xp-creme); color: var(--xp-diep); font: 800 14px var(--font-display); cursor: pointer; }
.sf-nb-veld button:hover { background: #fff; }
.sf-nb-melding { margin: 10px 0 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--xp-accent-licht); }
.sf-nb-melding.is-fout { color: #ffb4a8; }
.sf-nb-val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Het merk groot onderaan, gecentreerd en helemaal leesbaar (ook de
   staart van de j). Breedte schaalt mee met het venster, met dezelfde
   marges als de rest van de footer. */
.sf-merk {
  display: block; max-width: 1500px; margin: clamp(8px, 1.5vw, 20px) auto 0; padding: 0 var(--xp-rand) 0.24em;
  text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 13.4vw, 210px); line-height: 0.9;
  letter-spacing: -0.05em; color: var(--xp-groen); user-select: none;
}
.site-foot-base { max-width: 1500px; padding: 22px var(--xp-rand); border-top: 1px solid rgba(251, 247, 238, 0.14); color: rgba(251, 247, 238, 0.6); }
.site-foot-base a { color: var(--xp-creme); }

/* ---------- Mobiel ---------- */
@media (max-width: 899px) {
  .xp-duo, .xp-slot { grid-template-columns: 1fr; min-height: 0; }
  .xp-duo-omgekeerd .xp-duo-beeld { order: 0; }
  .xp-duo-beeld { min-height: 0; aspect-ratio: 4 / 3; }
  .xp-duo-visual { aspect-ratio: auto; }
  .xp-slot-beeld { min-height: 0; aspect-ratio: 16 / 10; }
  .xp-hero-beeld, .xp-hero-klein .xp-hero-beeld { height: 62vh; }
  .xp-dagdelen-rij, .xp-kaarten-3, .xp-kaarten-4 { grid-template-columns: 1fr; }
  .xp-kaarten-2 { grid-template-columns: 1fr; }
  .xp-dagdeel:nth-child(2) { margin-top: 0; }
  .xp-dagdeel-beeld { aspect-ratio: 4 / 3; }
}
@media (max-width: 899px) {
  .xp-hero-split, .xp-hero-vlak { grid-template-columns: 1fr; min-height: 0; }
  .xp-hero-split .xp-hv-beeld { aspect-ratio: 4 / 5; min-height: 0; order: 2; }
  .xp-hero-split .xp-stempel { left: auto; right: var(--xp-rand); top: 0; transform: translateY(-50%); }
  .xp-hero-vlak .xp-hv-beeld { padding: 0 var(--xp-rand) 48px; }
  .xp-hero-vlak.xp-hv-vol .xp-hv-beeld { aspect-ratio: 4 / 3; min-height: 0; }
  .xp-hv-overlay { left: var(--xp-rand); right: var(--xp-rand); bottom: -40px; width: auto; }
  .xp-hero-vlak.xp-hv-vol { padding-bottom: 72px; }
  .xp-rij { grid-template-columns: 1fr 44px; }
  .xp-rij-tekst { grid-column: 1; grid-row: 2; }
  .xp-rij-pijl { grid-column: 2; grid-row: 1 / span 2; }
  .xp-tegels { grid-template-columns: 1fr; }
  .xp-tegel { min-height: 0; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .xp-kaarten-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .xp-broodje { width: 78vw; }
  .xp-feiten { gap: 18px 22px; }
}

/* WooCommerce-meldingen met een knop (bijv. "bevestig je e-mailadres"): de
   knop stond als groen vlak zonder leesbare tekst vóór de zin. Nu rechts,
   met witte tekst. */
.woocommerce-message:has(.button), .woocommerce-info:has(.button), .woocommerce-error:has(.button) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.woocommerce-message a.button, .woocommerce-info a.button, .woocommerce-error a.button {
  order: 2; margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 0; border-radius: var(--pill); background: var(--product); color: #fff !important;
  font: 800 14px/1 var(--font-display); text-decoration: none; white-space: nowrap;
}
.woocommerce-message a.button:hover, .woocommerce-info a.button:hover, .woocommerce-error a.button:hover { background: var(--product-dk); }

/* Zakelijke aanvraag: status met de volgende stappen */
.bbz-status { background: #fff; padding: clamp(24px, 3vw, 40px); }
.bbz-status-titel { margin: 0 0 20px; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; color: var(--ink); }
.bbz-status-stappen { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: bbz-stap; }
.bbz-status-stappen li { position: relative; padding: 0 0 18px 44px; counter-increment: bbz-stap; }
.bbz-status-stappen li::before { content: counter(bbz-stap); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #e7e2da; font: 800 13px/1 var(--font-display); color: var(--ink); background: #fff; }
.bbz-status-stappen li.is-klaar::before { content: "✓"; border-color: var(--product); background: var(--product); color: #fff; }
.bbz-status-stappen li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: #e7e2da; }
.bbz-status-stappen b { display: block; font-size: 16px; color: var(--ink); }
.bbz-status-stappen span { display: block; margin-top: 2px; font-size: 15px; color: var(--text); }
.bbz-status-intussen { margin: 0 0 16px; padding-top: 20px; border-top: 1px solid #e7e2da; font-size: 16px; color: var(--ink); }

/* Account onderaan het mobiele menu (de onderbalk met "Account" is vervallen) */
.site-menu .site-menu-account { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.site-menu .site-menu-account a { font-size: 18px; }