/* De lettertypes uit de export hebben geen Cyrillisch. Later gedeclareerd = voorrang voor deze tekens,
   zodat Russische tekst schreefloos blijft (systeemletter) in plaats van terug te vallen op een serif.
   Gewichten exact gelijk aan fonts.css: met een bereik (100 900) kiest Chrome deze face ook voor Latijn. */
@font-face { font-family: 'Inter'; font-weight: 400; unicode-range: U+0400-04FF;
	src: local('Inter'), local('Helvetica Neue'), local('HelveticaNeue'), local('Segoe UI'), local('Roboto'), local('Arial'); }
@font-face { font-family: 'Inter'; font-weight: 600; unicode-range: U+0400-04FF;
	src: local('Inter SemiBold'), local('HelveticaNeue-Medium'), local('Segoe UI Semibold'), local('Roboto Medium'), local('Arial'); }
@font-face { font-family: 'Inter Tight'; font-weight: 300; unicode-range: U+0400-04FF;
	src: local('Inter Tight Light'), local('HelveticaNeue-Light'), local('Segoe UI Light'), local('Roboto Light'), local('Arial'); }

/* Taalkeuze (niet in het XD-ontwerp): klein uitklapmenu rechtsonder (plek: zie #44 verderop).
   Dicht alleen de huidige taal, de keuzes klappen naar boven uit. */
.vv-lang {
	position: fixed; right: 16px; bottom: 16px; z-index: 900;
	font: 400 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .04em; color: #897749;
}
.vv-lang summary {
	display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 12px;
	background: #fcf9f6; border: 1px solid #897749; border-radius: 10px;
	cursor: pointer; list-style: none; user-select: none;
	box-shadow: 0 4px 14px rgba(60, 50, 25, .12); transition: background-color .2s;
}
.vv-lang summary::-webkit-details-marker { display: none; }
.vv-lang summary:hover, .vv-lang summary:focus-visible { background: #f3ece2; outline: none; }
.vv-lang summary:focus-visible { box-shadow: 0 0 0 2px #fcf9f6, 0 0 0 4px #897749; }
.vv-lang svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vv-lang .vv-lang-chev { width: 14px; height: 14px; transition: transform .2s; }
.vv-lang[open] .vv-lang-chev { transform: rotate(180deg); }
.vv-lang-list {
	position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 168px;
	display: flex; flex-direction: column; gap: 2px; padding: 4px;
	background: #fcf9f6; border: 1px solid #897749; border-radius: 10px;
	box-shadow: 0 8px 24px rgba(60, 50, 25, .18);
}
.vv-lang-list a {
	display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 7px;
	color: #897749; text-decoration: none; letter-spacing: 0; font-size: 14px;
	transition: background-color .2s, color .2s;
}
.vv-lang-list a b { font-weight: 600; font-size: 11px; letter-spacing: .06em; width: 20px; }
.vv-lang-list a:hover, .vv-lang-list a:focus-visible { background: #e6dccb; outline: none; }
.vv-lang-list a[aria-current] { background: #897749; color: #fcf9f6; }
html.vl-lock .vv-lang, html.m-lock .vv-lang { visibility: hidden; }
@media print { .vv-lang { display: none; } }

/* ---------- Feedbackronde 02-11-2026 (Markup). Nummers = punten in Markup. ---------- */

/* #2 Home: blokjes onder de hero breder, zodat de middelste tekst op twee regels past */
.stage .stat:has(#h9) { left: 1040px !important; width: 320px !important; }
.stage .stat:has(#h7) { left: 1310px !important; width: 320px !important; }
.stage .stat:has(#h13) { left: 1580px !important; width: 270px !important; }
.stage .stat:has(#h9) > .so > .r, .stage .stat:has(#h7) > .so > .r { width: 320px !important; }
.stage .stat:has(#h13) > .so > .r { width: 270px !important; }
#h9, #h10, #h7, #h8, #h13, #h14 { width: 242px !important; }
#h8 { white-space: normal !important; }
/* zelfde blokjes op Proefbos aanvragen */
.stage .stat:has(#pb8) { left: 1080px !important; width: 320px !important; }
.stage .stat:has(#pb6) { left: 1350px !important; width: 320px !important; }
.stage .stat:has(#pb10) { left: 1620px !important; width: 270px !important; }
.stage .stat:has(#pb8) > .so > .r, .stage .stat:has(#pb6) > .so > .r { width: 320px !important; }
.stage .stat:has(#pb10) > .so > .r { width: 270px !important; }
#pb8, #pb9, #pb6, #pb7, #pb10, #pb11 { width: 242px !important; }
#pb7 { white-space: normal !important; }

/* #4 Home: pijl rechts van de carrousel gelijk aan die links */
.car-btn[data-dir="1"] .r { border-radius: 10px !important; }

/* #6 Home (mobiel): tekst onder 'De kracht van Vivanti' */
.m-kracht-txt { margin-bottom: 8px; }

/* #10 Home: Instagram-tegel met likes en reacties */
.ig-i { width: .62em; height: .62em; margin-right: .22em; vertical-align: -.04em; overflow: visible; }
.m-tg-n b .ig-i { width: .6em; height: .6em; }

/* #11 WhatsApp-knop weg zodra de footer in beeld is */
.wa, .m-wa { transition: opacity .35s ease, visibility .35s ease; }
html.vv-foot .wa, html.vv-foot .m-wa { opacity: 0; visibility: hidden; pointer-events: none !important; }

/* #13–16 Assortiment: tekst in uitgeklapte kaarten loopt niet meer uit de kaart */
.stage .card .ctx { white-space: pre-wrap !important; }

/* #19 Verzorgingstips: foto wisselt per stap */
.stp-photos > img.stp-ph { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.stp-photos > img.stp-ph.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stp-photos > img.stp-ph { transition: none; } }

/* #20 Formulieren: tekst verticaal midden in de velden */
input.field.vf { padding-bottom: 0; }

/* #21–23 Contact: telefoon, e-mail, adres en Instagram klikbaar */
.vv-link { color: inherit; text-decoration: none; transition: opacity .2s ease; }
.vv-link:hover, .vv-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
a.soc-link { cursor: pointer; }
a.soc-link > * { position: absolute; }
a.soc-link .r { transition: background-color .3s ease; }
a.soc-link .ic { transition: color .3s ease; }
a.soc-link:hover .r, a.soc-link:focus-visible .r { background: #897749; }
a.soc-link:hover .ic, a.soc-link:focus-visible .ic { color: #ffffff !important; }
.m-social a { transition: background-color .3s ease, color .3s ease; }

/* #24 Banner offerte/proefbos: verloop zit in de foto en groeit mee */
.img.hero-in > .grad.in-hero { position: absolute; z-index: 1; transition: none; }

/* #25 Proefbos: witte achtergrond van de bloemfoto's niet zichtbaar bij hover */
.tile .ti { mix-blend-mode: multiply; }

/* ---------- Markup mobiel/tablet (02-11-2026) ---------- */
/* #27 Home mobiel: knop Verzorgingstips uit de hero (te vol) */
@media (max-width: 767.98px) { .m-hero .m-btns .m-btn[href*="verzorgingstips"] { display: none; } }

/* #39 Meer ruimte tussen header en hero-afbeelding */
@media (max-width: 1279.98px) {
  .m-hero { padding-top: 12px; }
  .m-hero-card { height: calc(100svh - 68px - 24px); }
}
@media (min-width: 768px) and (max-width: 1279.98px) { .m-hero-card { height: calc(100svh - 84px - 32px); } }

/* #28 Mobiel: 100px tussen de blokken */
@media (max-width: 767.98px) { .m-sec { padding: 50px 0; } }

/* #29 Processtappen: kleinere iconen, bovenkant gelijk met de titel */
.m-steps .i { width: 34px; height: 34px; margin-top: 6px; }
.m-steps li { grid-template-columns: 40px 1fr; }
@media (min-width: 768px) { .m-steps li { grid-template-columns: 1fr; } }

/* #35 / #42 Ruimte tussen dubbele lijn en eerste stap gelijk aan die erboven (36px) */
.m-steps li:first-child { padding-top: 36px; }
@media (min-width: 768px) { .m-steps li { padding-top: 36px; } }

/* #30 / #40 Instagram-tegels als slider op mobiel en tablet */
@media (max-width: 1099.98px) {
  .m-tiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .m-tiles::-webkit-scrollbar { display: none; }
  .m-tiles > * { flex: 0 0 72%; scroll-snap-align: start; }
  .m-tiles .m-img, .m-tiles .m-img:last-child { aspect-ratio: 1 / 1; }
  .m-tile-g { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 0 16px; aspect-ratio: 1 / 1;
    background: var(--groen); border-radius: var(--r); color: #fff; padding: 22px 18px; }
  .m-tile-g .m-tg { background: none; padding: 0; border-radius: 0; }
  .m-tile-g .m-tg-t { margin: 14px 0 0; padding: 0; font-size: 14px; line-height: 1.6; }
}
@media (min-width: 768px) and (max-width: 1099.98px) { .m-tiles > * { flex-basis: 40%; } }

/* #31 Onderste regel footer niet meer achter WhatsApp-knop en taalkeuze */
@media (max-width: 1279.98px) { .m-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* #32 Verticale streep tussen Disclaimer, Algemene voorwaarden en Privacy */
.m-foot-legal nav { gap: 6px 0; }
.m-foot-legal nav a + a::before { content: "|"; display: inline-block; padding: 0 10px; opacity: .7; }
/* Cookie-instellingen (vervangt het vaste cookie-icoon): op mobiel een eigen regel, zonder streep ervoor */
@media (max-width: 767.98px) {
  .m-foot-legal nav a[href="#cookie-instellingen"] { flex-basis: 100%; }
  .m-foot-legal nav a[href="#cookie-instellingen"]::before { content: none; }
}

/* #33 / #41 Assortiment: filterknoppen links uitgelijnd, keuzelijst opent naar rechts */
.m-filter { justify-content: flex-start; }
.m-fpop { left: 0; right: auto; }

/* #36 Over ons: telefoon voluit, e-mail alleen icoon, alle drie naast elkaar; grotere iconen */
.vv-cbtns { flex-wrap: nowrap; }
.vv-cbtns .m-btn .i { width: 15px; height: 15px; }
@media (max-width: 767.98px) {
  .vv-cbtns .vv-mail { width: 48px; padding: 0; justify-content: center; }
  .vv-cbtns .vv-mail span { display: none; }
  .vv-cbtns .m-btn[href^="tel:"] { white-space: nowrap; }
}

/* #37 Over ons: witte afsluitende band heeft ook bovenaan afgeronde hoeken */
.m-band--r.m-last { border-radius: var(--r-lg); }

/* #38 Menu: knop Proefbos aanvragen weg (staat al tussen de menu-items) */
.m-nav-cta a[href*="proefbos"] { display: none; }

/* Mobiel: taalkeuze (vast linksonder) valt niet meer over de introtekst in de hero */
@media (max-width: 767.98px) { .m-hero-in { padding-bottom: 64px; } }

/* Taalkeuze weg zodra de footer in beeld is (valt anders over de slogan en de juridische links) */
.vv-lang { transition: opacity .35s ease, visibility .35s ease; }
html.vv-foot .vv-lang { opacity: 0; visibility: hidden; pointer-events: none; }

/* Contact (tablet): drie infoblokken te smal - twee naast elkaar, openingstijden eronder */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .m-cinfo { grid-template-columns: 1fr 1fr; }
  .m-cinfo > div:nth-child(3) { grid-column: span 2; }
}
.m-hours > * { white-space: nowrap; }

/* Tekstpagina (disclaimer, cookie- en privacyverklaring, 404): altijd de responsive opmaak, ook op desktop */
body[data-page="tekst"] .rs { display: block; }
.vv-tekst-intro { padding-bottom: 48px; }
@media (min-width: 768px) { .vv-tekst-intro { padding-bottom: 64px; } }
.vv-prose { max-width: 780px; font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.vv-prose > :first-child { margin-top: 0; }
.vv-prose h2, .vv-prose h3 { font-family: 'Ramillas', Georgia, serif; font-weight: 300; text-transform: uppercase; color: var(--goud); line-height: 1.15; letter-spacing: 0; }
.vv-prose h2 { font-size: clamp(24px, 5vw, 32px); margin: 1.8em 0 .5em; }
.vv-prose h3 { font-size: clamp(19px, 3.6vw, 23px); margin: 1.6em 0 .4em; }
.vv-prose h4 { font-size: 16px; font-weight: 500; margin: 1.4em 0 .3em; }
.vv-prose p, .vv-prose ul, .vv-prose ol, .vv-prose table { margin: 0 0 1.1em; }
.vv-prose ul, .vv-prose ol { padding-left: 1.25em; }
.vv-prose li + li { margin-top: .35em; }
.vv-prose strong, .vv-prose b { font-weight: 500; }
.vv-prose a:not(.m-btn) { color: var(--goud); text-decoration: underline; text-underline-offset: 3px; }
.vv-prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; display: block; overflow-x: auto; }
.vv-prose th, .vv-prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(137, 119, 73, .25); }
.vv-prose th { font-weight: 500; }
.vv-prose .m-btns { margin-top: 28px; }
.vv-prose .bbc-document-button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--goud); border-radius: 10px; background: var(--goud); color: #fff; font: 300 15px/1.2 'Inter Tight', sans-serif; cursor: pointer; }
.vv-prose .bbc-document-button:hover { background: transparent; color: var(--goud); }
html.m-lock .bbc-icon, html.vl-lock .bbc-icon { visibility: hidden; }

/* #46 Over ons: tekst bij 'Maak kennis met Vivanti' loopt door binnen het tekstvak */
#oo51 { white-space: pre-line !important; }

/* #47 Over ons: tekst onder 'De kracht van Vivanti', zoals op home */
#oo15b { white-space: pre-line !important; }

/* #49 #51 Proefbos en offerte: titel boven het verloop in de bannerfoto */
main.stage .t.ttl { z-index: 5; }

/* #50 Offerte: blokjes onder de hero even breed als op Proefbos aanvragen */
.stage .stat:has(#of8) { left: 1080px !important; width: 320px !important; }
.stage .stat:has(#of6) { left: 1350px !important; width: 320px !important; }
.stage .stat:has(#of10) { left: 1620px !important; width: 270px !important; }
.stage .stat:has(#of8) > .so > .r, .stage .stat:has(#of6) > .so > .r { width: 320px !important; }
.stage .stat:has(#of10) > .so > .r { width: 270px !important; }
#of8, #of9, #of6, #of7, #of10, #of11 { width: 242px !important; }
#of7 { white-space: normal !important; }

/* Desktop footer: juridische links rechts uitgelijnd op de rand van de inhoud (1890px) in plaats van erbuiten (blok is 593.86px breed sinds Cookie-instellingen erbij staat) */
.stage .t:has(> a.vv-link[href*="disclaimer"]) { left: 1296px !important; }

/* #28 Mobiel: overal 100px tussen de blokken (50px boven + 50px onder elke sectie, ook waar de export 0/36/40 had) */
@media (max-width: 767.98px) {
  .rs .m-main .m-sec { padding-top: 50px !important; padding-bottom: 50px !important; }
  .rs .m-hero + .m-sec { padding-top: 100px !important; }
  .rs .m-band--rb { padding-bottom: 0 !important; }
}

/* #44 Taalkeuze rechtsonder (links van de WhatsApp-knop op mobiel/tablet), weg zodra de footer in beeld is.
   Linksonder staat het cookie-icoon. */
.vv-lang { left: auto; right: 16px; bottom: 16px; }
@media (max-width: 1279.98px) { .vv-lang { right: 80px; bottom: calc(24px + env(safe-area-inset-bottom)); } }

/* #3 Home: minder ruimte tussen '12 unieke soorten' en de carrousel, zoals in XD (~80px tot de middelste foto als die open is) */
#h2 { top: 2156px !important; }

/* XD-check: 'De kracht van Vivanti' (home en over ons) op de hoogte uit het XD-ontwerp, tekst met regelhoogte 33px */
#h60 { top: 4998px !important; }
#h60b { top: 5162px !important; line-height: 33px !important; }
#oo15 { top: 4007px !important; }
#oo15b { top: 4171px !important; line-height: 33px !important; }
#h60b, #oo15b { width: 632px !important; }

/* XD-check: uitgeklapt desktopmenu zo breed als de knoppen erboven, letters 21px met 37px regelafstand (zoals in XD) */
.mnav a { font-size: 21px; line-height: 37px; }

/* Fotoplan 03-11-2026: productfoto per soort staat op een wit vlak; uitgeklapt krimpt de bloem mee in plaats van afgesneden te worden */
.stage .card .cimg img[src*="soort-"]{object-fit:contain;background:#fff}

/* Markup-ronde 3 (03-11-2026) */
/* #8 Home desktop: 200px tussen de carrousel en 'Ons proces' (alles daaronder 17px omhoog in templates/home.php) */
/* #39 Mobiel/tablet: meer ruimte tussen header en de hero-foto */
.rs .m-band--zand:has(> .m-hero:first-child) { padding-top: 16px; }

/* Feedback Mariska (04-11-2026) */
/* Carrousel home: geen zwart verloop meer over de kaarten (mobiel; desktop zit in carousel-gl.js / carousel.js) */
.m-slide::after { content: none; }
/* Assortiment: dicht de productfoto, uitgeklapt het sfeerbeeld van de soort (waar de klant er een heeft aangeleverd) */
.cimg .vv-sfeer, .m-img .vv-sfeer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.card.open .cimg .vv-sfeer, .m-card.open .m-img .vv-sfeer { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cimg .vv-sfeer, .m-img .vv-sfeer { transition: none; } }