/** Shopify CDN: Minification failed

Line 7:0 All "@import" rules must come first

**/
.wm-font-load{}
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&display=swap');
:root{
  --font-body-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  --font-heading-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  --font-body-weight:400; --font-body-weight-bold:700; --font-heading-weight:800;
}
body,.h0,.h1,.h2,.h3,h1,h2,h3,h4,button,input,select,textarea,a{font-family:var(--font-heading-family);}
h1,h2,.h0,.h1{font-weight:800;letter-spacing:-.02em;}

/* ---------------------------------------------------------------
   Blogartikel — opmaak (Loom 05:17 / 05:47, punt 2.12)
   Jordi: "de format is nog niet helemaal top" + "die foto is veel te
   groot voor die pagina, kan je die veel verkleinen, dat ziet er
   minder onscherp uit". De bronfoto is 1100px breed maar werd op
   1300px getoond, dus opgeblazen. Nooit meer boven de eigen breedte.
   --------------------------------------------------------------- */
.article-template__hero-container,
.article-template__hero-adapt,
.article-template__hero-small,
.article-template__hero-medium,
.article-template__hero-large,
.article-template__hero{
  max-width: 56rem;      /* was 76rem — foto vulde nog het hele scherm */
  margin-left: auto;
  margin-right: auto;
}
.article-template__hero-adapt,
.article-template__hero-small,
.article-template__hero-medium,
.article-template__hero-large,
.article-template__hero{
  border-radius: 2.4rem;
  overflow: hidden;
}
.article-template__hero img,
.article-template__hero-adapt img,
.article-template__hero-medium img,
.article-template__hero-container img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* leesbare regellengte en fatsoenlijke tekstgrootte */
.article-template__content,
.article-template .rte{
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.75rem;
  line-height: 1.75;
  color: #3d4a39;
}
.article-template__content h2,
.article-template .rte h2{ font-size: 3rem; font-weight: 800; letter-spacing: -.015em;
  color: #111b0e; margin: 4rem 0 1.2rem; line-height: 1.2; }
.article-template__content h3,
.article-template .rte h3{ font-size: 2.2rem; font-weight: 800; color: #111b0e;
  margin: 3rem 0 1rem; }
.article-template__content p,
.article-template .rte p{ margin: 0 0 1.8rem; }
.article-template__content img,
.article-template .rte img{ max-width: 100%; height: auto; border-radius: 1.6rem; }

.article-template__title{ max-width: 72rem; margin-left: auto; margin-right: auto;
  font-size: clamp(3.2rem, 5vw, 4.8rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.08; }
.article-template__link{ max-width: 72rem; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------
   Blogoverzicht /blogs/news — 3 netjes naast elkaar, kleine foto's.
   Dawn zette het eerste artikel als volle-breedte banner (1100px uit
   een bron van 550px, dus 2x opgeblazen en daardoor onscherp).
   --------------------------------------------------------------- */
@media screen and (min-width: 990px){
  .blog-articles,
  .blog-articles--collage{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3.2rem !important;
    max-width: 120rem;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 750px) and (max-width: 989px){
  .blog-articles{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2.4rem !important; }
}
/* eerste artikel niet meer uitvergroot */
.blog-articles__article.article--large,
.blog-articles--collage .blog-articles__article:first-child{
  grid-column: auto;
}
.blog-articles__article .card__media,
.blog-articles__article .media{
  border-radius: 2rem;
  overflow: hidden;
}
.blog-articles__article img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-articles__article .card__heading,
.blog-articles__article h3{ font-size: 1.9rem; line-height: 1.25; font-weight: 800; }
.blog-articles__article .article-card__excerpt{ font-size: 1.45rem; line-height: 1.6; color: #5a6558; }

@media screen and (max-width: 989px){
  .blog-articles--collage, .blog-articles{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 749px){
  .blog-articles--collage, .blog-articles{ grid-template-columns: 1fr; }
}

/* ===============================================================
   CHAT-FAQ — vraag/antwoord als een berichtenapp (Loom 15:23)
   Jordi: "dit foefje, dat je hem zo maakt als een soort WhatsApp-tekst".
   Werkt zonder JavaScript via <details>/<summary>.
   Gebruik: .wmchat > .wmchat__row (details) > .wmchat__q (summary) + .wmchat__a
   =============================================================== */
.wmchat{
  max-width: 72rem;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #eceff0;
  border-radius: 2.8rem;
  padding: 3.2rem 2.8rem;
  box-shadow: 0 24px 60px -40px rgba(17,27,14,.35);
}
.wmchat__stamp{
  display: block; text-align: center; font-size: 1.2rem; color: #9aa0a6;
  margin-bottom: 2.4rem; letter-spacing: .01em;
}
.wmchat__row{ margin-bottom: 1.2rem; }
.wmchat__row:last-child{ margin-bottom: 0; }

/* vraag = grijze bubbel links */
.wmchat__q{
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem;
  padding: 0; margin: 0;
}
.wmchat__q::-webkit-details-marker{ display: none; }
.wmchat__q > span:first-child{
  background: #e9e9eb; color: #111b0e; font-size: 1.5rem; font-weight: 500; line-height: 1.45;
  padding: 1.1rem 1.7rem; border-radius: 2rem 2rem 2rem .6rem; max-width: 78%;
  transition: background .16s ease;
}
.wmchat__row[open] .wmchat__q > span:first-child{ background: #dfe0e3; }
.wmchat__plus{
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 999px;
  background: #d5d7db; color: #5f6368; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  transition: transform .22s ease, background .18s ease, color .18s ease;
}
.wmchat__row[open] .wmchat__plus{ transform: rotate(45deg); background: #4caf50; color: #fff; }

/* antwoord = groene bubbel rechts */
.wmchat__a{
  display: flex; justify-content: flex-end; margin-top: .9rem;
  animation: wmchat-in .28s cubic-bezier(.2,.7,.2,1);
}
.wmchat__a > span{
  background: #4caf50; color: #fff; font-size: 1.5rem; line-height: 1.5;
  padding: 1.3rem 1.8rem; border-radius: 2rem 2rem .6rem 2rem; max-width: 82%;
}
@keyframes wmchat-in{ from{ opacity:0; transform: translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

@media screen and (max-width: 749px){
  .wmchat{ padding: 2.4rem 1.8rem; border-radius: 2.2rem; }
  .wmchat__q > span:first-child,
  .wmchat__a > span{ max-width: 88%; font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce){ .wmchat__a{ animation: none; } }

/* ---------------------------------------------------------------
   Trustpilot-balk — globaal, want hij staat op meerdere pagina's
   (homepage, /producten, /reviews). Loom 04:42 / 08:42 / 11:51.
   --------------------------------------------------------------- */
.wmr__tp{display:flex;justify-content:center;margin:4.8rem auto 0}
.wmr__tpbox{display:inline-flex;align-items:center;gap:2rem;background:#fff;
  border:2px solid #2f6ecb;border-radius:1.6rem;padding:1.8rem 2.6rem;text-decoration:none}
.wmr__tpstars{display:flex;gap:.2rem}
.wmr__tpstars span{width:3rem;height:3rem;background:#00b67a;display:flex;align-items:center;justify-content:center}
.wmr__tpstars svg{width:2.2rem;height:2.2rem;fill:#fff}
.wmr__tpscore b{font-size:2.4rem;font-weight:900;color:#111b0e;letter-spacing:-.02em}
.wmr__tpscore i{font-style:normal;font-size:1.5rem;color:#6b7684}
.wmr__tpsub{display:block;font-size:1.3rem;color:#6b7684;margin-top:.2rem}
.wmr__tplogo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.7rem;color:#111b0e}
.wmr__tplogo svg{width:2.2rem;height:2.2rem;fill:#00b67a}