/* ==========================================================================
   v2: nieuw design van volkera, in de look-and-feel van harsgebonden-grind.nl (Step Stones).
   Alleen actief op body.vk2 (zie inc/v2.php). De kleuren van de bestaande onderdelen komen uit v2-kleur.css
   (gegenereerd); hier staan typografie, header, hero, secties, kaarten, footer en de AI-banner.
   ========================================================================== */

@font-face { font-family: "Outfit"; src: url(../fonts/outfit.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(../fonts/manrope.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

body.vk2 {
	/* kleurschema van volkera (Remco 21 okt): bordeaux, warm bijna-zwart, zand en wit; de namen komen nog uit het palet van
	   harsgebonden-grind.nl (slate = donker, terra = accent, kalk = licht) */
	--v2-slate: #1d1d1b; --v2-slate2: #3b3a38; --v2-slate-d: #1f1d1b;
	--v2-kalk: #d9d4ce; --v2-kalk-l: #F5F1EC; --v2-paper: #ffffff;
	--v2-terra: #7D1C29; --v2-terra-d: #7D1C29; --v2-terra-h: #5E1520; --v2-terra-l: #F0C3C9;
	--v2-stone: #b9b2aa; --v2-ink2: #4a4a4a; --v2-ink3: #8a837c;
	--v2-line: #E6E0D9; --v2-line-l: rgba(255, 255, 255, .14);
	--v2-head: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	--v2-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--v2-r: 6px; --v2-ease: cubic-bezier(.2, .7, .2, 1);
	--v2-sec: clamp(68px, 8vw, 120px);
	background: var(--v2-paper) !important;
	color: var(--v2-slate);
	font-family: var(--v2-sans);
	-webkit-font-smoothing: antialiased;
}
body.vk2 #outer-wrap, body.vk2 #wrap, body.vk2 #main, body.vk2 #content-wrap, body.vk2 .site-main { background: var(--v2-paper); }
body.vk2 .vk { background: var(--v2-paper); font-family: var(--v2-sans); color: var(--v2-ink2); font-size: 17px; line-height: 1.7; }
body.vk2 .vk-w, body.vk2 .vkp-w { max-width: 1320px; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }
body.vk2 ::selection { background: var(--v2-terra-l); color: var(--v2-slate-d); }

/* ---------- typografie ---------- */
body.vk2 .vk h1, body.vk2 .vk h2, body.vk2 .vk h3, body.vk2 .vk h4,
body.vk2 .vkp h1, body.vk2 .vkp h2, body.vk2 .vkp h3, body.vk2 .vkp h4,
body.vk2 .vk-h1, body.vk2 .vk-h2, body.vk2 .vk-h3 { font-family: var(--v2-head) !important; color: var(--v2-slate); letter-spacing: -.02em; }
body.vk2 .vk .vk-h1 { font-size: clamp(40px, 5.2vw, 72px); font-weight: 500; line-height: 1.03; margin: 18px 0 22px !important; }
body.vk2 .vk .vk-h2, body.vk2 .vkp h2 { font-size: clamp(32px, 3.7vw, 52px); font-weight: 500; line-height: 1.08; margin: 14px 0 18px !important; }
body.vk2 .vk .vk-h3, body.vk2 .vk h3 { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
body.vk2 .vk-h1 span, body.vk2 .vk-h2 span, body.vk2 .vkp h2 span, body.vk2 .vkp h1 span { color: var(--v2-terra-d); font-weight: 400; }
body.vk2 .vk-lead { font-size: 18px; line-height: 1.65; color: var(--v2-ink2); }
body.vk2 .vk p { color: var(--v2-ink2); }
body.vk2 .vk strong { color: var(--v2-slate); font-weight: 700; }

/* eyebrow: klein label met een gestapeld tegelicoon (terra, lijn, steen), zoals harsgebonden-grind.nl */
body.vk2 .vk-k { font-family: var(--v2-sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--v2-ink2); gap: 12px; }
body.vk2 .vk-k::before { width: 22px; height: 13px; border-radius: 2px; background: linear-gradient(var(--v2-terra) 0 0) 0 0 / 100% 6px no-repeat, linear-gradient(currentColor 0 0) 0 7.5px / 100% 1.5px no-repeat, linear-gradient(var(--v2-stone) 0 0) 0 10px / 100% 3px no-repeat; }
body.vk2 .vk-hero .vk-k, body.vk2 .vk-showtuin .vk-k, body.vk2 .vk-dark .vk-k, body.vk2 .vk2-tb .vk-k, body.vk2 .vk2-ph--foto .vk-k { color: var(--v2-kalk); }

/* ---------- knoppen en links ---------- */
body.vk2 .vk-btn, body.vk2 .vk2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--v2-r) !important; border: 1px solid var(--v2-terra); background: var(--v2-terra); color: #fff !important; font-family: var(--v2-head); font-size: 16px; font-weight: 600; letter-spacing: .01em; text-transform: none; line-height: 1.2; transition: background .3s, color .3s, border-color .3s, transform .3s var(--v2-ease); }
body.vk2 .vk-btn:hover, body.vk2 .vk2-btn:hover { background: var(--v2-terra-h); border-color: var(--v2-terra-h); }
body.vk2 .vk-btn:not(.vk-btn--ghost)::after { content: ""; width: 14px; height: 10px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8.5 1.5 12 5 8.5 8.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8.5 1.5 12 5 8.5 8.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--v2-ease); }
body.vk2 .vk-btn:not(.vk-btn--ghost):hover::after { transform: translateX(4px); }
body.vk2 .vk-btn--ghost { background: transparent; color: var(--v2-slate) !important; border-color: rgba(29, 29, 27, .32); }
body.vk2 .vk-btn--ghost:hover { background: var(--v2-slate); border-color: var(--v2-slate); color: #fff !important; }
body.vk2 .vk-hero .vk-btn--ghost, body.vk2 .vk-showtuin .vk-btn--ghost, body.vk2 .vk-dark .vk-btn--ghost, body.vk2 .vk2-ph--foto .vk-btn--ghost { color: #fff !important; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); }
body.vk2 .vk-hero .vk-btn--ghost:hover, body.vk2 .vk-showtuin .vk-btn--ghost:hover, body.vk2 .vk-dark .vk-btn--ghost:hover, body.vk2 .vk2-ph--foto .vk-btn--ghost:hover { background: #fff; color: var(--v2-slate) !important; border-color: #fff; }
body.vk2 .vk-btn svg, body.vk2 .vk2-btn svg { width: 18px; height: 18px; flex: none; }
body.vk2 .vk-btns { gap: 12px; margin-top: 28px; }
body.vk2 .vk-more, body.vk2 .vk-card__arrow { font-family: var(--v2-head); font-weight: 600; color: var(--v2-slate) !important; border-bottom: 1.5px solid var(--v2-terra); padding-bottom: 3px; }
body.vk2 .vk a:not(.vk-btn):not(.vk-card):not(.vk-tilecard__tuin):not(.vk-mm__link) { text-underline-offset: 3px; }

/* ---------- topbalk ---------- */
.vk2-top { background: var(--v2-slate); color: rgba(217, 212, 206, .86); font: 400 13px/1 var(--v2-sans); position: relative; z-index: 100; }
.vk2-top__w { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.vk2-top strong { color: #fff; font-weight: 700; }
.vk2-top a { color: inherit !important; text-decoration: none !important; }
.vk2-top a:hover { color: #fff !important; }
.vk2-top__r { display: flex; align-items: center; gap: 22px; }
.vk2-top__r > * { display: inline-flex; align-items: center; gap: 7px; }
.vk2-top .vk2-i { width: 14px; height: 14px; color: var(--v2-terra-l); }

/* ---------- header ---------- */
body.vk2 #site-header { background: var(--v2-paper) !important; border-bottom: 1px solid var(--v2-line); box-shadow: none !important; }
body.vk2 .elementor-location-header .e-con { background: transparent !important; box-shadow: none !important; }
body.vk2 #site-header .elementor-element-52a4fda4 > .elementor-element-daff043 { background: transparent !important; box-shadow: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; width: auto !important; align-self: center !important; order: 1; }
body.vk2 #site-header .elementor-element-52a4fda4 > .elementor-element-daff043::after { display: none !important; }
@media (min-width: 1025px) {
	/* rij over de volle breedte, inhoud op 1320 px (de oude header centreerde met marges op logo en winkelwagen) */
	body.vk2 #site-header .elementor-element-52a4fda4 { padding-left: max(clamp(20px, 4vw, 48px), calc((100vw - 1320px) / 2 + 48px)) !important; padding-right: max(clamp(20px, 4vw, 48px), calc((100vw - 1320px) / 2 + 48px)) !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; align-items: center !important; }
	body.vk2 #site-header .elementor-element-52a4fda4 > .elementor-element-85da77f { order: 2; margin-left: auto !important; flex: 0 1 auto !important; padding: 0 !important; }
	body.vk2 #site-header .elementor-element-52a4fda4 > .tile-catalog-header-cart { order: 3; margin: 0 0 0 14px !important; }
	body.vk2 .vk-mm { display: flex; align-items: center; gap: 14px; }
	body.vk2 .vk-mm__drawer { flex: 0 0 auto !important; min-width: auto !important; }
	html.vk-scrolled body.vk2 #site-header .elementor-element-52a4fda4 > .elementor-element-daff043 { height: auto !important; box-shadow: none !important; }
}
@media (min-width: 1025px) {
	body.vk2 #site-header .elementor-element-52a4fda4 > .elementor-element-daff043 { margin-right: 24px !important; }
	body.vk2 #site-header .vk-mm__link { padding-left: 10px !important; padding-right: 10px !important; font-size: 15px !important; }
}
@media (min-width: 1025px) and (max-width: 1360px) {
	body.vk2 #site-header .vk-mm__link { padding-left: 7px !important; padding-right: 7px !important; font-size: 14px !important; }
}
@media (min-width: 1025px) and (max-width: 1219px) {
	.vk2-hd__cta { display: none !important; }
}
body.vk2 .vk-mm { font-family: var(--v2-head); }
body.vk2 #site-header .vk-mm__link { font-family: var(--v2-head) !important; font-size: 15.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 26px 12px !important; color: var(--v2-slate) !important; }
body.vk2 .vk-mm__link:hover, body.vk2 .vk-mm__item.is-active > .vk-mm__link { color: var(--v2-terra-d) !important; }
body.vk2 .vk-mm__panel { border-top: 1px solid var(--v2-line); box-shadow: 0 24px 50px rgba(20, 18, 16, .14); }
body.vk2 .vk-mm__panel, body.vk2 .vk-mm__inner { background: var(--v2-paper) !important; }
body.vk2 .vk-mm__title { font-family: var(--v2-head); letter-spacing: 0; }
.vk2-hd__cta { display: flex; align-items: center; gap: 18px; flex: none; }
.vk2-hd__tel { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--v2-head); color: var(--v2-slate) !important; text-decoration: none !important; white-space: nowrap; }
.vk2-hd__tel:hover { color: var(--v2-terra-d) !important; }
.vk2-btn--sm { min-height: 42px !important; padding: 0 18px !important; font-size: 15px !important; }
body.vk2 .tile-catalog-header-cart { border-radius: var(--v2-r) !important; }

/* ---------- secties ---------- */
body.vk2 .vk-sec { padding: var(--v2-sec) 0; background: var(--v2-paper); }
body.vk2 .vk-sec--tight { padding: 0; }
body.vk2 .vk-sand { background: var(--v2-kalk-l) !important; }
body.vk2 .vk-dark { background: var(--v2-slate) !important; color: rgba(217, 212, 206, .82); }
body.vk2 .vk-head { margin-bottom: 48px; gap: 40px; }
body.vk2 .vk-head p { color: var(--v2-ink2); font-size: 17px; }

/* hero (homepage, merk, serie): foto over de volle breedte, tekst onderaan links, zoals harsgebonden-grind.nl */
body.vk2 .vk-hero { min-height: clamp(560px, 74vh, 760px); background-color: var(--v2-slate-d); align-items: flex-end; }
body.vk2 .vk-hero--home { min-height: min(calc(100svh - 110px), 900px); }
body.vk2 .vk-hero::before { background: linear-gradient(90deg, rgba(20, 18, 16, .42) 0%, rgba(20, 18, 16, .22) 34%, rgba(20, 18, 16, 0) 62%), linear-gradient(0deg, rgba(20, 18, 16, .18) 0%, rgba(20, 18, 16, 0) 32%); }
body.vk2 .vk-hero .vk-w { padding-top: 140px; padding-bottom: clamp(56px, 7vw, 96px); }
body.vk2 .vk-hero .vk-h1, body.vk2 .vk2-ph--foto .vk-h1 { color: #fff; max-width: 15ch; }
body.vk2 .vk-hero--home .vk-h1 { font-size: clamp(44px, 5.6vw, 78px); max-width: 16ch; }
body.vk2 .vk-hero .vk-h1 span, body.vk2 .vk2-ph--foto .vk-h1 span { color: var(--v2-terra-l); font-weight: 500; display: inline; }
body.vk2 .vk-hero .vk-lead, body.vk2 .vk2-ph--foto .vk-lead { color: rgba(255, 255, 255, .88); max-width: 600px; font-size: 18px; }
body.vk2 .vk-crumbs { font-size: 13px; color: rgba(217, 212, 206, .8); margin-bottom: 26px; }
body.vk2 .vk-crumbs a { color: rgba(217, 212, 206, .8) !important; }
body.vk2 .vk-crumbs a:hover { color: #fff !important; }
body.vk2 .vk-hero .vk-chips span, body.vk2 .vk-hero [class*="chip"]:not([class*="chips"]) { border-radius: 999px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); backdrop-filter: blur(4px); }

/* kerncijfers onder de hero: grote cijfers met een lijn erboven, zoals de cijferstrip van harsgebonden-grind.nl */
body.vk2 .vk-sec--tight.vk-sand { background: var(--v2-paper) !important; padding: clamp(40px, 5vw, 64px) 0 0; }
body.vk2 .vk-facts { border: 0; border-top: 2px solid var(--v2-slate); background: transparent; }
body.vk2 .vk-facts > div { padding: 26px 28px 8px 0; border-right: 1px solid var(--v2-line); margin-right: 28px; }
body.vk2 .vk-facts > div:last-child { border-right: 0; margin-right: 0; }
body.vk2 .vk-facts strong { font-family: var(--v2-head); font-size: clamp(30px, 3vw, 42px); font-weight: 400; letter-spacing: -.02em; color: var(--v2-terra-d); margin-bottom: 10px; }
body.vk2 .vk-facts span { font-size: 14px; color: var(--v2-ink2); line-height: 1.5; display: block; }

/* tekst + beeld */
body.vk2 .vk-split { gap: clamp(40px, 6vw, 96px); }
body.vk2 .vk-split img, body.vk2 .vk-sec img.vk-img { border-radius: var(--v2-r); }
body.vk2 .vk-answer { border: 0; border-left: 3px solid var(--v2-terra); background: transparent; box-shadow: none; padding: 4px 0 4px 24px; font-size: 18px; color: var(--v2-slate); }
body.vk2 .vk-answer__k { color: var(--v2-terra-d); }
body.vk2 .vk-checks li { padding-left: 34px; }
body.vk2 .vk-checks li::before { top: 4px; left: 0; width: 20px; height: 20px; border: 0; border-radius: 50%; transform: none; background: var(--v2-kalk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%237D1C29' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
body.vk2 .vk-showtuin .vk-checks li::before, body.vk2 .vk2-tb .vk-checks li::before { background-color: rgba(217, 212, 206, .12); }

/* ---------- kaarten ---------- */
body.vk2 .vk-cards { gap: 22px; }
body.vk2 .vk-card { border-radius: var(--v2-r); border: 1px solid var(--v2-line); background: #fff; overflow: hidden; }
body.vk2 .vk-card:hover { border-color: rgba(29, 29, 27, .25); box-shadow: 0 18px 40px rgba(20, 18, 16, .1); }
body.vk2 .vk-card__meta { font-family: var(--v2-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--v2-terra-d) !important; }
body.vk2 .vk-card__title { font-family: var(--v2-head) !important; font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: var(--v2-slate) !important; }
body.vk2 .vk-card__foot { border-top-color: var(--v2-line); font-size: 14px; color: var(--v2-ink3); }
body.vk2 .vk-card__foot strong { font-family: var(--v2-head); font-size: 17px; font-weight: 600; color: var(--v2-slate); }
body.vk2 .vk-card--serie .vk-card__img img, body.vk2 .vk-card--link .vk-card__img img { aspect-ratio: 4 / 3; }
body.vk2 .vk-card__counts { color: var(--v2-ink3); }
/* tegelkaart met de link naar de tuinviewer: één geheel met afgeronde hoeken */
body.vk2 .vk-tilecard { border-radius: var(--v2-r); }
body.vk2 .vk-tilecard > .vk-card { border-radius: var(--v2-r) var(--v2-r) 0 0; border-bottom: 0; }
body.vk2 .vk-tilecard__tuin { border-radius: 0 0 var(--v2-r) var(--v2-r); background: var(--v2-kalk-l); border-color: var(--v2-line); font-family: var(--v2-head); font-size: 14px; font-weight: 600; color: var(--v2-slate) !important; padding: 12px; }
body.vk2 .vk-tilecard__tuin svg { color: var(--v2-terra); }
body.vk2 .vk-tilecard__tuin:hover, body.vk2 .vk-tilecard__tuin:focus-visible { background: var(--v2-terra); border-color: var(--v2-terra); color: #fff !important; }
body.vk2 .vk-tilecard__tuin:hover svg { color: #fff; }
body.vk2 .vk-tilecard:hover > .vk-card { box-shadow: none; }
body.vk2 .vk-tilecard:hover { box-shadow: 0 18px 40px rgba(20, 18, 16, .1); }

/* tabbladen en filters als pillen */
body.vk2 .vk-pop__tabs { gap: 8px; }
body.vk2 .vk-pop__tab { border-radius: 999px !important; border: 1px solid var(--v2-line) !important; background: #fff !important; color: var(--v2-slate) !important; font-family: var(--v2-head); font-weight: 600; font-size: 15px; padding: 11px 20px !important; }
body.vk2 .vk-pop__tab.is-active, body.vk2 .vk-pop__tab:hover { background: var(--v2-slate) !important; border-color: var(--v2-slate) !important; color: #fff !important; }

/* tabellen */
body.vk2 .vk table, body.vk2 .vkp table { font-size: 15px; }
body.vk2 .vk table th { font-family: var(--v2-head); font-weight: 600; letter-spacing: 0; }

/* ---------- showtuin (donker) ---------- */
body.vk2 .vk-showtuin { background: var(--v2-slate); color: rgba(217, 212, 206, .82); padding: var(--v2-sec) 0; }
body.vk2 .vk-showtuin .vk-h2 { color: #fff; }
body.vk2 .vk-showtuin .vk-h2 span { color: var(--v2-terra-l); }
body.vk2 .vk-showtuin p, body.vk2 .vk-showtuin li { color: rgba(217, 212, 206, .82); }
body.vk2 .vk-showtuin img { border-radius: var(--v2-r); }
body.vk2 .vk-address { border-top: 1px solid var(--v2-line-l); }
body.vk2 .vk-address__row { border-bottom: 1px solid var(--v2-line-l) !important; }
body.vk2 .vk-address__label { color: var(--v2-terra-l) !important; }

/* ---------- vragen ---------- */
body.vk2 .vk details, body.vk2 .vkp details, body.vk2 .vk-faq__item, body.vk2 .vkp-q { border-radius: var(--v2-r); }
body.vk2 .vk summary, body.vk2 .vkp summary { font-family: var(--v2-head); font-size: 18px; font-weight: 500; color: var(--v2-slate); }

/* ---------- AI-banner (tuinviewer) ---------- */
/* donkere kaart op een lichte sectie: los van het (ook donkere) showtuinblok eronder */
.vk2-tb { background: var(--v2-paper); color: var(--v2-kalk); padding: var(--v2-sec) 0; }
.vk2-tb__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: center; background: var(--v2-slate); border-radius: 12px; padding: clamp(28px, 4.5vw, 72px); box-shadow: 0 30px 70px rgba(20, 18, 16, .2); position: relative; overflow: hidden; }
.vk2-tb__grid::before { content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 195, 201, .16), rgba(240, 195, 201, 0) 70%); pointer-events: none; }
body.vk2 .vk2-tb .vk-h2 { color: #fff; margin-top: 16px !important; }
body.vk2 .vk2-tb .vk-h2 span { color: var(--v2-terra-l); }
body.vk2 .vk2-tb p { color: rgba(217, 212, 206, .82); font-size: 17px; max-width: 520px; }
.vk2-tb__punten { list-style: none; margin: 20px 0 30px !important; padding: 0 !important; display: grid; gap: 10px; }
.vk2-tb__punten li { display: flex; align-items: center; gap: 12px; color: var(--v2-kalk); font-size: 15.5px; margin: 0; }
.vk2-tb__punten .vk2-i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(240, 195, 201, .16); color: var(--v2-terra-l); flex: none; }
.vk2-tb__ba { position: relative; margin: 0; border-radius: var(--v2-r); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); user-select: none; -webkit-user-select: none; background: var(--v2-slate-d); }
.vk2-tb__ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.vk2-tb__na { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.vk2-tb__lijn { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .35); pointer-events: none; }
.vk2-tb__lijn i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.vk2-tb__lijn i::before { content: "\2039\00a0\203A"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 20px/1 var(--v2-sans); color: var(--v2-terra); }
.vk2-tb__ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.vk2-tb__lbl { position: absolute; top: 14px; padding: 5px 11px; border-radius: 999px; font: 700 11px/1.3 var(--v2-sans); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.vk2-tb__lbl--na { left: 14px; background: var(--v2-terra); color: #fff; }
.vk2-tb__lbl--voor { right: 14px; background: rgba(20, 18, 16, .75); color: #fff; }
.vk2-tb__ba figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--v2-slate); font: 600 12.5px/1.3 var(--v2-sans); pointer-events: none; }

/* ---------- tegelpagina ---------- */
body.vk2 .vk-shop-head { background: var(--v2-kalk-l); }
body.vk2 .vk2-ph--foto { position: relative; background-size: cover; background-position: center; background-color: var(--v2-slate-d); color: #fff; min-height: clamp(520px, 66vh, 700px); display: flex; align-items: flex-end; }
body.vk2 .vk2-ph--foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 18, 16, .44) 0%, rgba(20, 18, 16, .24) 36%, rgba(20, 18, 16, 0) 64%), linear-gradient(0deg, rgba(20, 18, 16, .18) 0%, rgba(20, 18, 16, 0) 32%); }
body.vk2 .vk2-ph--foto > .vk-w { position: relative; width: 100%; padding-top: 120px; padding-bottom: clamp(48px, 6vw, 80px); }
body.vk2 .vk2-ph--foto .vk-shop-chip { background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .25) !important; color: rgba(255, 255, 255, .86) !important; border-radius: 999px !important; backdrop-filter: blur(4px); }
body.vk2 .vk2-ph--foto .vk-shop-chip strong { color: #fff !important; }
body.vk2 .vk-shop-chip { border-radius: 999px !important; }
body.vk2 .vkp { background: var(--v2-paper); font-family: var(--v2-sans); }
body.vk2 .vkp-gal img, body.vk2 .vkp-gal__main, body.vk2 .vkp-gal__thumb { border-radius: var(--v2-r) !important; overflow: hidden; }
body.vk2 .vkp-panel h1, body.vk2 .vkp-panel h2 { font-family: var(--v2-head) !important; font-weight: 500 !important; letter-spacing: -.02em; }
body.vk2 .vkp-price, body.vk2 .vkp-price * { font-family: var(--v2-head); }
body.vk2 .vkp-select, body.vk2 .vkp-buy { border-radius: var(--v2-r) !important; overflow: hidden; }
body.vk2 .vkp-buy { background: var(--v2-kalk-l) !important; }
body.vk2 .vkp button, body.vk2 .vkp .button, body.vk2 .vkp [type=submit], body.vk2 .single_add_to_cart_button { border-radius: var(--v2-r) !important; font-family: var(--v2-head) !important; font-weight: 600 !important; letter-spacing: .01em !important; text-transform: none !important; }
body.vk2 .single_add_to_cart_button { background: var(--v2-terra) !important; border-color: var(--v2-terra) !important; min-height: 54px; font-size: 16px !important; }
body.vk2 .single_add_to_cart_button:hover { background: var(--v2-terra-h) !important; }
body.vk2 .vkp-sfeer img, body.vk2 .vkp-story img { border-radius: var(--v2-r); }
body.vk2 .vkp-feat, body.vk2 .vkp-spec, body.vk2 .vkp-sheet { border-color: var(--v2-line) !important; }

/* ---------- footer ---------- */
body.vk2 .vk-footer { background: var(--v2-slate-d); color: rgba(217, 212, 206, .7); font-family: var(--v2-sans); font-size: 14.5px; }
body.vk2 .vk-footer a { color: rgba(217, 212, 206, .86) !important; }
body.vk2 .vk-footer a:hover { color: #fff !important; }
body.vk2 .vk-footer h4, body.vk2 .vk-footer h4 a { font-family: var(--v2-sans) !important; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--v2-terra-l) !important; }
body.vk2 .vk-footer .vk-btn { min-height: 44px; font-size: 15px; }
body.vk2 .vk-footer__bottom { border-top-color: var(--v2-line-l) !important; }

/* ---------- mobiel ---------- */
@media (max-width: 1100px) {
	.vk2-hd__tel { display: none; }
}
@media (max-width: 1023px) {
	.vk2-tb__grid { grid-template-columns: 1fr; }
	body.vk2 .vk-facts { grid-template-columns: 1fr 1fr; }
	body.vk2 .vk-facts > div:nth-child(2) { border-right: 0; margin-right: 0; }
	body.vk2 .vk-facts > div { padding-right: 16px; margin-right: 16px; }
	.vk2-hd__cta .vk2-btn { display: none; }
}
@media (max-width: 767px) {
	.vk2-top__w > span:first-child { display: none; }
	.vk2-top__w { justify-content: center; font-size: 12px; }
	body.vk2 .vk { font-size: 16px; }
	body.vk2 .vk .vk-h1 { font-size: clamp(36px, 10vw, 46px); }
	body.vk2 .vk-hero--home .vk-h1 { font-size: clamp(38px, 10.5vw, 48px); }
	body.vk2 .vk .vk-h2 { font-size: clamp(28px, 8vw, 36px); }
	body.vk2 .vk-hero { min-height: 560px; }
	body.vk2 .vk-hero .vk-w { padding-top: 110px; }
	body.vk2 .vk-btns .vk-btn { flex: 1 1 100%; }
	body.vk2 .vk-facts > div { padding: 20px 12px 6px 0; margin-right: 12px; }
	body.vk2 .vk-facts strong { font-size: 28px; }
	.vk2-tb__lbl { top: 10px; font-size: 10px; }
	.vk2-tb__ba figcaption { left: 10px; bottom: 10px; font-size: 11px; }
}

/* ---------- verfijningen ---------- */
/* vetgedrukt en cijfers op donker */
body.vk2 .vk-showtuin strong, body.vk2 .vk2-tb strong, body.vk2 .vk-dark strong { color: #fff; }
body.vk2 .vk-showtuin .vk-stats strong, body.vk2 .vk-showtuin__proof strong { font-family: var(--v2-head); font-weight: 400; letter-spacing: -.02em; color: var(--v2-terra-l) !important; }
body.vk2 .vk-showtuin__proof { border-radius: var(--v2-r); border-color: var(--v2-line-l) !important; background: rgba(255, 255, 255, .03) !important; }
body.vk2 .vk-stats strong { font-family: var(--v2-head); font-weight: 400; letter-spacing: -.02em; color: var(--v2-terra-d); }
/* pijl in kaarten: alleen een terra pijl */
body.vk2 .vk-card__arrow { border-bottom: 0 !important; padding: 0; color: var(--v2-terra) !important; font-size: 20px; transition: transform .3s var(--v2-ease); }
body.vk2 .vk-card:hover .vk-card__arrow { transform: translateX(4px); }
/* kleuren als ronde tegels, zoals de kleurrondjes van harsgebonden-grind.nl */
body.vk2 .vk-swatches { gap: 28px 20px; }
body.vk2 .vk-swatch { text-align: center; font-family: var(--v2-head); font-weight: 600; font-size: 16px; color: var(--v2-slate) !important; background: transparent !important; border: 0 !important; }
body.vk2 .vk-swatch i { border-radius: var(--v2-r) !important; aspect-ratio: 1 / 1; box-shadow: 0 10px 22px rgba(20, 18, 16, .16), inset 0 0 0 1px rgba(255, 255, 255, .25); margin: 0 auto 14px; transition: transform .4s var(--v2-ease), box-shadow .4s; }
body.vk2 .vk-swatch:hover i { transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 30px rgba(20, 18, 16, .22); }
body.vk2 .vk-swatch small { display: block; font-family: var(--v2-sans); font-weight: 400; font-size: 13px; color: var(--v2-ink3); }
/* tabel */
body.vk2 .vk table thead th, body.vk2 .vk table tr:first-child th { background: var(--v2-slate) !important; color: #fff !important; }
body.vk2 .vk table { border-radius: var(--v2-r); overflow: hidden; }/* footer: licht logo en zustersites */
.vk2-ft-sites { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; padding: 36px 0; margin-top: 40px; border-top: 1px solid var(--v2-line-l); }
.vk2-ft-sites__h { margin: 14px 0 0 !important; font: 700 11.5px/1.4 var(--v2-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--v2-terra-l) !important; }
.vk2-ft-sites ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vk2-ft-sites li { margin: 0; }
.vk2-ft-sites a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border: 1px solid var(--v2-line-l); border-radius: var(--v2-r); text-decoration: none !important; transition: border-color .3s, background .3s; }
.vk2-ft-sites a:hover { border-color: rgba(240, 195, 201, .55); background: rgba(255, 255, 255, .03); }
.vk2-ft-sites strong { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--v2-head); color: #fff !important; }
.vk2-ft-sites strong svg { color: var(--v2-terra-l); flex: none; }
.vk2-ft-sites span { font-size: 13px; line-height: 1.5; color: rgba(217, 212, 206, .7); }
.vk2-ft-sites em { font-style: normal; font-size: 12.5px; color: var(--v2-terra-l); margin-top: auto; padding-top: 4px; }
@media (max-width: 1023px) { .vk2-ft-sites { grid-template-columns: 1fr; } .vk2-ft-sites ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vk2-ft-sites ul { grid-template-columns: 1fr; } }/* labels op de tegelpagina (vkp-kicker) met hetzelfde tegelicoon als de andere labels */
body.vk2 .vkp-kicker { display: inline-flex !important; align-items: center; gap: 12px; font: 700 12px/1.4 var(--v2-sans) !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--v2-ink2) !important; }
body.vk2 .vkp-kicker::before { content: "" !important; flex: none; width: 22px !important; height: 13px !important; border: 0 !important; border-radius: 2px; background: linear-gradient(var(--v2-terra) 0 0) 0 0 / 100% 6px no-repeat, linear-gradient(currentColor 0 0) 0 7.5px / 100% 1.5px no-repeat, linear-gradient(var(--v2-stone) 0 0) 0 10px / 100% 3px no-repeat !important; }
body.vk2 .vk-showtuin .vkp-kicker, body.vk2 .vk-dark .vkp-kicker { color: var(--v2-kalk) !important; }
/* knop naar de tuinviewer in het bestelblok */
body.vk2 .vkp .tile-catalog-purchase-actions a.tile-catalog-garden-preview-button { border-radius: var(--v2-r) !important; border-color: rgba(29, 29, 27, .32) !important; font-family: var(--v2-head) !important; font-size: 15px !important; color: var(--v2-slate) !important; gap: 10px; }
body.vk2 .vkp .tile-catalog-purchase-actions a.tile-catalog-garden-preview-button:hover { background: var(--v2-slate) !important; color: #fff !important; border-color: var(--v2-slate) !important; }/* mobiele header */
@media (max-width: 1024px) {
	body.vk2 .vk2-hd__cta, body.vk2 .vk2-hd__cta .vk2-btn { display: none !important; }
	body.vk2 #site-header .elementor-element-52a4fda4 > .elementor-element-daff043 { min-width: 0 !important; overflow: hidden; }
	body.vk2 #site-header .elementor-element-52a4fda4 > .tile-catalog-header-cart { border-radius: var(--v2-r) !important; }
}
@media (max-width: 767px) {
	.vk2-top__ster { display: none !important; }
	.vk2-top__r { gap: 18px; }
	.vk2-top__w { height: 32px; }
}
@media (max-width: 360px) {
}/* banner buiten .vk (tegelpagina): zelfde kopmaat */
body.vk2 .vk2-tb .vk-h2 { font-family: var(--v2-head) !important; font-size: clamp(32px, 3.6vw, 50px) !important; font-weight: 500 !important; line-height: 1.08 !important; letter-spacing: -.02em; margin: 16px 0 18px !important; }
body.vk2 .vk2-tb p { font-family: var(--v2-sans); line-height: 1.65; }
@media (max-width: 767px) { body.vk2 .vk2-tb .vk-h2 { font-size: clamp(28px, 8vw, 36px) !important; } .vk2-tb__grid { padding: 26px 20px; } }/* oorspronkelijk logo (afbeelding) in de headerbalk, zonder het oude hangende witte blok */
@media (min-width: 1025px) {
	body.vk2 #site-header .elementor-element-16be6a7 img { max-height: 48px !important; width: auto !important; }
}/* lichtere hero (Remco 21 okt: "hero te donker"): zachte tekstschaduw houdt de witte tekst leesbaar */
body.vk2 .vk-hero .vk-h1, body.vk2 .vk2-ph--foto .vk-h1 { text-shadow: 0 2px 6px rgba(20, 18, 16, .28), 0 4px 30px rgba(20, 18, 16, .45); }
body.vk2 .vk-hero .vk-lead, body.vk2 .vk2-ph--foto .vk-lead, body.vk2 .vk-hero .vk-crumbs, body.vk2 .vk2-ph--foto .vk-crumbs, body.vk2 .vk-hero .vk-k, body.vk2 .vk2-ph--foto .vk-k { text-shadow: 0 1px 12px rgba(20, 18, 16, .45); }
/* tekstlogo met drie tegeltjes (bordeaux, zand, steen) */
/* verhoudingen gelijk aan het logo van harsgebonden-grind.nl (Remco 22 okt): merk 2,6em breed, blokje 0,755em, tussenruimte
   0,168em, 0,32em tot de tekst, gewone woordspatie; alles in em, dus het schaalt mee met de lettergrootte */
.vk2-logo { display: inline-flex !important; align-items: center; gap: .32em; text-decoration: none !important; font-family: var(--v2-head); font-size: 22px; letter-spacing: -.01em; white-space: nowrap; line-height: 1; }
.vk2-logo__m { display: inline-grid; flex: 0 0 auto; grid-template-columns: repeat(3, .755em); gap: .168em; }
.vk2-logo__m i { width: .755em; height: .755em; border-radius: .08em; background: #7D1C29; }
.vk2-logo__m i:nth-child(2) { background: #cbb08f; }
.vk2-logo__m i:nth-child(3) { background: #9aa3a6; }
.vk2-logo__w1 { font-weight: 700; color: #1d1d1b; }
.vk2-logo__w2 { font-weight: 400; color: #7D1C29; margin-left: -.12em; }
.vk2-logo--licht .vk2-logo__w1 { color: #fff !important; }
.vk2-logo--licht .vk2-logo__w2 { color: #F0C3C9 !important; }
body.vk2 .vk-footer__contact .vk2-logo { margin-bottom: 20px; font-size: 20px; }
@media (min-width: 1025px) and (max-width: 1360px) { .vk2-logo { font-size: 18px; } }
@media (max-width: 767px) { .vk2-logo { font-size: 16px; } }
@media (max-width: 360px) { .vk2-logo__w2 { display: none; } }
body.vk2 .vk-footer__contact .vk2-logo { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
body.vk2 .vk-footer__contact .vk2-logo__w2 { flex-basis: 100%; margin-left: 2.921em; }

/* rij met chips: geen achtergrond of vervaging (wazige streep door de hero, 27 okt) */
body.vk2 [class*="chips"] { backdrop-filter: none !important; background: none !important; border: 0 !important; }

/* homepage-hero 750 px hoog op desktop, foto showtuin met blauwe lucht (Remco 1 nov) */
@media (min-width: 768px) {
	body.vk2 .vk-hero--home { min-height: 750px; background-position: center 40%; }
}

/* tip / aandachtspunten (Remco 1 nov: schoonmaken, onderhoudsarm is niet onderhoudsvrij) */
body.vk2 .vk-tip { margin-top: 28px; padding: 22px 24px; background: var(--v2-kalk-l); border-left: 3px solid var(--v2-terra); border-radius: 0 var(--v2-r) var(--v2-r) 0; }
body.vk2 .vk-tip__k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--v2-terra); margin-bottom: 6px; }
body.vk2 .vk-tip__t { font-family: var(--v2-head); font-size: 20px; font-weight: 600; color: var(--v2-slate); margin: 0 0 8px; }
body.vk2 .vk-tip p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; }
body.vk2 .vk-tip ul { margin: 0; padding-left: 18px; }
body.vk2 .vk-tip li { margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; }
body.vk2 .vk-tip li:last-child { margin-bottom: 0; }
@media (max-width: 767px) { body.vk2 .vk-tip { padding: 18px 18px; } }

/* rekenhulp: opsluiting is maatwerk (Remco 1 nov) */
body.vk2 .vk-calc .vk-tip--calc { background: #fff; margin-top: 16px; }
.vk-calc .vk-tip--calc { margin-bottom: 20px; } /* ruimte boven de knop (Remco 2 nov) */
body.vk2 .vk-table--calc tr.vk-calc__maatwerk td { color: #6b645d; font-style: italic; }

/* legpatronen met tekening (Remco 1 nov) */
body.vk2 .vk-verband { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
body.vk2 .vk-verband__kaart { margin: 0; background: #fff; border: 1px solid var(--v2-line); border-radius: var(--v2-r); overflow: hidden; }
body.vk2 .vk-verband__svg { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; }
body.vk2 .vk-verband__kaart figcaption { padding: 18px 20px 20px; }
body.vk2 .vk-verband__t { display: block; font-family: var(--v2-head); font-size: 21px; font-weight: 600; color: var(--v2-slate); }
body.vk2 .vk-verband__s { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-terra); margin: 2px 0 10px; }
body.vk2 .vk-verband__kaart p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; }
body.vk2 .vk-verband__f { color: #5f5852; }
@media (max-width: 900px) { body.vk2 .vk-verband { grid-template-columns: 1fr; } }

/* landkaartje vakspecialisten in zwart/wit/grijs; de markers houden hun kleur (Remco 2 nov; andere kaartjes in kleur) */
body.vk2 #vk-vs-map .leaflet-tile-pane { filter: grayscale(1) contrast(1.05) brightness(1.03); }

/* Webshop: benodigdheden in de filterkolom (kopje met Voegmortel en Voegkruisjes) en de overzichten zelf (Remco 3 nov) */
.vk-benod { padding: 2px 0 10px; }
.vk-benod a { text-decoration: none !important; }
.vk-benod .vk-benod__kop { display: flex; align-items: center; padding: 15px 20px; font-family: "Outfit", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #1d1d1b !important; }
.vk-benod .vk-benod__kop--tegels { border-bottom: 1px solid #e4dcd2; }
.vk-benod em { margin-left: auto; margin-right: 22px; font-family: "Outfit", sans-serif; font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #8a837c; }
.vk-benod ul { list-style: none; margin: 0 !important; padding: 0 20px 4px !important; }
.vk-benod li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.vk-benod .vk-benod__sub { display: flex; align-items: center; gap: 10px; padding: 7px 0 7px 14px; font-size: 16px; color: #4a4540 !important; border-left: 2px solid #e4dcd2; }
.vk-benod .vk-benod__kop:hover, .vk-benod .vk-benod__sub:hover, .vk-benod .is-actief { color: #7D1C29 !important; }
.vk-benod .is-actief { font-weight: 700; }
.vk-benod .vk-benod__sub.is-actief { border-left-color: #7D1C29; }
@media (max-width: 1024px) { .vk-filter-closed > .vk-benod { display: none !important; } }
body.vk-shop--benod ul.products li.product .price::after { content: none; }
body.vk-shop.vk-shop--benod ul.products li.product .woo-entry-image a { display: flex !important; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 16px; background: #fff; box-sizing: border-box; }
body.vk-shop.vk-shop--benod ul.products li.product .woo-entry-image img { width: 100% !important; height: 100% !important; object-fit: contain; }
body.vk-shop--benod ul.products li.product .woo-entry-image-secondary, body.vk-shop--benod ul.products .added_to_cart { display: none !important; }
.vk-koop .vk-koop__ok, .vk-koop.added .vk-koop__l { display: none; }
.vk-koop.added .vk-koop__ok { display: inline; }
.vk-koop.loading { opacity: .6; pointer-events: none; }
body.vk2 .vk-koop.added { background: #2f6b3a; border-color: #2f6b3a; color: #fff !important; }
body.vk2 .vk-koop.added svg { color: #fff; }
/* Tegelpagina's (Remco 2 nov): kop met de tekst links en de eigen sfeerfoto rechts, kleiner dan over de hele breedte zodat
   de voeg op de foto minder opvalt. Vanaf 901 px loopt de foto door tot 22 px van de rechterrand, in de eigen verhouding
   (panorama's niet fors bijgesneden), tussen 400 en 608 px hoog. Op mobiel staat de foto (3:2) boven de tekst. */
body.vk2 .vk2-ph--split .vk-h1 { font-size: clamp(44px, 4.6vw, 62px); }
body.vk2 .vk2-ph--split.vk2-ph--lang .vk-h1 { font-size: clamp(34px, 3vw, 44px); }
body.vk2 .vk2-split__fig { margin: 0; }
body.vk2 .vk2-split__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(20, 18, 16, .45); }
@media (min-width: 901px) {
	body.vk2 .vk2-ph--split > .vk-w.vk2-split { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; width: auto; max-width: none; margin-left: max(0px, calc((100% - 1320px) / 2)); margin-right: 0; padding-right: 22px; }
	body.vk2 .vk2-split__fig { justify-self: end; width: 97.5%; }
	body.vk2 .vk2-split__fig img { aspect-ratio: auto; min-height: 400px; max-height: 608px; }
}
@media (max-width: 900px) { body.vk2 .vk2-ph--split > .vk-w.vk2-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } body.vk2 .vk2-split__fig { order: -1; } }
/* de sfeerfoto verderop op de tegelpagina ook met afgeronde hoeken */
body.vk2 .vkp-sfeer__fig, body.vk2 .vkp-sfeer__photo { border-radius: 16px; overflow: hidden; }
/* Kruimelpad op een lichte kop (tegelpagina's, winkel, benodigdheden): goed leesbaar en rood bij aanwijzen, niet wit (Remco 3 nov) */
body.vk2 .vk-shop-head:not(.vk2-ph--foto) .vk-crumbs { color: #6b645d; text-shadow: none; }
body.vk2 .vk-shop-head:not(.vk2-ph--foto) .vk-crumbs a { color: #3b3a38 !important; }
body.vk2 .vk-shop-head:not(.vk2-ph--foto) .vk-crumbs a:hover, body.vk2 .vk-shop-head:not(.vk2-ph--foto) .vk-crumbs a:focus-visible { color: #7D1C29 !important; }
/* Homepage: zonnige showtuinfoto (Remco 3 nov) is lichter dan de vorige; iets donkerder verloop zodat de witte tekst leesbaar blijft */
body.vk2 .vk-hero--home::before { background: linear-gradient(90deg, rgba(20, 18, 16, .62) 0%, rgba(20, 18, 16, .42) 38%, rgba(20, 18, 16, .08) 68%), linear-gradient(0deg, rgba(20, 18, 16, .28) 0%, rgba(20, 18, 16, 0) 40%) !important; }
@media (max-width: 900px) { body.vk2 .vk-hero--home::before { background: linear-gradient(180deg, rgba(20, 18, 16, .3) 0%, rgba(20, 18, 16, .55) 40%, rgba(20, 18, 16, .5) 100%) !important; } }

/* Fotokop binnenpagina's: tekst moet leesbaar blijven op lichte delen van de foto (Remco 4 nov) */
body.vk2 .vk-hero:not(.vk-hero--home)::before { background: linear-gradient(90deg, rgba(20, 18, 16, .72) 0%, rgba(20, 18, 16, .58) 32%, rgba(20, 18, 16, .38) 52%, rgba(20, 18, 16, .06) 74%), linear-gradient(0deg, rgba(20, 18, 16, .28) 0%, rgba(20, 18, 16, 0) 40%); }
@media (max-width: 900px) { body.vk2 .vk-hero:not(.vk-hero--home)::before { background: linear-gradient(180deg, rgba(20, 18, 16, .38) 0%, rgba(20, 18, 16, .6) 40%, rgba(20, 18, 16, .55) 100%); } }
body.vk2 .vk-hero .vk-crumbs { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(20, 18, 16, .7), 0 1px 12px rgba(20, 18, 16, .5); }
body.vk2 .vk-hero .vk-crumbs a { color: #fff !important; }
body.vk2 .vk-hero .vk-crumbs a:hover, body.vk2 .vk-hero .vk-crumbs a:focus-visible { color: var(--v2-terra-l) !important; text-decoration: underline; }

/* Kruimelpad op de lichte kop van winkelwagen en offerte, zoals bij de webshop (9 nov) */
body.vk2 .vk-co-head .vk-crumbs { color: #6b645d; text-shadow: none; }
body.vk2 .vk-co-head .vk-crumbs a { color: #3b3a38 !important; }
body.vk2 .vk-co-head .vk-crumbs a:hover, body.vk2 .vk-co-head .vk-crumbs a:focus-visible { color: #7D1C29 !important; }

/* Regel onder de bestelknop: webshop werkt op offerte (12 nov) */
body.vk2 .tile-catalog-offerte-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #6b645d; }

/* Winkelwagen en offerte: ruimte tussen de regels en het vak rechts; geen landkeuze (alleen Nederland) (Remco 12 nov) */
@media (min-width: 900px) { body.vk-co .wc-block-components-sidebar-layout > .wc-block-components-main { padding-right: 48px !important; box-sizing: border-box; } }
body.vk-co .wc-block-components-address-form__country { display: none !important; }

/* Rekenhulp: knop "Vraag offerte aan" (12 nov) */
.vk-calc__acties { margin-top: 18px; gap: 10px; flex-wrap: wrap; }
.vk-calc__acties [hidden], .vk-calc__uitleg[hidden] { display: none !important; }
.vk-calc__acties button.vk-btn { border: 0; cursor: pointer; font-family: inherit; }
.vk-calc__acties button.vk-btn[disabled] { opacity: .7; cursor: wait; }
.vk-calc__uitleg { margin-top: 10px; }