/* ===========================
   VS Theme – Compact CSS
   =========================== */

/* --- Basis variabelen (pas gerust aan) --- */
:root{
  /* kleuren */
  --color-primary:#2B59C3; --color-secondary:#0B132B; --color-accent:#EF476F;
  --color-bg:#FFFFFF; --color-text:#111827;

  /* UI secties */
  --topbar-bg:#0B132B; --topbar-text:#FFFFFF;
  --header-bg:#FFFFFF; --header-text:#111827; --header-accent:#1E90FF;
  /* footer (standaard wit, zodat de footer niet onbedoeld donker wordt) */
  --footer-bg:#FFFFFF; --footer-text:#111827;

  /* dimensies */
  --container:1200px; --radius:10px;

  /* fonts */
  --font-headings:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* header shape */
  --shape-width:420px; --shape-skew:-18deg; --shape-shadow-blur:26px;

  /* footer token (logo-plaque) + overlap t.o.v. widgets */
  --token-width:220px; --token-height:76px; --token-overlap:24px;
  --token-gutter:16px; --token-slope:22%;
}

/* ---------- Reset/utility ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg)}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-accent)}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.section{padding:48px 0}
h1,h2,h3,h4{font-family:var(--font-headings);color:var(--color-primary);margin:.2em 0 .4em}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.grid{display:grid;gap:16px}

/* ---------- Topbar ---------- */
.site-topbar{
  position:relative; z-index:3000; overflow:hidden;
  background:var(--topbar-bg); color:var(--topbar-text); font-size:.9rem;
}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.tb-left,.tb-right{display:flex;gap:14px;align-items:center}
.site-topbar a{color:var(--topbar-text)}

/* ---------- Header met schuine vlak + schaduw ---------- */
.site-header{
  position:relative; overflow:visible; z-index:1000;
  background:var(--header-bg); color:var(--header-text);
  box-shadow:0 4px 14px rgba(0,0,0,.06); border-bottom:1px solid #eaeaea;
}
.site-header::before{ /* gekleurd vlak */
  content:""; position:absolute; left:0; top:0;
  width:var(--shape-width); height:100%;
  background:var(--header-accent); transform:skew(var(--shape-skew));
  transform-origin:left top; z-index:2;
}
.site-header::after{  /* slagschaduw */
  content:""; position:absolute; left:14px; top:28px;
  width:var(--shape-width); height:calc(100% - 28px);
  background:rgba(0,0,0,.45); transform:skew(var(--shape-skew));
  transform-origin:left top; filter:blur(var(--shape-shadow-blur));
  opacity:.35; z-index:1; pointer-events:none;
}
.header-inner{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px 0;
}
.branding{display:flex;align-items:center}
.custom-logo{max-height:56px;height:auto;width:auto;border-radius:8px}
.site-title{font-weight:700;color:var(--header-text);text-decoration:none}

/* primary nav */
.primary-nav .menu{list-style:none;display:flex;gap:22px;margin:0;padding:0}
.primary-nav .menu a{color:var(--header-text);padding:8px 10px;border-radius:8px;font-weight:600}
.primary-nav .menu .current-menu-item>a,
.primary-nav .menu a:hover{background:rgba(0,0,0,.06);color:var(--color-primary)}

/* kleine chip met schuine uiteinden (rechtsboven bijv.) */
.header-accent-chip{
  position:relative;padding:6px 14px;background:var(--header-accent);
  border-radius:8px;color:#fff;display:inline-flex;align-items:center;gap:10px;isolation:isolate
}
.header-accent-chip::before,.header-accent-chip::after{
  content:"";position:absolute;top:0;bottom:0;width:18px;background:inherit;z-index:-1
}
.header-accent-chip::before{left:-10px;clip-path:polygon(100% 0,0 0,0 100%,60% 100%)}
.header-accent-chip::after{right:-10px;clip-path:polygon(40% 0,100% 0,100% 100%,0 100%)}
.header-accent-chip a{color:#fff;font-weight:600;font-size:.92rem;opacity:.95}
.header-accent-chip a:hover{opacity:1}

/* extra lucht onder header */
.site-main{margin-top:40px}

/* ---------- Buttons ---------- */
.button,.btn,.add_to_cart_button,.single_add_to_cart_button{
  display:inline-block;background:var(--color-primary);color:#fff;border-radius:10px;
  padding:.65rem 1rem;text-decoration:none;font-weight:600;letter-spacing:.2px;border:none;cursor:pointer
}
.btn-accent{background:var(--color-accent)}

/* ---------- Grids (home/portfolio/team/testimonials) ---------- */
.promos-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.team-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.testimonials-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));text-align:center}

/* ---------- Product builder basics ---------- */
.vs-pb-article{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vs-pb .vs-pb-gallery.vs-pos-top{grid-column:1/-1}
.product-usps{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.product-usps li{background:rgba(0,0,0,.05);padding:.35rem .6rem;border-radius:999px}

/* Sticky ATC mobiel */
.vs-sticky-atc{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #eee;box-shadow:0 -6px 18px rgba(0,0,0,.08);z-index:999}
.vs-sticky-atc .vs-sticky-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem}

/* USP/cat tiles */
.shop-usps .shop-usps-title{margin-bottom:.5rem}
.shop-usps-list{display:flex;flex-wrap:wrap;gap:.5rem 1rem;list-style:none;padding:0}
.shop-usp-item{background:rgba(0,0,0,.05);padding:.35rem .6rem;border-radius:999px}
.shop-cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.shop-cat{display:block;text-decoration:none;color:inherit;overflow:hidden;border:1px solid #eee;border-radius:var(--radius)}
.shop-cat-meta{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}

/* ---------- Extra per-pagina menu’s ---------- */
.vs-extra-menu{margin:.5rem 0 1rem}
.vs-extra-menu .menu{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:0;padding:0;list-style:none}
.vs-extra-menu .menu a{padding:.35rem .65rem;border-radius:999px;background:rgba(0,0,0,.05)}

/* ---------- Footer 4 kolommen + onderbalk + token-logo ---------- */
.site-footer{position:relative;background:var(--footer-bg);color:var(--footer-text);margin-top:48px}

/* Subtiele scheiding tussen content en footer */
.footer-shadow-on .site-footer:before{
  content:"";
  position:absolute;
  left:0; right:0; top:-28px;
  height:28px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0));
  opacity:.55;
}

/* Bovenblok – widgets (4 kolommen) */
.footer-top{position:relative;z-index:1;background:var(--footer-bg);color:var(--footer-text);padding:clamp(40px,6vw,80px) 0}
.footer-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,32px)}
.footer-title{font-family:var(--font-headings);font-weight:700;font-size:clamp(1.05rem,2.1vw,1.25rem);margin:0 0 12px;color:var(--footer-text);position:relative}
.footer-title::after{content:"";display:block;width:52px;height:3px;margin-top:8px;background:var(--header-accent);border-radius:2px;opacity:.9}
.site-footer .widget a{color:inherit;opacity:.95;text-decoration:none}
.site-footer .widget a:hover{opacity:1;text-decoration:underline}
.muted{opacity:.7}

/* Onderbalk – legal + copyright + token */
.footer-bottombar{position:relative;z-index:2;background:#F3F4F6;color:var(--footer-text);border-top:1px solid rgba(17,24,39,.10)}
.bottombar-inner{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(12px,2.4vw,24px);padding:12px 0}
.bottom-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.legal-links ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.legal-links a{color:var(--footer-text);opacity:.9}
.legal-links a:hover{opacity:1;text-decoration:underline}
.copyright{opacity:.9;font-size:.95rem}

/* Token-logo (geen link) – PLAATSING: half over widgets */
.logo-token{
  position:absolute; left:var(--token-gutter); bottom:calc(100% - var(--token-overlap));
  width:var(--token-width); height:var(--token-height);
  overflow:hidden; isolation:isolate; z-index:3; pointer-events:none;
}
.logo-token::before{ /* schaduwstrookje onder token voor 'verankering' */
  content:""; position:absolute; left:6px; right:14%; bottom:-6px; height:10px;
  border-radius:8px; filter:blur(6px); background:rgba(0,0,0,.25); opacity:.55; z-index:-1;
}
.logo-token .token-plate{
  position:absolute; inset:0;
  background:linear-gradient(160deg, color-mix(in srgb,var(--header-accent) 92%,#fff 8%), color-mix(in srgb,var(--header-accent) 70%,#000 12%));
  clip-path:polygon(0 var(--token-slope), 100% 0, 100% 100%, 0% 100%);
  border-radius:10px;
  box-shadow:0 14px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 18px rgba(0,0,0,.12);
  outline:1px solid rgba(0,0,0,.05);
}
.logo-token .token-fold{
  position:absolute; top:0; right:0; width:20%; height:42%;
  background:color-mix(in srgb,var(--header-accent) 65%,#000 35%);
  clip-path:polygon(0 0,100% 0,0 100%); filter:drop-shadow(-2px 3px 3px rgba(0,0,0,.18)); opacity:.92;
}
.logo-token .token-ring{
  position:absolute; left:calc(var(--token-gutter) - 2px); top:50%; transform:translateY(-50%);
  width:clamp(48px,5.8vw,66px); height:clamp(48px,5.8vw,66px); border-radius:50%;
  background:radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.28), transparent 55%), radial-gradient(circle, rgba(0,0,0,.25), transparent 65%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.40), 0 4px 12px rgba(0,0,0,.24); z-index:2;
}
.logo-token .token-img{
  position:absolute; left:calc(var(--token-gutter) + 2px); top:50%; transform:translateY(-50%);
  width:clamp(44px,5.2vw,60px); height:clamp(44px,5.2vw,60px);
  object-fit:cover; border-radius:50%;
  box-shadow:0 5px 12px rgba(0,0,0,.38), 0 0 18px rgba(255,255,255,.20); z-index:3;
}
/* tekst rechts mag niet botsen met token */
.bottom-right{ padding-left: calc(var(--token-width) + var(--token-gutter) + 12px) }

/* ---------- Hover/micro ---------- */
.products .product,.products-grid .product,.card{transition:transform .2s ease, box-shadow .2s ease}
.products .product:hover,.products-grid .product:hover,.card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.08)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){ .footer-4col{grid-template-columns:repeat(2,1fr)} }
@media (max-width:992px){
  .primary-nav .menu{gap:14px}
  .site-header::before,.site-header::after{width:360px}
}
@media (max-width:780px){
  .vs-pb-article{grid-template-columns:1fr}
  .vs-sticky-atc{display:block}
  /* token niet overlappen op mobiel */
  .logo-token{position:static; pointer-events:auto; margin-bottom:8px}
  .bottom-right{padding-left:0}
}
@media (max-width:640px){ .footer-4col{grid-template-columns:1fr} }

/* Introblok boven de 4 kolommen */
.footer-intro{ margin:-8px 0 22px }
.footer-intro p{ margin:.5em 0 }

/* Kleine note links in de onderbalk */
.footer-note{
  margin-right:12px; opacity:.9; font-size:.95rem; white-space:nowrap;
}
@media (max-width:780px){
  .footer-note{ margin:0 0 6px 0; white-space:normal }
}

/* --- Logo-token strak in de linkeronderhoek --- */
.footer-top {
  position: relative;
  z-index: 1;
}

.footer-bottombar {
  position: relative;
  z-index: 2;
  overflow: visible;
}

/* Container mag niet limiteren */
.footer-bottombar .container {
  position: relative;
  padding-left: 0 !important; /* echt tegen de linkerrand */
}

/* Het logo-token zelf */
.logo-token {
  position: absolute;
  bottom: calc(100% - 28px); /* laat hem iets over de widgets vallen */
  left: 0; /* helemaal tegen de linker rand */
  z-index: 5;
  transform: translateY(0);
  pointer-events: none; /* klik niet blokkeren */
}

/* Schaduw voor meer diepte */
.logo-token .token-plate {
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* Zorg dat de rest niet tegen de token aankomt */
.bottom-right {
  padding-left: 260px; /* ruimte rechts van token */
}

/* Optioneel: logo iets kleiner maken */
.logo-token img {
  max-width: 160px;
  height: auto;
}
/* ===========================
   FOOTER TOKEN TUNING (optie A)
   =========================== */

/* Basispositie tov hele viewport */
.bottombar-inner { position: relative; }

.bottombar-inner .logo-token {
  position: absolute;
  bottom: calc(100% - var(--token-overlap, 18px)); /* overlap boven widgetvlak */
  left: calc(50% - 50vw + var(--token-gutter, 0px)); /* tegen linker viewportrand */
  z-index: 5;
  pointer-events: none;
  transform: translateY(6px); /* <<< iets lager naar de "grond" */
}

/* --- maatvoering: iets groter --- */
:root {
  --token-width:  clamp(210px, 22vw, 280px); /* breder */
  --token-height: clamp(72px, 8vw, 96px);    /* hoger */
  --token-overlap: 24px;                     /* overlap met widgets */
  --token-gutter:  0px;                      /* strak tegen de linkerrand */
}

/* Logo iets groter in verhouding */
.logo-token .token-img {
  width:  clamp(54px, 6.2vw, 72px);
  height: clamp(54px, 6.2vw, 72px);
  left:   clamp(16px, 2vw, 22px);
}

/* De ring erachter schaalt mee */
.logo-token .token-ring {
  width:  clamp(58px, 6.8vw, 78px);
  height: clamp(58px, 6.8vw, 78px);
  left:   clamp(14px, 1.8vw, 20px);
}

/* Plaat iets meer diepte geven */
.logo-token .token-plate {
  box-shadow:
    0 14px 30px rgba(0,0,0,.35),
    inset 0 1px 3px rgba(255,255,255,.20),
    inset 0 -10px 14px rgba(0,0,0,.12);
}

/* Extra visuele "schaduw" onder het logo zelf */
.logo-token::after {
  content:"";
  position:absolute;
  left:8px;
  bottom:-8px;
  width:80%;
  height:12px;
  border-radius:8px;
  background:rgba(0,0,0,.35);
  filter:blur(8px);
  opacity:.55;
  z-index:0;
}

/* Ruimte rechts voor copyright */
.bottom-right {
  padding-left: calc(var(--token-width) + 24px);
}

/* Mobiel: terugschalen, geen overlap */
@media (max-width:780px){
  .bottombar-inner .logo-token{
    position: static;
    transform:none;
    margin-bottom:8px;
    pointer-events:auto;
  }
  .bottom-right{ padding-left:0; }
}
/* ============== 1) FOOTER BLIJFT WIT + NETTE SCHEIDING ============== */
.site-footer{ background: var(--footer-bg,#FFFFFF); margin-bottom:0; }
.footer-bottombar{
  position:relative;
  background: #F3F4F6;
  border-top: 1px solid rgba(17,24,39,.10);
  overflow:visible;
}
.footer-bottombar .container{ padding-bottom: 0; } /* geen extra bodem-lucht */

/* full-bleed fallback: zorg dat de hele balk gevuld is */
.footer-bottombar::before{
  content:""; position:absolute; inset:0;
  background: inherit; z-index:0;
}

/* ============== 2) LOGO TOKEN GROTER + GEDETELIJK GEOVERLAPT ============== */
.bottombar-inner{ position:relative; }
.bottombar-inner .logo-token{
  position:absolute;
  left: calc(50% - 50vw);      /* exact linker viewportrand */
  bottom: calc(100% - var(--token-overlap, 28px));
  z-index:5;
  pointer-events:none;
  transform: translateY(6px);  /* nog dichter “op de grond” */
}

/* maatvoering – groter */
:root{
  --token-width:  clamp(260px, 26vw, 340px);
  --token-height: clamp(92px, 9.6vw, 120px);
  --token-overlap: 32px;       /* hoe veel hij over de widgets valt */
}

/* PLAAT + FOLD */
.logo-token{ width:var(--token-width); height:var(--token-height); }
.logo-token .token-plate{
  clip-path: polygon(0 22%, 100% 0, 100% 100%, 0% 100%);
  border-radius:10px;
  box-shadow:
    0 14px 32px rgba(0,0,0,.35),
    inset 0 1px 3px rgba(255,255,255,.20),
    inset 0 -10px 14px rgba(0,0,0,.12);
}
.logo-token .token-fold{
  position:absolute; top:0; right:0; width:20%; height:42%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity:.92; filter: drop-shadow(-2px 3px 3px rgba(0,0,0,.18));
}

/* LOGO IN HET MIDDEN VAN DE PLAAT (met ring erachter) */
.logo-token .token-ring,
.logo-token .token-img{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%, -50%);   /* <<< centreert perfect */
}

/* groottes van ring & logo */
.logo-token .token-ring{
  width: clamp(72px, 7.6vw, 96px);
  height: clamp(72px, 7.6vw, 96px);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%),
    radial-gradient(circle, rgba(0,0,0,.25), rgba(0,0,0,0) 65%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.40), 0 4px 12px rgba(0,0,0,.24);
  z-index:2;
}
.logo-token .token-img{
  width: clamp(64px, 6.8vw, 86px);
  height: clamp(64px, 6.8vw, 86px);
  object-fit: cover; border-radius:50%;
  box-shadow: 0 5px 12px rgba(0,0,0,.38), 0 0 18px rgba(255,255,255,.20);
  z-index:3;
}

/* subtiele bodemschaduw onder de token voor verankering */
.logo-token::after{
  content:""; position:absolute; left:10px; right:18%;
  bottom:-9px; height:12px; border-radius:10px;
  background: rgba(0,0,0,.35); filter: blur(8px); opacity:.55;
  z-index:1;
}

/* copyright rechts krijgt ruimte */
.bottom-right{ padding-left: calc(var(--token-width) + 24px); }

/* Mobiel: geen overlap en alles onder elkaar */
@media (max-width:780px){
  .bottombar-inner .logo-token{
    position:static; transform:none; margin-bottom:8px; pointer-events:auto;
  }
  .bottom-right{ padding-left:0; }
}
/* ===========================
   HEADER LOGO MET GLAZEN RING
   =========================== */

.header-logo-ring{
  position: relative;
  display: inline-block;
  isolation: isolate; /* eigen stacking context */
}

.header-logo-ring .ring{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(66px, 7.2vw, 88px);
  height: clamp(66px, 7.2vw, 88px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
    radial-gradient(circle, rgba(0,0,0,.25), rgba(0,0,0,0) 65%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.35),
    0 4px 10px rgba(0,0,0,.3);
  z-index: 1;
}

/* Zorg dat het logo er bovenop ligt */
.header-logo-ring .custom-logo{
  position: relative;
  z-index: 2;
  border-radius: 50%;
  height: clamp(58px, 6.4vw, 76px);
  width: auto;
  object-fit: cover;
  box-shadow:
    0 3px 10px rgba(0,0,0,.35),
    0 0 12px rgba(255,255,255,.15);
}

/* Optioneel: subtiele schaduw eronder voor diepte */
.header-logo-ring::after{
  content:"";
  position: absolute;
  bottom: -6px;
  left: 12%;
  right: 12%;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  filter: blur(6px);
  opacity: .4;
  z-index: 0;
}

/* Voor kleinere schermen iets compacter */
@media (max-width:768px){
  .header-logo-ring .ring{ width:64px; height:64px; }
  .header-logo-ring .custom-logo{ height:58px; }
}
/* FOOTER: vervang de glazen ring door een zwarte schaduw rond het logo */
.logo-token .token-ring{
  /* zelfde positie/maat blijft gelden; we restylen 'm als schaduw */
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,0) 72%
  );
  box-shadow: none;            /* geen witte/glass rand meer */
  filter: blur(2px);           /* zachter verloop */
  opacity: .65;                /* intensiteit van de schaduw */
}

/* Het logo zelf boven de schaduw, zonder eigen glows */
.logo-token .token-img{
  z-index: 2;
  box-shadow: none;            /* geen lichte gloed */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.30)); /* subtiele diepte */
}

/* (optioneel) iets donkerder globale schaduw onder de hele token */
.logo-token::after{
  background: rgba(0,0,0,.45);
  filter: blur(9px);
  opacity: .6;
}
/* ===========================
   HEADER LOGO MET SCHADUW i.p.v. GLAZEN RING
   =========================== */

.header-logo-ring {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.header-logo-ring .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(66px, 7.2vw, 88px);
  height: clamp(66px, 7.2vw, 88px);
  border-radius: 50%;

  /* zwarte zachte schaduw ipv glazige glow */
  background: radial-gradient(
    circle,
    rgba(0,0,0,.6) 0%,
    rgba(0,0,0,.45) 50%,
    rgba(0,0,0,0) 75%
  );
  box-shadow: none;
  filter: blur(3px);
  opacity: .7;
  z-index: 1;
}

/* Logo zelf blijft mooi scherp erboven */
.header-logo-ring .custom-logo {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  height: clamp(58px, 6.4vw, 76px);
  width: auto;
  object-fit: cover;
  box-shadow: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
}

/* Bodemschaduw voor extra diepte */
.header-logo-ring::after {
  content:"";
  position: absolute;
  bottom: -6px;
  left: 12%;
  right: 12%;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  filter: blur(6px);
  opacity: .45;
  z-index: 0;
}

/* Op mobiel iets kleiner */
@media (max-width:768px) {
  .header-logo-ring .ring { width:64px; height:64px; }
  .header-logo-ring .custom-logo { height:58px; }
}
/* ===========================================================
   HEADER GRAFISCHE UPGRADE – VLAK + RING + SCHADUW (VS-style)
   =========================================================== */

/* Container blijft hetzelfde */
.site-header {
  position: relative;
  overflow: visible;
  background: var(--header-bg, #fff);
  color: var(--header-text, #111);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  z-index: 1000;
}

/* Het schuine groene vlak */
.site-header::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 460px; height: 100%;
  background: linear-gradient(155deg, #00c853 0%, #00b24a 100%);
  transform: skew(-18deg);
  transform-origin: left top;
  box-shadow: 6px 0 22px rgba(0,0,0,.25); /* stevige slagschaduw */
  border-top-right-radius: 6px;
  z-index: 1;
}

/* Glans/reflectie bovenaan het vlak */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 460px; height: 45%;
  transform: skew(-18deg);
  transform-origin: left top;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,0) 80%
  );
  z-index: 2;
  pointer-events: none;
}

/* Het logo krijgt zijn eigen ring en diepte */
.header-logo-ring {
  position: relative;
  display: inline-block;
  isolation: isolate;
  z-index: 3;
}

/* Zwarte schaduwring */
.header-logo-ring .ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* groter zodat het logo echt 'eruit knalt' */
  width: clamp(96px, 9.4vw, 128px);
  height: clamp(96px, 9.4vw, 128px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 70%);
  filter: blur(3px);
  opacity: .8;
  z-index: 1;
}

/* Logo zelf */
.header-logo-ring .custom-logo {
  position: relative;
  z-index: 2;
  /* groter logo + scherp (full-res wordt in PHP geladen) */
  height: clamp(86px, 8.2vw, 112px);
  width: auto;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}

/* Responsief: vlak wat kleiner */
@media (max-width: 992px) {
  .site-header::before,
  .site-header::after {
    width: 380px;
  }
}
@media (max-width: 768px) {
  .site-header::before,
  .site-header::after {
    width: 300px;
  }
  .header-logo-ring .custom-logo { height: 74px; }
}
/* Header: kleur 100% uit je variabele, geen gradient die 'm afvlakt */
.site-header { isolation:isolate; } /* voorkomt vreemde blending in Safari */

.site-header::before{
  background: var(--header-accent, #00C853); /* solide groen */
  box-shadow: 6px 0 22px rgba(0,0,0,.22);    /* diepte behouden */
}

/* Glanslaag veel subtieler (of zet desnoods op display:none) */
.site-header::after{
  background: linear-gradient(to bottom,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,0) 75%
  );
  opacity: .8;               /* zachter dan eerst */
  pointer-events: none;
}

/* Optioneel: wil je nul glans? Zet 'm gewoon uit: */
/*
.site-header::after{ display:none !important; }
*/

/* Voor consistentie (Safari): geen color-mix of exotische space */
:root{
  --header-accent: #00C853;   /* sRGB, helder groen */
}
/* =====================================================
   FOOTER TOKEN – vaste positie in linkerhoek, zonder groene ring
   ===================================================== */

/* Schuine groene plaat */
.logo-token .token-plate {
  background: var(--header-accent, #00C853); /* exact dezelfde kleur als header */
  clip-path: polygon(0 22%, 100% 0, 100% 100%, 0% 100%);
  border-radius: 10px;
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),         /* diepe slagschaduw */
    inset 0 1px 0 rgba(255,255,255,.25), /* subtiele highlight */
    inset 0 -8px 14px rgba(0,0,0,.12);   /* lichte binnen-diepte */
  outline: 1px solid rgba(0,0,0,.05);
}

/* Kleine vouw rechtsboven – subtiel en donkerder groen */
.logo-token .token-fold {
  width: 20%;
  height: 40%;
  background: color-mix(in srgb, #008B3F 80%, #000 20%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: .85;
  filter: drop-shadow(-2px 3px 3px rgba(0,0,0,.25));
}

/* Geen ring meer achter logo (alleen subtiele slagschaduw) */
.logo-token .token-ring {
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0;
}

/* Logo zelf — iets sterker contrast en diepte */
.logo-token .token-img {
  box-shadow:
    0 5px 12px rgba(0,0,0,.45),
    0 0 16px rgba(255,255,255,.18);
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

/* Strak in de linker benedenhoek van de footer */
.footer-bottombar {
  position: relative;
  z-index: 2;
}

.bottombar-inner {
  position: relative;
}

.bottombar-inner .logo-token {
  position: absolute;
  left: 0; /* exact in de hoek */
  bottom: calc(100% - var(--token-overlap, 28px)); /* licht overlappend */
  transform: translateY(0);
  z-index: 5;
  pointer-events: none;
}

/* Safari fix – geen kleurvervaging */
.logo-token, .footer-bottombar {
  isolation: isolate;
}
/* === FORCEER TOKEN IN DE ÉCHTE LINKER HOEK VAN DE PAGINA === */

/* overlap en hoogte kun je hier tweaken */
:root{
  --token-overlap: 28px;   /* hoeveel hij over de widgets valt */
}

/* Zorg dat deze elementen positie-context hebben */
.footer-bottombar{ position: relative; z-index: 2; }
.bottombar-inner{ position: relative; }

/* Logo-token: naar de viewport-linkerhoek, niet de container */
.bottombar-inner .logo-token,
.bottombar-inner .logo-badge{           /* fallback als je nog .logo-badge gebruikt */
  position: absolute !important;
  left: calc(50% - 50vw) !important;    /* <<< trekt 'm precies naar de linker viewport-rand */
  bottom: calc(100% - var(--token-overlap)) !important;
  z-index: 5 !important;
  pointer-events: none;
  transform: translateX(0) translateY(0) !important;
}

/* Héél klein inwendige marge zodat hij niet “plakt” tegen de rand (optioneel) */
@media (min-width: 781px){
  .bottombar-inner .logo-token,
  .bottombar-inner .logo-badge{
    margin-left: 0.0rem; /* desnoods 4px zetten als je 1px lucht wilt */
  }
}

/* Verwijder eventuele groene ring/glow rond het logo */
.logo-token .token-ring{ background: none !important; box-shadow: none !important; filter: none !important; opacity: 0 !important; }
.logo-badge .custom-logo{ box-shadow: 0 5px 12px rgba(0,0,0,.45) !important; }

/* Copyright rechts netjes uitlijnen */
.bottom-right{
  margin-left: auto;
  padding-left: 0 !important;
  display: flex; align-items: center; gap: 12px;
}
.bottom-right .copyright{ margin: 0; line-height: 1.2; opacity: .9; }

/* Mobiel: geen overlap; token gewoon onder elkaar */
@media (max-width: 780px){
  .bottombar-inner .logo-token,
  .bottombar-inner .logo-badge{
    position: static !important;
    pointer-events: auto;
    margin: 0 0 8px 0 !important;
  }
}
/* === Koppel weer aan de Customizer kleurinstelling === */

/* Header-vlak (schuin blok achter logo) */
.header-accent-chip,
.logo-token .token-plate{
  background: var(--header-accent, #00C853); /* gebruikt Customizer-kleur */
}

/* Kleine vouw rechtsboven gebruikt automatisch een donkerdere tint */
.logo-token .token-fold{
  background: color-mix(in srgb, var(--header-accent, #00C853) 80%, #000 20%);
}

/* Voor Safari, zodat de kleur zuiver blijft */
.logo-token,
.header-accent-chip{
  isolation: isolate;
  mix-blend-mode: normal;
}
/* Verwijder de vouw in de footer-token */
.footer-bottombar .logo-token .token-fold {
  display: none !important;
}
/* ====== 1) Copyright verticaal centreren in grijze balk ====== */
.footer-bottombar .bottombar-inner{
  display: flex;                 /* ipv grid: eenvoudiger centreren */
  align-items: center;           /* verticaal midden */
  justify-content: space-between;
  min-height: 56px;              /* voelbare hoogte */
  padding: 10px 0;
}

/* legal/copyright rechts blijft op één lijn en compact */
.bottom-right{
  display: flex;
  align-items: center;           /* ook deze middelt verticaal */
  gap: 16px;
  /* Houd ruimte vrij links voor de token */
  padding-left: calc(var(--container-pad, 20px) + var(--token-width, 220px) + 12px);
}
.bottom-right .copyright{ line-height: 1.15; }

/* ====== 2) Token iets lager zodat hij “aan” de blauwe rand hangt ====== */
:root{
  --token-overlap: 55px;  /* hoeveel hij over de widgets valt (had je al) */
  --token-drop:   10px;   /* NIEUW: extra daling richting blauwe rand */
}

/* plaatsing in de hoek blijft hetzelfde; we droppen hem iets omlaag */
.bottombar-inner .logo-token{
  position: absolute;
  left: var(--container-pad, 20px);
  bottom: calc(100% - var(--token-overlap));
  transform: translateY(var(--token-drop));   /* <— laat hem zakken */
  z-index: 3;
  pointer-events: none;
}

/* geen “vouw” driehoekje in de token */
.footer-bottombar .logo-token .token-fold{ display:none !important; }

/* mobiel: geen overlap en geen drop, alles netjes onder elkaar */
@media (max-width: 780px){
  .bottombar-inner{
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
  }
  .bottombar-inner .logo-token{
    position: static;
    transform: none;
    margin-bottom: 8px;
  }
  .bottom-right{ padding-left: 0; }
}
/* Lege kolommen: behouden ruimte in grid maar onzichtbaar */
.footer-4col .footer-col.is-empty{
  visibility: hidden;   /* behoudt kolombreedte zodat 2 op 2 blijft staan */
}

/* Dubbele titel voorkomen: verberg de titel van de eerste widget in een actieve kolom */
.footer-4col .footer-col:not(.is-empty) .widget:first-of-type .widget-title,
.footer-4col .footer-col:not(.is-empty) .widget:first-of-type h2,
.footer-4col .footer-col:not(.is-empty) .wp-block-widget-area .widget:first-of-type .widgettitle{
  display: none;
}

/* (optioneel) wat ruimte onder de kolomtitel uit widgets */
.footer-4col .footer-title{ margin-bottom: 10px; }

/* Footer: partner/logo strip */
.footer-partners{
  padding: 18px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), transparent);
}
.footer-partners .partners-title{
  font-weight:900;
  margin:0 0 10px;
}
.footer-partners .partners-logos{
  display:flex;
  flex-wrap:wrap;
  gap: 12px 18px;
  align-items:center;
}
.footer-partners .partner-logo img{
  height: 36px;
  width:auto;
  object-fit:contain;
  filter: none;
  opacity: .95;
}
@media (max-width:980px){
  .footer-partners .partner-logo img{ height: 30px; }
}

/* Openingstijden (VS-EM) */
.vs-oh { --oh-accent: var(--header-accent, #00C853); }

.vs-oh .vs-oh-list{
  list-style:none; margin:0; padding:0;
  border-top:1px solid rgba(0,0,0,.08);
}
.vs-oh .vs-oh-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.vs-oh .vs-oh-label{
  font-weight:600; color: var(--color-text, #111827);
}
.vs-oh .vs-oh-time{
  color: color-mix(in srgb, var(--color-text, #111827) 90%, #000 10%);
  white-space: nowrap; /* houd "uur" op dezelfde regel */
  flex: 0 0 auto;
}

.vs-oh .vs-oh-unit{ opacity: .85; }

/* Titel-streepje (sluit aan op jouw footer-stijlen) */
.widget .widget-title + .vs-oh .vs-oh-list,
.footer-title + .vs-oh .vs-oh-list{
  position:relative;
  margin-top:8px;
}
.widget .widget-title + .vs-oh .vs-oh-list::before,
.footer-title + .vs-oh .vs-oh-list::before{
  content:""; position:absolute; left:0; top:-9px; height:3px; width:64px;
  background: var(--oh-accent);
  border-radius:2px;
}

/* Huidige dag licht highlighten */
.vs-oh .is-today{
  background: linear-gradient(to right, color-mix(in srgb, var(--oh-accent) 15%, transparent 15%), transparent);
}

/* Kleine extra toelichting onderaan (optioneel) */
.vs-oh .vs-oh-note{
  margin-top:10px; font-size:.92rem; opacity:.8;
}

/* Openingstijden v2 (donkere card zoals in screenshot) */
.vs-oh--v2{
  font-size: 13px;
  line-height: 1.35;
  --oh-bg: rgba(0,0,0,.82);
  --oh-border: rgba(255,255,255,.12);
  --oh-text: rgba(255,255,255,.92);
  --oh-muted: rgba(255,255,255,.86);
  --oh-row: rgba(255,255,255,.06);
  --oh-row-2: rgba(255,255,255,.04);
  --oh-today-bg: color-mix(in srgb, var(--oh-accent) 14%, rgba(255,255,255,.06));
  background: var(--oh-bg);
  border: 1px solid var(--oh-border);
  border-radius: calc(var(--radius) + 8px);
  padding: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.16);
}
.vs-oh--v2 .vs-oh-status{
  display:flex; align-items:center; gap:10px;
  margin-bottom: 10px;
  color: var(--oh-text);
  font-weight: 600;
}
.vs-oh--v2 .vs-oh-status .dot{ width:9px; height:9px; border-radius:50%; background:#e11d48; box-shadow:0 0 0 4px rgba(225,29,72,.18); }
.vs-oh--v2 .vs-oh-status.is-open .dot{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18); }
.vs-oh--v2 .vs-oh-list{ border-top:0; }
.vs-oh--v2 .vs-oh-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border:0;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--oh-row), var(--oh-row-2));
  border: 1px solid var(--oh-border);
  margin: 8px 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 5px 12px rgba(0,0,0,.16);
}
.vs-oh--v2 .vs-oh-label{
  color: var(--oh-text);
  font-weight: 600;
  min-width: 100px;
}
.vs-oh--v2 .vs-oh-time{
  color: var(--oh-text);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto;
}
.vs-oh--v2 .vs-oh-row.is-today{
  background: linear-gradient(180deg, var(--oh-today-bg), rgba(255,255,255,.03));
  border-color: color-mix(in srgb, var(--oh-accent) 60%, var(--oh-border));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 2px color-mix(in srgb, var(--oh-accent) 35%, transparent),
    0 10px 18px rgba(0,0,0,.22);
 }
.vs-oh--v2 .vs-oh-row.is-closed .vs-oh-time{ opacity:.85; }
.vs-oh--v2 .vs-oh-note{ color: var(--oh-muted); opacity:1; }

/* Contact widget v2 (kaart + info card) */
.vs-contact-card{
  font-size: 13px;
  line-height: 1.35;
  background: rgba(0,0,0,.82);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(var(--radius) + 10px);
  padding: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.16);
}
.vs-contact-map{
  border-radius: calc(var(--radius) + 6px);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 12px;
}
.vs-contact-map iframe{ width:100%; height:240px; border:0; display:block; }
.vs-contact--v2{ list-style:none; margin:0; padding:0; }
.vs-contact--v2 .vs-contact-item{
  display:flex; align-items:center; gap:10px;
  min-width: 0; /* voorkomt dat tekst uit de kaart duwt */
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  margin: 8px 0;
  color: rgba(255,255,255,.92);
}
.vs-contact--v2 .vs-contact-ico{
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: inherit; /* kleur komt per item (niet thema) */
  opacity: .95;
}
.vs-contact--v2 .vs-contact-ico svg{
  width: 18px; height: 18px;
  fill: currentColor;
  stroke: none;
}
.vs-contact--v2 .vs-contact-text{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.vs-contact--v2 .vs-contact-text a,
.vs-contact--v2 .vs-contact-text span{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vs-contact--v2 .vs-contact-text a{
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.vs-contact--v2 a{ color: inherit; text-decoration:none; font-weight:600; }
.vs-contact--v2 a:hover{ text-decoration:underline; }

/* Contact icoon kleuren (niet thema-afhankelijk) */
.vs-contact--v2 .vs-contact-phone .vs-contact-ico{ color: rgba(255,255,255,.85); }
.vs-contact--v2 .vs-contact-mail .vs-contact-ico{ color: rgba(255,255,255,.70); }
.vs-contact--v2 .vs-contact-address .vs-contact-ico{ color: #ef4444; }
.vs-contact--v2 .vs-contact-kvk .vs-contact-ico{ color: #60a5fa; }
.vs-contact--v2 .vs-contact-btw .vs-contact-ico{ color: #93c5fd; }


/* =========================================
 * Widgets kaartstijl: LICHT (voor witte footer/achtergrond)
 * Zet via Customizer: Stijl -> Widgets -> Widget kaartstijl
 * body class: widget-cards-light
 * ========================================= */
body.widget-cards-light .vs-oh--v2{
  --oh-bg: rgba(255,255,255,.92);
  --oh-border: rgba(15,23,42,.10);
  --oh-text: rgba(15,23,42,.92);
  --oh-muted: rgba(15,23,42,.75);
  --oh-row: rgba(15,23,42,.04);
  --oh-row-2: rgba(15,23,42,.02);
  --oh-today-bg: color-mix(in srgb, var(--oh-accent) 10%, rgba(255,255,255,.95));
  background: var(--oh-bg);
  border-color: var(--oh-border);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}
body.widget-cards-light .vs-oh--v2 .vs-oh-status{ color: var(--oh-text); }
body.widget-cards-light .vs-oh--v2 .vs-oh-status .dot{
  box-shadow: 0 0 0 4px rgba(225,29,72,.12);
}
body.widget-cards-light .vs-oh--v2 .vs-oh-status.is-open .dot{
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}
body.widget-cards-light .vs-oh--v2 .vs-oh-row{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  border-color: rgba(15,23,42,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 5px 12px rgba(15,23,42,.07);
}
body.widget-cards-light .vs-oh--v2 .vs-oh-row.is-today{
  background: linear-gradient(180deg, var(--oh-today-bg), rgba(255,255,255,.86));
  border-color: color-mix(in srgb, var(--oh-accent) 55%, rgba(15,23,42,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 0 0 2px color-mix(in srgb, var(--oh-accent) 22%, transparent),
    0 8px 14px rgba(15,23,42,.08);
}
body.widget-cards-light .vs-oh--v2 .vs-oh-label,
body.widget-cards-light .vs-oh--v2 .vs-oh-time{ color: var(--oh-text); }
body.widget-cards-light .vs-oh--v2 .vs-oh-note{ color: var(--oh-muted); }

body.widget-cards-light .vs-contact-card{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}
body.widget-cards-light .vs-contact-map{ border-color: rgba(15,23,42,.10); }
body.widget-cards-light .vs-contact--v2 .vs-contact-item{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.10);
  color: rgba(15,23,42,.90);
}
body.widget-cards-light .vs-contact--v2 .vs-contact-ico{
  background: transparent;
  border: 0;
  color: rgba(15,23,42,.70);
}
body.widget-cards-light .vs-contact--v2 .vs-contact-phone .vs-contact-ico{ color: rgba(15,23,42,.90); }
body.widget-cards-light .vs-contact--v2 .vs-contact-mail .vs-contact-ico{ color: rgba(15,23,42,.65); }
body.widget-cards-light .vs-contact--v2 .vs-contact-address .vs-contact-ico{ color: #ef4444; }
body.widget-cards-light .vs-contact--v2 .vs-contact-kvk .vs-contact-ico{ color: #2563eb; }
body.widget-cards-light .vs-contact--v2 .vs-contact-btw .vs-contact-ico{ color: #1d4ed8; }
/* ===== HOME: HERO ===== */
.home-vsem .home-hero{ position:relative; overflow:visible; padding: clamp(40px, 6vw, 80px) 0 0; }
.home-vsem .hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; align-items:center; gap: clamp(20px, 4vw, 40px); }
.home-vsem .hero-title{ font-size: clamp(2rem, 4.6vw, 3.2rem); line-height:1.05; margin:0 0 .25em }
.home-vsem .hero-sub{ font-size: clamp(1rem, 2vw, 1.2rem); opacity:.9; margin:0 0 1em }
.home-vsem .hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap }
.home-vsem .hero-media .hero-img{ border-radius: var(--radius); box-shadow: 0 14px 38px rgba(0,0,0,.18) }
.home-vsem .hero-accent{
  content:""; position:absolute; left:0; top:0;
  width: min(46vw, 680px); height: clamp(160px, 18vw, 220px);
  background: var(--header-accent, #1E90FF);
  transform: skew(-18deg); transform-origin:left top;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  z-index:-1;
}

/* ===== PROMO TEASERS ===== */
.home-vsem .home-promos .promo-media img{ border-radius: var(--radius) }
.home-vsem .home-promos .promo h3{ margin:.4rem 0 .2rem }
.home-vsem .home-promos .promo .btn-sm{ padding:.5rem .8rem; font-size:.95rem }

/* ===== SERVICES ===== */
.home-vsem .home-services .service{ text-decoration:none; color:inherit }
.home-vsem .home-services .service img{ border-radius: var(--radius) }
.home-vsem .home-services .service h3{ margin:.6rem 0 .2rem }
.home-vsem .home-services .service .service-more{ opacity:.8 }

/* ===== PORTFOLIO ===== */
.home-vsem .home-portfolio .project img{ border-bottom-left-radius:0; border-bottom-right-radius:0 }
.home-vsem .home-portfolio .project-title{ margin:.7rem .5rem .9rem }

/* ===== SHOP TEASER ===== */
.home-vsem .home-shop .shop-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem }

/* ===== TESTIMONIALS ===== */
.home-vsem .home-testimonials .quote .q{ margin:0 0 .6rem; font-style: italic; }
.home-vsem .home-testimonials .quote .by{ margin:0; opacity:.8 }

/* ===== CTA ===== */
.home-vsem .home-cta{ position:relative; overflow:visible }
.home-vsem .cta-inner{ display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: clamp(18px,3vw,30px) }
.home-vsem .cta-media .cta-img{ border-radius: var(--radius); box-shadow: 0 14px 38px rgba(0,0,0,.18) }
.home-vsem .cta-inner .cta-accent{
  position:absolute; right:0; bottom:-14px;
  width: min(42vw, 560px); height: clamp(120px, 16vw, 180px);
  background: var(--header-accent, #1E90FF);
  transform: skew(-18deg); transform-origin:right bottom;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  z-index:-1;
}

/* ===== CONTACT STRIP ===== */
.home-vsem .home-contactstrip{ background: linear-gradient(0deg, rgba(0,0,0,.04), rgba(0,0,0,0)); }
.home-vsem .contactstrip-inner{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap: clamp(12px,2.2vw,22px) }
.home-vsem .callback-mini{ display:flex; gap:.5rem; flex-wrap:wrap }
.home-vsem .callback-mini input{ padding:.6rem .75rem; border:1px solid #e5e7eb; border-radius:10px }
.home-vsem .callback-mini .btn{ padding:.65rem 1rem }

/* ===== Section title ===== */
.home-vsem .section-title{ margin:0 0 .6rem }

/* ===== Responsive ===== */
@media (max-width: 960px){
  .home-vsem .hero-inner{ grid-template-columns: 1fr; }
  .home-vsem .cta-inner{ grid-template-columns: 1fr; }
  .home-vsem .contactstrip-inner{ grid-template-columns: 1fr; }
}
/* ===== Slider look & feel ===== */
.home-slider,
.home-slider .slide{
  position:relative;
  height:70vh;              /* voelt groot en premium */
  min-height:420px;
  overflow:hidden;
}

.home-slider .slide-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.04);         /* subtiele zoom */
  filter:brightness(0.8);
}

.home-slider .slide-scrim{
  position:absolute; inset:0;
  background:#000;
  opacity:var(--slider-overlay, .55);   /* instelbaar via customizer var */
}

/* “Glazen” kaart */
.home-slider .slide-card{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(960px, 92vw);
  padding:36px 48px;
  border-radius:var(--radius, 12px);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  color:#fff;
  text-align:center;
}

.home-slider .slide-card h2{
  margin:0 0 .35em;
  font-size:clamp(28px, 4.5vw, 48px);
  line-height:1.15;
  color:#fff;
}
.home-slider .slide-card h2 em{
  font-style:normal;
  color:var(--color-primary);
}
.home-slider .slide-card p{
  margin:.3em 0 1.1em;
  font-size:clamp(14px, 1.8vw, 18px);
  opacity:.95;
}

/* CTA knop */
.home-slider .slide-card .btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:999px;
  background:var(--color-primary);
  color:#fff; text-decoration:none; font-weight:600;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s;
}
.home-slider .slide-card .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  opacity:.95;
}

/* Prev/Next pillen */
.home-slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(16,22,31,.55);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; cursor:pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:transform .15s ease, background .15s ease;
  z-index:5;
}
.home-slider .nav:hover{ transform:translateY(-50%) scale(1.05); background:rgba(16,22,31,.7); }
.home-slider .nav.prev{ left:16px; }
.home-slider .nav.next{ right:16px; }

/* Fades (en subtiele parallax) */
.home-slider .slide{ opacity:0; transition:opacity .6s ease; }
.home-slider .slide.is-active{ opacity:1; }
.home-slider .is-active .slide-bg{ transform:scale(1.02); transition:transform 5s ease; }

/* Veilig op mobiel */
@media (max-width: 640px){
  .home-slider, .home-slider .slide{ height:58vh; min-height:380px; }
  .home-slider .slide-card{ padding:22px 18px; width:min(600px, 92vw); }
}

/* ===== Knoppen: veilig (sloopt plugins niet) =====
   We stylen alleen WordPress block buttons + WooCommerce buttons.
   Geen globale input/button selectors, want daar worden plugins verdrietig van.
*/
:root{
  --vs-primary: var(--color-primary, #1a73e8);
  --vs-onprimary: #ffffff;
  --vs-primary-hover: color-mix(in srgb, var(--vs-primary) 88%, #000);
  --vs-primary-active: color-mix(in srgb, var(--vs-primary) 78%, #000);
  --vs-primary-border: color-mix(in srgb, var(--vs-primary) 35%, #000);
  --vs-ring: color-mix(in srgb, var(--vs-primary) 40%, #ffffff);
}

/* Gutenberg */
.wp-block-button__link,
.wp-element-button{
  background: var(--vs-primary);
  color: var(--vs-onprimary) !important;
  border: 1px solid var(--vs-primary-border);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none !important;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover{
  background: var(--vs-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.wp-block-button__link:active,
.wp-element-button:active{
  background: var(--vs-primary-active);
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.wp-block-button__link:focus,
.wp-element-button:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--vs-ring), 0 8px 20px rgba(0,0,0,.12);
}

/* Gutenberg outline */
.wp-block-button.is-style-outline .wp-block-button__link,
.is-style-outline .wp-element-button{
  background: transparent;
  color: var(--vs-primary) !important;
  border: 2px solid var(--vs-primary);
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-element-button:hover{
  background: color-mix(in srgb, var(--vs-primary) 12%, #fff);
}

/* WooCommerce (alleen binnen .woocommerce) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background: var(--vs-primary);
  color: var(--vs-onprimary) !important;
  border: 1px solid var(--vs-primary-border);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none !important;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background: var(--vs-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--vs-ring), 0 8px 20px rgba(0,0,0,.12);
}


/* ===== Header layout v9: menu onder zoekbalk, maar NIET gecentreerd ===== */
@media (min-width: 781px){
  .header-inner{flex-wrap: wrap;}
  /* tools (zoekbalk/cart) boven */
  .header-tools{order: 2;}
  /* menu eronder, links uitlijnen */
  .primary-nav{order: 3; width: 100%; margin-top: 10px;}
  .primary-nav .menu{justify-content: flex-start;}
}

/* ===== Back to top ===== */
.vs-back-to-top{
  position: fixed;
  right: 20px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  color: #111;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  cursor: pointer;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.vs-back-to-top span{font-size: 18px; line-height: 1; font-weight: 700;}
.vs-back-to-top.is-visible{opacity: 1; transform: translateY(0); pointer-events: auto;}
.back-to-top-off .vs-back-to-top{display:none !important;}

/* === Subtiele scheiding onder menubalk (v23) === */
.site-menu-bar,
.menu-bar,
.primary-navigation{
  position: relative;
  z-index: 5;
}

/* Accent-lijn */
.site-menu-bar::after,
.menu-bar::after,
.primary-navigation::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.03),
    var(--header-accent, #0f5132),
    rgba(0,0,0,0.03)
  );
}

/* Zachte schaduw */
.site-menu-bar::before,
.menu-bar::before,
.primary-navigation::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:10px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10),
    rgba(0,0,0,0)
  );
  pointer-events:none;
}

/* -----------------------------------------------------------
   Contact Center (VS-EM) - scoped styles
----------------------------------------------------------- */
.vscc{margin-top:18px}
.vscc-intro{max-width:920px;margin:0 0 18px;color:#222;line-height:1.6}
.vscc-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.vscc-col{display:grid;gap:18px}
.vscc-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.08);padding:18px}
.vscc-card-title{font-size:18px;font-weight:800;color:#d21f27;margin:0 0 6px}
.vscc-card-sub{color:#666;margin:0 0 14px;font-size:14px}

.vscc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vscc-tile{display:flex;gap:10px;align-items:center;border:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.02);border-radius:14px;padding:12px 14px;text-decoration:none}
.vscc-tile:hover{background:rgba(0,0,0,.03)}
.vscc-tile-ico{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.06);font-size:16px}
.vscc-tile-main{font-weight:800;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.vscc-map{border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.vscc-map iframe{width:100%;height:260px;border:0;display:block}

.vscc-locs{display:grid;gap:12px}
.vscc-loc{border:1px solid rgba(0,0,0,.06);border-radius:14px;background:rgba(0,0,0,.02);padding:12px}
.vscc-loc-title{font-weight:900;color:#111;margin:0 0 6px}
.vscc-loc-addr{white-space:pre-line;color:#444;margin:0 0 10px}
.vscc-pills{display:flex;gap:10px;flex-wrap:wrap}
.vscc-pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;border:1px solid rgba(0,0,0,.08);background:#fff;color:#111;text-decoration:none;font-weight:700;font-size:13px}
.vscc-pill:hover{background:rgba(0,0,0,.03)}

.vscc-socials{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vscc-social{display:flex;gap:12px;align-items:center;border:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.02);border-radius:14px;padding:12px 14px;text-decoration:none}
.vscc-social:hover{background:rgba(0,0,0,.03)}
.vscc-social-ico{width:38px;height:38px;border-radius:14px;background:#111;display:flex;align-items:center;justify-content:center}
.vscc-social-ico svg{width:20px;height:20px;fill:#fff}
.vscc-social-txt{font-weight:900;color:#111}

.vscc-empty{border:1px dashed rgba(0,0,0,.2);border-radius:14px;padding:14px;color:#555;background:rgba(0,0,0,.02)}
.vscc-muted{color:#666}

/* Openingstijden widget binnen Contact Center: iets strakker */
.vscc-openwrap .opening-hours-wrapper,
.vscc-openwrap .openingstijden-wrapper{margin:0 !important}
.vscc-openwrap .opening-hours-tabs{background:rgba(0,0,0,.05);border-radius:14px;padding:10px}
.vscc-openwrap .opening-hours-tabs button,
.vscc-openwrap .opening-hours-tabs a{border-radius:999px !important}

@media (max-width: 980px){
  .vscc-cols{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .vscc-tiles{grid-template-columns:1fr}
  .vscc-socials{grid-template-columns:1fr}
  .vscc-form-grid{grid-template-columns:1fr}
  .vscc-form-row.is-half{grid-column:1/-1}
}


/* Contact Center form */
.vscc-form{display:grid;gap:14px}
.vscc-form-intro{margin:0 0 14px;color:#344054;line-height:1.65}
.vscc-form-intro p{margin:0 0 12px}
.vscc-form-intro p:last-child{margin-bottom:0}
.vscc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.vscc-form-row{display:grid;gap:8px}
.vscc-form-row.is-full{grid-column:1/-1}
.vscc-form-row.is-half{grid-column:auto}
.vscc-form-row label{font-weight:800;color:#1f2937;font-size:14px}
.vscc-form-row input[type="text"],
.vscc-form-row input[type="email"],
.vscc-form-row input[type="tel"],
.vscc-form-row select,
.vscc-form-row textarea{width:100%;border:1px solid rgba(0,0,0,.10);border-radius:14px;background:#fff;padding:12px 14px;font:inherit;color:#111;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.vscc-form-row textarea{min-height:140px;resize:vertical}
.vscc-form .req{color:#d21f27}
.vscc-check{display:flex;align-items:center;gap:10px;font-weight:700}
.vscc-check input{width:18px;height:18px}
.vscc-submit{appearance:none;border:0;border-radius:999px;padding:14px 20px;background:var(--header-accent,#0f766e);color:#fff;font-weight:800;cursor:pointer;justify-self:start;box-shadow:0 14px 30px rgba(0,0,0,.12)}
.vscc-submit:hover{filter:brightness(.96)}
.vscc-alert{border-radius:14px;padding:12px 14px;margin:0 0 14px;font-weight:700}
.vscc-alert.is-success{background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.22);color:#166534}
.vscc-alert.is-error{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.22);color:#991b1b}
.vscc-hp{position:absolute;left:-999em;opacity:0;pointer-events:none}


.vscc-choice-list{display:grid;gap:10px}
.vscc-choice{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(0,0,0,.10);border-radius:14px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);font-weight:700;color:#1f2937}
.vscc-choice input{width:18px;height:18px;flex:0 0 18px}
.vscc-choice-list.is-invalid{padding:10px;border:1px solid rgba(210,31,39,.35);border-radius:16px;background:rgba(210,31,39,.04)}
.vscc-choice-list-radio .vscc-choice,.vscc-choice-list-checkbox .vscc-choice{margin:0}

/* v40 contact form width/layout refinements */
.vscc-form-grid{align-items:start}
.vscc-form-row.is-half{grid-column:span 1}
.vscc-form-row.is-full{grid-column:1 / -1}
@media (max-width: 860px){.vscc-form-grid{grid-template-columns:1fr}.vscc-form-row.is-half{grid-column:1/-1}}
.vscc-card-sub:empty{display:none}