/* Website-thema voor de tenant-site.
   Overgenomen uit de stylesheet van hetlagewoud.nl (websitehlw/static/css/
   style.css). Alleen de kleuren en lettertypes zijn vervangen door tokens:
   die komen per bakkerij binnen via /branding/thema.css, zodat dezelfde
   opmaak in elke huisstijl staat.

   Er hoort geen enkele vaste kleur in dit bestand te staan. Zet je er een
   neer, dan erft de volgende bakkerij de kleuren van Het Lage Woud.
   Bewaakt door de css-audit-hook en tests_thema_css.py.

   Maatvoering (breedte, ronding, overgangen) is wel vast: dat is de vorm van
   het ontwerp, niet de huisstijl. */
:root {
  --wrap: 1140px;
  --radius: 4px;
  --shadow: 0 10px 40px var(--thema-shadow);
  --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip; background: var(--thema-canvas); color: var(--thema-ink);
  font-family: var(--thema-font-text); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--thema-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--thema-warm-deep); }
h1, h2, h3, h4 { font-family: var(--thema-font-display); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--thema-primary-deep); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-variation-settings: 'opsz' 144; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-variation-settings: 'opsz' 96; }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
p { margin: 0 0 1.1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--thema-primary); color: var(--thema-on-primary); padding: .6em 1em; border-radius: var(--radius); z-index: 100; }
.skip:focus { left: 8px; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - 2.5rem); margin-inline: auto; }
.wrap--mid { width: min(920px, 100% - 2.5rem); margin-inline: auto; }

/* --- knoppen --- */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.5em; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; text-decoration: none; border: 1.5px solid transparent;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s; cursor: pointer; font-family: inherit; line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--thema-primary); color: var(--thema-on-primary); }
.btn-primary:hover { background: var(--thema-primary-deep); color: var(--thema-on-dark); }
.btn-bread { background: var(--thema-warm); color: var(--thema-on-dark); }
.btn-bread:hover { background: var(--thema-warm-deep); color: var(--thema-on-dark); }
.btn-outline { border-color: var(--thema-primary); color: var(--thema-primary); background: transparent; }
.btn-outline:hover { background: var(--thema-primary); color: var(--thema-on-primary); }
.btn-light { background: var(--thema-surface); color: var(--thema-primary-deep); }
.btn-light:hover { background: var(--thema-on-dark); color: var(--thema-primary-deep); }
.btn-outline--light { border-color: var(--thema-on-dark-soft); color: var(--thema-on-dark); }
.btn-outline--light:hover { background: var(--thema-on-dark); color: var(--thema-primary-deep); border-color: var(--thema-on-dark); }
.btn-small { padding: .6em 1.1em; font-size: .85rem; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* --- header --- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--thema-header-bg); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--thema-line), 0 8px 30px var(--thema-shadow-soft); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--thema-primary-deep); }
.brand__logo { width: 44px; height: 44px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--thema-font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.brand__tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--thema-ink-soft); }
.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.site-nav__list { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.site-nav__list a { display: block; white-space: nowrap; padding: .5em .8em; border-radius: var(--radius); text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--thema-ink); }
.site-nav__list a:hover { background: var(--thema-muted); color: var(--thema-primary-deep); }
.site-nav__list a.is-active { background: var(--thema-primary); color: var(--thema-on-primary); }
/* Acties rechts in de header: inloggen naast bestellen. De knoppen zelf komen
   uit .btn hierboven; dit is alleen de uitlijning. */
.site-nav__acties { display: flex; align-items: center; gap: .5rem; }
.site-nav__uitlogform { display: flex; margin: 0; }
.btn-ghost { background: transparent; color: var(--thema-ink-soft); border-color: transparent; padding-inline: .7em; }
.btn-ghost:hover { color: var(--thema-primary-deep); background: var(--thema-muted); }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 8px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.nav-toggle__bar { display: block; height: 2px; background: var(--thema-primary-deep); border-radius: 2px; transition: transform .25s, opacity .25s; }
@media (max-width: 1100px) {
  .brand__tag { display: none; }
  .nav-toggle { display: flex; }
  /* Absoluut t.o.v. de sticky header (die heeft backdrop-filter en is dus containing block;
     position: fixed zou hier op nul hoogte uitkomen). */
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 76px); background: var(--thema-canvas); flex-direction: column; align-items: stretch; padding: 1.5rem; gap: 1rem; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; overflow: auto; box-shadow: 0 12px 30px var(--thema-shadow); }
  body.nav-open .site-nav { visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
  body.nav-open .site-nav { transform: none; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav__list { flex-direction: column; }
  .site-nav__list a { font-size: 1.25rem; padding: .7em 1em; font-family: var(--thema-font-display); }
  .site-nav__cta { align-self: flex-start; white-space: nowrap; font-size: 1rem; padding: .8em 1.4em; }
  /* Het gesloten menu staat met translateX(100%) naast het scherm en rekt het
     document anders op tot dubbele breedte: de pagina schuift dan horizontaal
     en de footer wordt smaller dan de rest. Clippen in de header zelf, niet op
     body: overflow-x op body helpt niet zolang html de scroller is, en clip
     bestaat nog niet op Safari 14, waar de webshop op moet draaien. Bij een
     open menu moet de clip eraf, want het menu is hoger dan de header. */
  /* In het uitgeschoven menu staan de knoppen onderaan, op volle breedte: daar
     komt de duim vanzelf uit, en het scheidt ze van de paginalinks erboven. */
  .site-nav__acties { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: auto; }
  .site-nav__acties .btn { justify-content: center; font-size: 1rem; padding: .8em 1.4em; }
  .site-nav__acties .site-nav__cta { align-self: stretch; }
  .site-nav__uitlogform .btn { width: 100%; }
  .site-header { overflow-x: hidden; }
  body.nav-open .site-header { overflow-x: visible; }
}

/* --- hero --- */
.hero { position: relative; min-height: min(86vh, 820px); display: grid; align-items: end; color: var(--thema-on-dark); isolation: isolate; overflow: hidden; }
.hero--short { min-height: min(62vh, 620px); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--thema-veil-strong) 0%, var(--thema-veil-mid) 45%, var(--thema-veil-soft) 100%); }
.hero__inner { padding: 4rem 0 3.5rem; }
.hero__kicker { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; color: var(--thema-on-dark-soft); font-weight: 600; }
.hero h1 { color: var(--thema-on-dark); max-width: 14ch; text-wrap: balance; margin-bottom: .6rem; }
.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 52ch; color: var(--thema-surface); margin-bottom: 1.6rem; text-wrap: pretty; }
.hero__lead em, .hero h1 em { font-style: italic; color: var(--thema-highlight); }
.hero--home h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); font-weight: 400; }
.hero--home .hero__tag { font-family: var(--thema-font-display); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--thema-highlight); margin: 0 0 1.5rem; }

/* Hero-stand "tekst eronder". Het uitgangspunt is tekst op de foto, met de
   waas hierboven; dit is de omzetting voor een lichte foto, waar witte letters
   wegvallen. Eén class erbij op dezelfde opmaak, geen tweede hero. */
.hero--onder { min-height: 0; display: block; color: var(--thema-ink); background: var(--thema-canvas); }
.hero--onder::after { display: none; }
.hero--onder .hero__img { position: relative; height: min(52vh, 540px); z-index: 0; }
.hero--onder .hero__inner { padding: 2.5rem 0 .5rem; }
.hero--onder h1 { color: var(--thema-primary-deep); }
.hero--onder .hero__kicker { color: var(--thema-warm); }
.hero--onder .hero__tag { color: var(--thema-warm-deep); }
.hero--onder .hero__lead { color: var(--thema-ink-soft); }
.hero--onder .btn-outline--light { border-color: var(--thema-primary); color: var(--thema-primary); }
.hero--onder .btn-outline--light:hover { background: var(--thema-primary); color: var(--thema-on-primary); }
.hero--onder .btn-light { background: var(--thema-primary); color: var(--thema-on-primary); }

/* --- secties --- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--paper { background: var(--thema-surface); }
.section--sand { background: var(--thema-muted); }
.section--forest { background: var(--thema-primary-deep); color: var(--thema-on-dark); }
.section--forest h2, .section--forest h3 { color: var(--thema-on-dark); }
.section--forest a { color: var(--thema-highlight); }
.section--rose { background: var(--thema-muted); }
.section__head { max-width: 62ch; margin-bottom: 2.5rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.kicker { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--thema-warm); font-weight: 600; margin-bottom: .8rem; display: block; }
.section--forest .kicker { color: var(--thema-highlight); }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--thema-ink-soft); text-wrap: pretty; }
.section--forest .lead { color: var(--thema-on-dark-soft); }

.prose { max-width: 66ch; }
.prose p { text-wrap: pretty; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.8rem 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--thema-highlight); font-family: var(--thema-font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--thema-primary-deep); }
.prose--big p { font-size: clamp(1.08rem, 1.5vw, 1.25rem); }
.dropcap::first-letter { font-family: var(--thema-font-display); font-size: 3.6em; float: left; line-height: .85; padding: .08em .12em 0 0; color: var(--thema-warm); }

/* Paginakop boven de blokken. Eigen ruimte, want het blok eronder brengt zijn
   eigen bovenmarge mee en samen werd dat een gat. */
.page-kop { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.page-kop h1 { margin-bottom: 0; }

/* --- split (tekst naast foto) --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--rev > .split__media { order: -1; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 4 / 3; }
.split__media--square img { aspect-ratio: 1; }
.split__media--stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.split__media--stack img { aspect-ratio: 3 / 4; }
.split__media--stack img:nth-child(2) { margin-top: 2.5rem; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } .split--rev > .split__media { order: 0; } }

/* --- pijlers (home) --- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.pillar { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; color: var(--thema-on-dark); text-decoration: none; box-shadow: var(--shadow); isolation: isolate; }
.pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .8s var(--ease); }
.pillar:hover img { transform: scale(1.05); }
.pillar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--thema-veil-strong), var(--thema-veil-soft) 60%); z-index: 0; }
.pillar__body { position: absolute; inset: auto 0 0 0; padding: 1.4rem; z-index: 1; }
.pillar__verb { font-family: var(--thema-font-display); font-style: italic; color: var(--thema-highlight); font-size: 1.05rem; display: block; margin-bottom: .2rem; }
.pillar__title { font-family: var(--thema-font-display); font-size: 1.6rem; font-weight: 500; display: block; line-height: 1.1; margin-bottom: .3rem; }
.pillar__sub { font-size: .9rem; color: var(--thema-on-dark-soft); display: block; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pillars { grid-template-columns: 1fr; } .pillar { aspect-ratio: 4 / 3; } }

/* --- kaarten / features --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.card { background: var(--thema-surface); border-radius: var(--radius); padding: 1.75rem; box-shadow: 0 1px 0 var(--thema-line); }
.card h3 { margin-top: .2rem; }
.card--link { text-decoration: none; color: inherit; display: block; transition: transform .25s var(--ease), box-shadow .25s; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.card__more { color: var(--thema-warm); font-weight: 600; font-size: .9rem; }
.card__icon { width: 44px; height: 44px; border-radius: var(--radius); background: var(--thema-muted); display: grid; place-items: center; margin-bottom: 1rem; color: var(--thema-primary); font-family: var(--thema-font-display); font-size: 1.4rem; }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem 2rem; margin: 2rem 0; }
.values li { list-style: none; padding-left: 1.6rem; position: relative; }
.values ul, ul.values { padding: 0; margin: 2rem 0; }
.values li::before { content: ''; position: absolute; left: 0; top: .55em; width: .8em; height: .8em; border-radius: 50%; background: var(--thema-highlight); }

/* --- galerij --- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.gallery--wide img { aspect-ratio: 4 / 3; }
.gallery__tall { grid-row: span 2; }
.gallery__tall img { aspect-ratio: auto; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }

/* --- quotes / testimonials --- */
.quote-band { text-align: center; }
.quote-band blockquote { margin: 0 auto; max-width: 30ch; font-family: var(--thema-font-display); font-size: clamp(1.5rem, 3vw, 2.3rem); font-style: italic; line-height: 1.3; color: var(--thema-on-dark); text-wrap: balance; }
.quote-band cite { display: block; font-style: normal; font-family: var(--thema-font-text); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 1.2rem; color: var(--thema-highlight); }
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.testimonial { background: var(--thema-surface); border-radius: var(--radius); padding: 1.6rem 1.75rem; }
.testimonial p { font-family: var(--thema-font-display); font-size: 1.15rem; font-style: italic; line-height: 1.4; margin-bottom: .8rem; }
.testimonial cite { font-style: normal; font-size: .85rem; color: var(--thema-ink-soft); }
.stars { color: var(--thema-highlight); letter-spacing: .1em; font-size: .9rem; margin-bottom: .5rem; }

/* --- productkaarten ---
   De bron-site had geen webshop, dus deze staan hier nieuw. Ze leunen op
   dezelfde vormtaal als .card: zelfde ronding, zelfde lift bij hover. */
.prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.prod { background: var(--thema-surface); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 0 var(--thema-line); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s; }
.prod:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.prod__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.prod__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.prod__name { font-family: var(--thema-font-display); font-size: 1.25rem; color: var(--thema-primary-deep); margin: 0; line-height: 1.15; }
.prod__desc { font-size: .92rem; color: var(--thema-ink-soft); margin: 0; }
.prod__foot { display: flex; align-items: baseline; gap: .4rem; margin-top: auto; padding-top: .8rem; }
.prod__price { font-family: var(--thema-font-display); font-size: 1.35rem; color: var(--thema-warm); }
.prod__per { font-size: .82rem; color: var(--thema-ink-soft); }

/* --- recensies (Google) --- */
.rev-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1.6rem; }
.rev-score { font-family: var(--thema-font-display); font-size: 2.6rem; line-height: 1; color: var(--thema-primary-deep); }
.rev-meta { color: var(--thema-ink-soft); font-size: .95rem; }
.testimonial__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.testimonial__when { font-size: .8rem; color: var(--thema-ink-soft); }

/* --- openingstijden --- */
.hours { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--thema-line); }
.hours li:last-child { border-bottom: 0; }

/* --- aankondiging --- */
.melding { background: var(--thema-warm); color: var(--thema-on-dark); text-align: center; padding: .7rem 1rem; font-size: .95rem; font-weight: 500; }

/* --- agenda --- */
.agenda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
/* min-width: 0 is hier niet cosmetisch: een 1fr-kolom is standaard zo breed als
   zijn inhoud minimaal nodig heeft, en een lange titel of prijsregel rekt de
   kolom dan op. De foto's kregen daardoor zichtbaar verschillende hoogtes. */
.agenda-card { background: var(--thema-surface); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 0 var(--thema-line); display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 100px; }
.agenda-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--thema-muted); }
/* Absoluut in het kader, niet alleen height: 100%. De aspect-ratio op de
   media-container is een voorkeur, geen plafond: een foto die van zichzelf
   hoger is rekt de container op, en dan krijgen kaarten naast elkaar zichtbaar
   verschillende fotohoogtes. */
.agenda-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.agenda-card__date { position: absolute; top: 1rem; left: 1rem; background: var(--thema-surface); border-radius: var(--radius); padding: .5rem .8rem; text-align: center; line-height: 1; box-shadow: var(--shadow); }
.agenda-card__day { display: block; font-family: var(--thema-font-display); font-size: 1.7rem; font-weight: 600; color: var(--thema-primary-deep); }
.agenda-card__month { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--thema-warm); margin-top: .2rem; }
.agenda-card__body { padding: 1.5rem 1.6rem 1.75rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.agenda-card__meta { font-size: .85rem; color: var(--thema-ink-soft); margin: 0; }
.agenda-card__title { margin: .1rem 0 0; }
.agenda-card__sub { font-family: var(--thema-font-display); font-style: italic; color: var(--thema-warm-deep); margin: 0 0 .5rem; }
.agenda-card__text { font-size: .95rem; color: var(--thema-ink-soft); }
.agenda-card__text p:last-child { margin-bottom: 0; }
.agenda-card__prijs { font-weight: 600; margin: .8rem 0 0; }
.agenda-card__org { font-size: .85rem; color: var(--thema-ink-soft); margin: 0 0 1rem; }
.agenda-card .btn { align-self: flex-start; margin-top: auto; }
.agenda-card--verleden { opacity: .72; }
.agenda-card--verleden .agenda-card__date { background: var(--thema-muted); }
.agenda-card__afgelopen { font-size: .85rem; color: var(--thema-ink-soft); margin: 0; }
.agenda-leeg { background: var(--thema-surface); border-radius: var(--radius); padding: 2rem; max-width: 60ch; }
.agenda-teasers { display: grid; gap: .75rem; }
.agenda-teaser { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 1.2rem; background: var(--thema-surface); border-radius: var(--radius); padding: 1rem 1.25rem; text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s; }
.agenda-teaser:hover { transform: translateX(4px); box-shadow: var(--shadow); color: inherit; }
.agenda-teaser__date { text-align: center; line-height: 1; }
.agenda-teaser__day { display: block; font-family: var(--thema-font-display); font-size: 1.7rem; font-weight: 600; color: var(--thema-primary-deep); }
.agenda-teaser__month { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--thema-warm); margin-top: .2rem; }
.agenda-teaser__title { display: block; font-family: var(--thema-font-display); font-size: 1.25rem; font-weight: 500; color: var(--thema-primary-deep); }
.agenda-teaser__meta { display: block; font-size: .85rem; color: var(--thema-ink-soft); }
.agenda-teaser__arrow { color: var(--thema-warm); font-size: 1.3rem; }

/* --- info-blokken (openingstijden, contactpersonen) --- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.info { background: var(--thema-surface); border-radius: var(--radius); padding: 1.6rem 1.75rem; }
.info h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.info p { margin-bottom: .5rem; }
.info__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--thema-warm); font-weight: 600; display: block; margin-bottom: .3rem; }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; align-items: center; background: var(--thema-surface); border-radius: var(--radius); padding: 1.25rem; }
.person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.person h3 { margin-bottom: .2rem; font-size: 1.25rem; }
.person p { margin-bottom: .2rem; font-size: .95rem; }

/* --- faq --- */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--thema-line); padding: .3rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--thema-line); }
.faq summary { cursor: pointer; padding: .9rem 2.2rem .9rem 0; font-weight: 600; list-style: none; position: relative; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .2rem; top: .7rem; font-family: var(--thema-font-display); font-size: 1.6rem; color: var(--thema-warm); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--thema-ink-soft); margin: 0 0 1rem; max-width: 62ch; }

/* --- cta band --- */
.cta { border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; background: var(--thema-primary-deep); color: var(--thema-on-dark); position: relative; overflow: hidden; }
.cta h2 { color: var(--thema-on-dark); margin-bottom: .4rem; }
.cta p { color: var(--thema-on-dark-soft); margin-bottom: 0; }
.cta .btn-row { justify-content: flex-end; }
.cta--bread { background: var(--thema-warm-deep); }
.cta--bread p { color: var(--thema-on-dark-soft); }
.cta--sand { background: var(--thema-muted); color: var(--thema-ink); }
.cta--sand h2 { color: var(--thema-primary-deep); }
.cta--sand p { color: var(--thema-ink-soft); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } .cta .btn-row { justify-content: flex-start; } }

/* --- kosten (stichting) --- */
.kosten { width: 100%; border-collapse: collapse; max-width: 560px; font-size: .97rem; }
.kosten td { padding: .55rem 0; border-bottom: 1px solid var(--thema-line); }
.kosten td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kosten tr.totaal td { font-weight: 600; border-bottom: 2px solid var(--thema-primary); }
.kosten tr.res td { color: var(--thema-ink-soft); }
.stat { display: grid; gap: .2rem; }
.stat__n { font-family: var(--thema-font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--thema-warm); line-height: 1; }
.stat__l { font-size: .85rem; color: var(--thema-ink-soft); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin: 2rem 0; }

/* --- formulieren --- */
.form { background: var(--thema-surface); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 1px 0 var(--thema-line); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.form__grid .field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field label small { font-weight: 400; color: var(--thema-ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; padding: .75em .9em; border: 1.5px solid var(--thema-line); border-radius: var(--radius); background: var(--thema-canvas); color: var(--thema-ink); width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--thema-primary); box-shadow: 0 0 0 3px var(--thema-focus-ring); }
.field textarea { min-height: 120px; resize: vertical; }
.field--hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.form__note { font-size: .85rem; color: var(--thema-ink-soft); margin: 0; }
.form-status { font-size: .95rem; margin: 0; }
.form-status--fout { color: var(--thema-danger); font-weight: 600; }
.form-succes { background: var(--thema-surface); border-radius: var(--radius); padding: 2.5rem; text-align: center; border: 2px solid var(--thema-highlight); }
.form-succes__check { width: 56px; height: 56px; border-radius: 50%; background: var(--thema-primary); color: var(--thema-on-primary); display: grid; place-items: center; margin: 0 auto 1rem; font-size: 1.6rem; }
.form-succes h2 { margin-bottom: .4rem; }
.event-banner { background: var(--thema-surface); border-radius: var(--radius); padding: 1.5rem 1.75rem; display: grid; grid-template-columns: 72px 1fr; gap: 1.25rem; align-items: center; margin-bottom: 2rem; }
.event-banner__date { text-align: center; line-height: 1; }
.event-banner__date b { display: block; font-family: var(--thema-font-display); font-size: 2rem; font-weight: 600; color: var(--thema-primary-deep); }
.event-banner__date span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--thema-warm); margin-top: .2rem; }
.event-banner p { margin: 0; }
.event-banner strong { display: block; font-family: var(--thema-font-display); font-size: 1.3rem; }

/* --- footer --- */
.site-footer { background: var(--thema-primary-deep); color: var(--thema-on-dark-soft); margin-top: 2rem; }
.site-footer a { color: var(--thema-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--thema-highlight); }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; padding: 4rem 0 2.5rem; }
.site-footer__brand img { width: 64px; height: 64px; margin-bottom: .8rem; }
.site-footer__name { font-family: var(--thema-font-display); font-size: 1.5rem; color: var(--thema-on-dark); margin: 0; }
.site-footer__tag { font-family: var(--thema-font-display); font-style: italic; color: var(--thema-highlight); margin: 0 0 1rem; }
.site-footer__adres { font-size: .95rem; line-height: 1.5; }
.site-footer__h { font-family: var(--thema-font-text); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--thema-highlight); margin-bottom: .9rem; }
.site-footer__list { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.site-footer__list li { margin-bottom: .5rem; }
.site-footer__social { display: flex; gap: .8rem; margin-top: 1.2rem; }
.site-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--thema-on-dark-faint); }
.site-footer__social a:hover { border-color: var(--thema-highlight); }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; padding: 1.25rem 0 2rem; border-top: 1px solid var(--thema-on-dark-faint); font-size: .85rem; }
.site-footer__bottom p { margin: 0; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* --- diversen --- */
.notice { background: var(--thema-muted); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: .95rem; }
.eyebrow-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.eyebrow-list li { background: var(--thema-muted); border-radius: var(--radius); padding: .35em .9em; font-size: .85rem; font-weight: 500; }
.section--forest .eyebrow-list li { background: var(--thema-on-dark-faint); color: var(--thema-on-dark); }
.page-404 main { min-height: 60vh; display: grid; place-items: center; text-align: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.card > img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* --- mobiel fijnslijpen --- */
@media (max-width: 600px) {
  .hero { min-height: min(78vh, 700px); }
  .hero--short { min-height: min(60vh, 520px); }
  .hero__inner { padding: 3rem 0 2.5rem; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .stat__n { font-size: 1.9rem; }
  .stat__l { font-size: .78rem; }
  .event-banner { grid-template-columns: 1fr; gap: .75rem; padding: 1.25rem; }
  .event-banner__date { display: flex; align-items: baseline; gap: .4rem; text-align: left; }
  .event-banner__date b { font-size: 1.6rem; }
  .event-banner__date span { margin: 0; }
  .split__media--stack { gap: .75rem; }
  .split__media--stack img:nth-child(2) { margin-top: 1.5rem; }
  .cta { padding: 1.6rem; }
  .form { padding: 1.25rem; }
  .agenda-teaser { grid-template-columns: 52px 1fr auto; gap: .8rem; padding: .9rem 1rem; }
  .agenda-teaser__title { font-size: 1.1rem; }
  .site-footer__grid { padding: 3rem 0 2rem; }
  .kosten { font-size: .9rem; }
  .prose blockquote { font-size: 1.15rem; }
  .quote-band blockquote { font-size: 1.45rem; }
}

/* ==== Winkelopmaak (body.thema--winkel, de rijenweergave) ===================================
   Voorstel A van Winkel Wonkel (docs/plans/PLAN_WINKELWONKEL_HOMEPAGE.md): compacte panelen op
   het canvas, een gouden lijntje onder elke kop, en eigen rondingen (paneel 12, tegel 10, knop
   en zoekveld 8, productfoto 6, label 4). Alleen kleurtokens, zoals overal in dit bestand. */
.lijn { display: block; width: 72px; height: 2px; background: var(--thema-highlight); }
.thema--winkel { --radius: 8px; --radius-paneel: 12px; --radius-tegel: 10px; --radius-foto: 6px; font-size: 16px; }
.thema--winkel h1 em, .thema--winkel h2 em { font-style: italic; font-weight: 500; color: var(--thema-highlight); }
.thema--winkel .section, .thema--winkel .section--tight { padding: 0; margin-top: 56px; background: none; }
.thema--winkel main > .section:first-child, .thema--winkel main > .section--tight:first-child { margin-top: 24px; }
.thema--winkel main { padding-bottom: 8px; }
.thema--winkel .wrap { width: min(1128px, 100% - 2rem); }
.thema--winkel .section__head { margin-bottom: 22px; max-width: none; }
.thema--winkel .section__head h2 { font-size: 30px; font-weight: 600; margin: 0 0 10px; }
.thema--winkel .btn { border-radius: var(--radius); font-size: 15px; padding: 13px 20px; }
.thema--winkel .btn-outline { border-color: var(--thema-line); }
.thema--winkel .btn-outline:hover { background: var(--thema-muted); color: var(--thema-primary); }
.thema--winkel .btn:hover { transform: none; }
.paneel, .welkom, .keuze, .verhaal, .feiten { background: var(--thema-surface); border: 1px solid var(--thema-line); border-radius: var(--radius-paneel, var(--radius)); box-shadow: 0 8px 28px var(--thema-shadow-soft); }

/* Winkelkop: logo, zoekbalk en mandje; eronder de schappen. */
.winkel-kop { background: var(--thema-surface); border-bottom: 1px solid var(--thema-line); position: relative; z-index: 50; }
.winkel-kop__balk { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.winkel-kop__logo img { display: block; height: 58px; width: auto; }
.winkel-kop__logo { text-decoration: none; color: var(--thema-primary-deep); flex: none; }
.winkel-kop .kop-zoek__form { flex: 1; max-width: 600px; margin-left: auto; }
.winkel-kop__mandje { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--thema-primary); border: 1px solid var(--thema-line); border-radius: var(--radius); padding: 9px 12px; text-decoration: none; background: var(--thema-surface); flex: none; }
.winkel-kop__mandje svg { width: 18px; height: 18px; }
.winkel-kop__mandje:hover { border-color: var(--thema-primary); color: var(--thema-primary); }
.winkel-schappen { border-top: 1px solid var(--thema-line); }
.winkel-schappen__rij { display: flex; gap: 26px; padding-block: 11px; font-size: 15px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.winkel-schappen__rij::-webkit-scrollbar { display: none; }
.winkel-schappen a { color: var(--thema-ink); text-decoration: none; }
.winkel-schappen a:hover, .winkel-schappen a[aria-current="page"] { color: var(--thema-primary); text-decoration: underline; text-decoration-color: var(--thema-highlight); text-underline-offset: 5px; }
.winkel-schappen__rechts { margin-left: auto; display: flex; gap: 22px; }
.winkel-schappen__rechts a { color: var(--thema-primary); font-weight: 600; }
@media (max-width: 820px) {
  .winkel-kop__balk { flex-wrap: wrap; gap: 10px 16px; padding-block: 12px; min-height: 0; }
  .winkel-kop__logo img { height: 46px; }
  .winkel-kop__mandje { margin-left: auto; }
  .winkel-kop .kop-zoek__form { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .winkel-schappen__rij { gap: 20px; font-size: 14px; }
  .winkel-schappen__rechts { margin-left: 0; }
}

/* Zoekbalk en suggesties (static/js/webshop/winkel-zoeksuggesties.js). */
.kop-zoek__form { position: relative; }
.kop-zoek__veld { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border: 1px solid var(--thema-line); border-radius: var(--radius); background: var(--thema-surface); color: var(--thema-ink-soft); }
.kop-zoek__veld:focus-within { outline: 2px solid var(--thema-highlight); outline-offset: 1px; }
.kop-zoek__veld svg { width: 20px; height: 20px; flex: none; }
.kop-zoek__veld input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--thema-ink); }
.kop-zoek__lijst { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--thema-surface); border: 1px solid var(--thema-line); border-radius: var(--radius); box-shadow: 0 14px 34px var(--thema-shadow); padding: 6px; max-height: 70vh; overflow-y: auto; }
.zoek-lijst__kop { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--thema-ink-soft); padding: 10px 10px 4px; }
.zoek-lijst__bedoel { font-size: 14px; color: var(--thema-ink-soft); padding: 8px 10px 2px; }
.zoek-lijst__bedoel b { color: var(--thema-primary); }
.zoek-lijst__snel { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }
.zoek-snel { font-size: 14px; padding: 6px 12px; border: 1px solid var(--thema-line); border-radius: var(--radius-foto, var(--radius)); text-decoration: none; color: var(--thema-ink); background: var(--thema-surface); }
.zoek-snel:hover { border-color: var(--thema-primary); color: var(--thema-primary); }
.zoek-lijst__niets { padding: 14px 12px; font-size: 15px; line-height: 1.55; }
.zoek-lijst__niets a { font-weight: 600; }
.zoek-optie { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 7px 10px; border-radius: var(--radius-foto, var(--radius)); text-decoration: none; color: var(--thema-ink); }
.zoek-optie:hover, .zoek-optie[aria-selected="true"] { background: var(--thema-muted); color: var(--thema-ink); }
.zoek-optie__foto { width: 44px; height: 44px; border-radius: 5px; object-fit: cover; display: block; border: 1px solid var(--thema-line); background: var(--thema-canvas); }
.zoek-optie__tekst b { display: block; font-weight: 600; font-size: 15px; }
.zoek-optie__tekst mark { background: none; color: var(--thema-primary); text-decoration: underline; text-decoration-color: var(--thema-highlight); text-underline-offset: 3px; }
.zoek-optie__tekst small { color: var(--thema-ink-soft); font-size: 13px; }
.zoek-optie__prijs { font-weight: 600; font-size: 14px; white-space: nowrap; }
.zoek-optie__prijs--volgt { font-weight: 400; font-style: italic; color: var(--thema-ink-soft); }

/* Welkomblok: foto met het bolletje, tekst met label, kop, lijn en knoppen. */
.welkom { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; }
.welkom__media { position: relative; min-height: 520px; }
.welkom__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; }
.welkom__tekst { padding: 52px 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.welkom__label { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--thema-primary); border: 1px solid var(--thema-line); border-radius: 4px; padding: 4px 10px; }
.welkom__kop { font-size: clamp(34px, 4.2vw, 50px); line-height: 1.08; font-weight: 600; margin: 0; }
.welkom__body p { font-size: 17px; line-height: 1.65; color: var(--thema-ink-soft); max-width: 30em; margin: 0 0 18px; }
.welkom__body p:last-child { margin-bottom: 0; }
.welkom .btn-row { gap: 10px; margin-top: 6px; }
.welkom__naam { font-family: var(--thema-font-display); font-style: italic; color: var(--thema-highlight); font-size: 20px; margin: 0; }
.welkom-bolletje { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 999px; background: var(--thema-surface); border: 1px solid var(--thema-line); box-shadow: 0 6px 20px var(--thema-shadow-soft); color: var(--thema-ink); font: inherit; text-align: left; }
button.welkom-bolletje { cursor: pointer; }
button.welkom-bolletje:focus-visible { outline: 2px solid var(--thema-highlight); outline-offset: 3px; }
.welkom-bolletje__rond { position: relative; width: 74px; height: 74px; border-radius: 50%; overflow: hidden; border: 2px solid var(--thema-highlight); flex: none; display: block; }
.welkom-bolletje__rond img, .welkom-bolletje__rond video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.welkom-bolletje__speel { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--thema-primary); color: var(--thema-on-primary); }
.welkom-bolletje__speel svg { width: 16px; height: 16px; }
.welkom-bolletje--geluid .welkom-bolletje__speel { display: none; }
.welkom-bolletje__tekst b { display: block; font-family: var(--thema-font-display); color: var(--thema-primary); font-size: 16px; font-weight: 600; }
.welkom-bolletje__tekst span { font-size: 13px; color: var(--thema-ink-soft); }

/* Categorietegels en kleine productkaarten. */
.section__head--rij { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.section__meer { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tegel { display: block; overflow: hidden; border-radius: var(--radius-tegel, var(--radius)); border: 1px solid var(--thema-line); background: var(--thema-surface); text-decoration: none; color: inherit; transition: border-color .15s; }
.tegel:hover { border-color: var(--thema-primary); color: inherit; }
.tegel:focus-visible { outline: 2px solid var(--thema-highlight); outline-offset: 3px; }
.tegel__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tegel__img--leeg { background: var(--thema-muted); }
.tegel__tekst { display: block; padding: 14px 16px 18px; }
.tegel__naam { display: block; font-family: var(--thema-font-display); font-size: 20px; font-weight: 600; color: var(--thema-primary); line-height: 1.2; margin-bottom: 4px; }
.tegel__uitleg { display: block; font-size: 14px; color: var(--thema-ink-soft); line-height: 1.5; }
.nieuw-rij { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.nieuw-prod { display: block; text-decoration: none; color: inherit; }
.nieuw-prod:focus-visible { outline: 2px solid var(--thema-highlight); outline-offset: 3px; }
.nieuw-prod__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-foto, var(--radius)); border: 1px solid var(--thema-line); background: var(--thema-canvas); display: block; }
.nieuw-prod__img--leeg { background: var(--thema-muted); }
.nieuw-prod__naam { display: block; font-family: var(--thema-font-display); font-weight: 600; font-size: 17px; color: var(--thema-primary); line-height: 1.25; margin: 10px 0 2px; hyphens: auto; }
.nieuw-prod__prijs { display: flex; gap: 8px; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--thema-ink); }
.nieuw-prod__prijs small { font-weight: 400; color: var(--thema-ink-soft); font-size: 12px; }
.nieuw-prod__prijs--volgt { font-weight: 400; font-style: italic; color: var(--thema-ink-soft); }

/* Wie kiest: portret, citaat en de gekozen producten klein ernaast. */
.keuze { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 36px 40px; align-items: center; }
.keuze__portret { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.keuze h2 { font-size: 28px; font-weight: 600; margin: 0 0 12px; }
.keuze .lijn { margin-bottom: 16px; }
.keuze__citaat { margin: 0 0 18px; font-family: var(--thema-font-display); font-size: 22px; line-height: 1.45; color: var(--thema-ink); }
.keuze__producten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 420px; }

/* Verhaal: foto links, tekst rechts, de cursieve naam als ondertekening. */
.verhaal { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.verhaal__foto { width: 100%; height: 100%; min-height: 380px; object-fit: cover; object-position: center 15%; display: block; }
.verhaal__tekst { padding: 40px 44px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.verhaal__tekst h2 { font-size: 28px; font-weight: 600; margin: 0; }
.verhaal__tekst p { margin: 0; line-height: 1.65; color: var(--thema-ink-soft); }
.verhaal__tekst p > em:only-child { font-family: var(--thema-font-display); color: var(--thema-highlight); font-size: 20px; }

/* Rij kaarten als één smal paneel. */
.feiten { display: grid; grid-template-columns: repeat(3, 1fr); }
.feit { padding: 22px 26px; border-right: 1px solid var(--thema-line); }
.feit:last-child { border-right: 0; }
.feit h3 { font-family: var(--thema-font-display); font-weight: 600; color: var(--thema-primary); font-size: 18px; margin: 0 0 4px; }
.feit h3 a { color: inherit; }
.feit p { font-size: 14px; color: var(--thema-ink-soft); line-height: 1.5; margin: 0; }

/* Recensies in de winkel. */
.rev-sterren { color: var(--thema-highlight); letter-spacing: 2px; }
.rev-score-winkel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.rev-score-winkel strong { font-family: var(--thema-font-display); font-size: 34px; color: var(--thema-primary); line-height: 1; }
.rev-score-winkel .rev-sterren { font-size: 20px; }
.rev-score-winkel span:last-child { font-size: 14px; color: var(--thema-ink-soft); }
.rev-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rev-kaart { margin: 0; background: var(--thema-surface); border: 1px solid var(--thema-line); border-radius: var(--radius-tegel, var(--radius)); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.rev-kaart blockquote { margin: 0; flex: 1; font-size: 15px; line-height: 1.6; color: var(--thema-ink); }
.rev-kaart figcaption { display: flex; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid var(--thema-line); }
.rev-kaart__init { width: 34px; height: 34px; border-radius: 50%; background: var(--thema-muted); color: var(--thema-primary); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.rev-kaart b { display: block; font-size: 14px; }
.rev-kaart small { color: var(--thema-ink-soft); font-size: 12px; }
.rev-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.rev-voet > a:first-child { font-size: 15px; font-weight: 600; text-decoration: none; }

/* Voet in de winkel: licht, met de tagline cursief in goud. */
.thema--winkel .site-footer { background: var(--thema-surface); color: var(--thema-ink-soft); border-top: 1px solid var(--thema-line); margin-top: 56px; }
.thema--winkel .site-footer a { color: var(--thema-ink); }
.thema--winkel .site-footer__brand img { display: none; }
.thema--winkel .site-footer__name, .thema--winkel .site-footer__h { color: var(--thema-primary); font-family: var(--thema-font-display); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.thema--winkel .site-footer__tag { font-family: var(--thema-font-display); font-style: italic; color: var(--thema-highlight); font-size: 16px; letter-spacing: 0; text-transform: none; }
.thema--winkel .site-footer__bottom { border-top: 1px solid var(--thema-line); color: var(--thema-ink-soft); }

/* Diepte (13 okt 2026, Joeke: "te plat ... ik mis de human touch, een schaduwtje, een
   verdieping"; gekozen: variant 4 "kaarten met rand" uit diepte.html, zonder scheve afdrukken).
   Warme schaduwen gestapeld uit de inkt-tokens; wat je kunt pakken komt omhoog. */
.thema--winkel {
  --diepte-rust: 0 1px 2px var(--thema-shadow-soft), 0 8px 18px -10px var(--thema-shadow), 0 8px 18px -10px var(--thema-shadow);
  --diepte-op: 0 2px 4px var(--thema-shadow-soft), 0 20px 32px -14px var(--thema-shadow), 0 20px 32px -14px var(--thema-shadow), 0 20px 32px -14px var(--thema-shadow);
  --diepte-paneel: 0 1px 1px var(--thema-shadow-soft), 0 3px 8px var(--thema-shadow-soft), 0 22px 44px -18px var(--thema-shadow), 0 22px 44px -18px var(--thema-shadow);
}
.thema--winkel .welkom, .thema--winkel .keuze, .thema--winkel .verhaal, .thema--winkel .feiten { box-shadow: var(--diepte-paneel); }
.thema--winkel .winkel-kop { box-shadow: 0 1px 0 var(--thema-line), 0 10px 24px -18px var(--thema-shadow), 0 10px 24px -18px var(--thema-shadow); }
.thema--winkel .welkom__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 70%, var(--thema-shadow)); }
.thema--winkel .welkom-bolletje { z-index: 1; box-shadow: 0 2px 4px var(--thema-shadow), 0 16px 34px -10px var(--thema-shadow), 0 16px 34px -10px var(--thema-shadow), 0 16px 34px -10px var(--thema-shadow); }
.thema--winkel .btn-primary { box-shadow: 0 6px 14px -8px var(--thema-primary); }
.thema--winkel .btn-outline { background: var(--thema-surface); box-shadow: 0 4px 10px -8px var(--thema-shadow), 0 4px 10px -8px var(--thema-shadow); }
.thema--winkel .winkel-kop__mandje { box-shadow: 0 4px 10px -8px var(--thema-shadow), 0 4px 10px -8px var(--thema-shadow); }
.thema--winkel .kop-zoek__veld { box-shadow: 0 1px 2px var(--thema-shadow-soft) inset; }

/* Kaarten met rand: de foto zit erin als in een lijstje. */
.thema--winkel .tegel { padding: 8px 8px 0; box-shadow: var(--diepte-rust); transition: transform .25s var(--ease), box-shadow .25s, border-color .2s; }
.thema--winkel .tegel__img { border-radius: 5px; border: 1px solid var(--thema-line); }
.thema--winkel .tegel__tekst { padding: 12px 8px 16px; }
.thema--winkel .tegel:hover { transform: translateY(-4px); box-shadow: var(--diepte-op); }
.thema--winkel .nieuw-prod { padding: 7px 7px 12px; border: 1px solid var(--thema-line); border-radius: var(--radius); background: var(--thema-surface); box-shadow: var(--diepte-rust); transition: transform .25s var(--ease), box-shadow .25s, border-color .2s; }
.thema--winkel .nieuw-prod:hover { transform: translateY(-3px); border-color: var(--thema-primary); box-shadow: var(--diepte-op); }
.thema--winkel .nieuw-prod__img { border-radius: 4px; }
.thema--winkel .nieuw-prod__naam { margin: 10px 4px 6px; font-size: 16px; min-height: 2.5em; }
/* Prijs als op een winkelbordje: inhoud links, stippellijn, bedrag rechts. */
.thema--winkel .nieuw-prod { display: flex; flex-direction: column; }
.thema--winkel .nieuw-prod__prijs { margin: auto 4px 0; }
.thema--winkel .nieuw-prod__prijs small { order: -1; }
.nieuw-prod__bio { order: -2; width: 21px; height: 14px; flex: none; align-self: center; }
.thema--winkel .nieuw-prod__prijs::before { content: ""; flex: 1; min-width: 12px; border-bottom: 1.5px dotted var(--thema-ink-soft); opacity: .45; transform: translateY(-3px); }
.thema--winkel .keuze__producten { align-items: start; }
.thema--winkel .keuze__portret { box-shadow: var(--diepte-rust); }
.thema--winkel .rev-kaart { box-shadow: var(--diepte-rust); }
.thema--winkel .feiten { background: linear-gradient(var(--thema-surface), var(--thema-canvas)); }
@media (prefers-reduced-motion: reduce) {
  .thema--winkel .tegel, .thema--winkel .nieuw-prod { transition: none; }
  .thema--winkel .tegel:hover, .thema--winkel .nieuw-prod:hover { transform: none; }
}

/* Biologisch keurmerk (_keurmerk.html): een rustig kaartje met blad, onder de knoppen. */
.keurmerk { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; padding: 8px 16px 8px 8px; border: 1px solid var(--thema-line); border-radius: var(--radius); background: var(--thema-canvas); text-decoration: none; color: var(--thema-ink); box-shadow: var(--diepte-rust, none); }
.keurmerk:hover { border-color: var(--thema-primary); color: var(--thema-ink); }
.keurmerk__logo { width: 54px; height: 36px; flex: none; display: block; }
.keurmerk__tekst b { display: block; font-size: 15px; font-weight: 600; color: var(--thema-primary); line-height: 1.25; }
.keurmerk__tekst small { font-size: 13px; color: var(--thema-ink-soft); letter-spacing: .02em; }

@media (max-width: 1000px) { .rev-rij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .welkom { grid-template-columns: 1fr; }
  .welkom__media { min-height: 0; height: 300px; }
  .welkom__tekst { padding: 28px 22px 30px; }
  .welkom-bolletje { left: 12px; bottom: 12px; }
  .welkom-bolletje__rond { width: 58px; height: 58px; }
  .tegels { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tegel__naam { font-size: 17px; }
  .nieuw-rij { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .keuze { grid-template-columns: 1fr; padding: 24px 20px; gap: 22px; }
  .keuze__portret { max-width: 220px; }
  .verhaal { grid-template-columns: 1fr; }
  .verhaal__foto { min-height: 0; height: 260px; }
  .verhaal__tekst { padding: 26px 22px; }
  .feiten { grid-template-columns: 1fr; }
  .feit { border-right: 0; border-bottom: 1px solid var(--thema-line); }
  .feit:last-child { border-bottom: 0; }
  .thema--winkel .section__head--rij { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .rev-rij { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rev-kaart { scroll-snap-align: start; }
}