/*
 * Sitebrede huisstijl van Online Matters.
 *
 * De regels komen uit de eigen stijlblokken van de voorpagina (pagina 7275) en
 * dekken alleen de bovenbalk, de kop en de voet. De inhoud van de pagina's
 * blijft van het thema en van Elementor. Laadt na style.css van het
 * child-thema, zodat gelijke selectors het van de oudere laag winnen.
 */

/* De omhullende laag geeft alleen de erfelijke eigenschappen door en vormt
   geen eigen vak. Zo blijft de kop plakken aan de bovenkant van het venster
   in plaats van aan een omhulsel dat maar een kopregel hoog is. */
.om-sitewrap { display: contents; }

/* De kop van het thema is vervangen; het lege omhulsel blijft anders staan. */
header.xts-header { display: none !important; }

/* ---- uit stijlblok 7 van de voorpagina ---- */

:root { --papier: #FDFCFA; /* warm, uit het daglicht op hun foto's */ --wit: #FFFFFF; --inkt: #1A231E; --zacht: #63716A; /* donker genoeg voor 4,5:1 op papier en op wit */ --groen: #00775A; --blad: #68C038; --hout: #C1874B; /* het tafelblad waar ze aan zitten */ --diep: #06342A; --lijn: rgba(26,35,30,.10); }
.om,
.om * { box-sizing: border-box; }
body { margin:0; background: var(--papier); }
.om { font-family: 'DM Sans', system-ui, sans-serif; color: var(--inkt); background: var(--papier); font-size: 1.05rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.om-breed { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.om-decor { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.om-decor i { position:absolute; display:block; border-radius:50%; filter: blur(70px); opacity:.85; animation: om-drijf 26s ease-in-out infinite alternate; }
.om-decor i:nth-child(1) { inline-size:34rem; block-size:34rem; inset-block-start:-8rem; inset-inline-start:-10rem; background: radial-gradient(circle, rgba(104,192,56,.55), transparent 70%); }
.om-decor i:nth-child(2) { inline-size:28rem; block-size:28rem; inset-block-start:38%; inset-inline-end:-9rem; background: radial-gradient(circle, rgba(0,119,90,.45), transparent 70%); animation-duration: 34s; animation-delay:-8s; }
.om-decor i:nth-child(3) { inline-size:24rem; block-size:24rem; inset-block-end:-6rem; inset-inline-start:22%; background: radial-gradient(circle, rgba(193,135,75,.38), transparent 70%); animation-duration: 30s; animation-delay:-16s; }
@keyframes om-drijf { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw,-3vh,0) scale(1.12); } }
.om > *:not(.om-decor):not(.om-zweefknop) { position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce) {
.om-decor i { animation:none; }
}
.om-bovenbalk { background: var(--groen); color: var(--papier); font-size:.85rem; }
.om-bovenbalk__in { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.5rem; flex-wrap:wrap; }
.om-bovenbalk__volg { display:flex; align-items:center; gap:.75rem; }
.om-bovenbalk__volg > span { opacity:.8; }
.om-bovenbalk a { display:inline-flex; align-items:center; gap:.4rem; opacity:.9; transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.3,1); }
.om-bovenbalk a:hover { opacity:1; transform: translateY(-2px); }
.om-bovenbalk svg { display:block; }
.om-bovenbalk__contact { display:flex; align-items:center; gap:1.4rem; }
@media (max-width: 620px) {
.om-bovenbalk__contact span { display:none; }
}
.om-start { display:inline-flex; align-items:center; gap:.5rem; background: var(--groen); color: var(--papier); padding:.7rem 1.3rem; border-radius:999px; font-weight:650; font-size:.98rem; white-space:nowrap; transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s ease; }
.om-start:hover { transform: translateY(-2px); background: var(--diep); }
.om-kop__acties { display:flex; align-items:center; gap:.7rem; }
@media (max-width: 700px) {
.om-bel { display:none; }
}
.om .om-bel:hover,
.om .om-bel:focus-visible { color: var(--papier); }
.om .om-start:hover,
.om .om-start:focus-visible { color: var(--papier); }
.om .om-nummer:hover,
.om .om-nummer:focus-visible { color: var(--blad); }
.om .om-bovenbalk a:hover { color: var(--papier); }
.om .om-voet a:hover { color: var(--blad); }
.om-kop { padding-block: 1.2rem; position:sticky; top:0; z-index:40; background: rgba(247,244,238,.88); backdrop-filter: blur(12px); }
.om-kop__in { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.om-kop img { block-size: 30px; }
.om-kop nav { display:flex; gap:1.4rem; color: var(--zacht); font-size:.98rem; }
.om-kop nav a:hover { color: var(--groen); }
@media (max-width: 860px) {
.om-kop nav { display:none; }
}
.om-bel { display:inline-flex; align-items:center; gap:.6rem; background: var(--inkt); color: var(--papier); padding:.7rem 1.2rem; border-radius: 999px; font-weight:600; font-size:.98rem; transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s ease; }
.om-bel:hover { transform: translateY(-2px); background: var(--groen); }
.om-bel__stip { inline-size:.5rem; block-size:.5rem; border-radius:50%; background: var(--blad); }
@keyframes om-op { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@keyframes om-klop { 0%,100% { box-shadow:0 0 0 0 rgba(104,192,56,.6);} 50% { box-shadow:0 0 0 .7rem rgba(104,192,56,0);} }
.om-bel__nu { font-size:.8rem; opacity:.8; font-weight:500; }
.om-nummer { display:inline-flex; align-items:center; gap:.8rem; font-size: clamp(1.5rem,3.2vw,2.3rem); font-weight:700; letter-spacing:-.03em; color: var(--blad); transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.om-nummer:hover { transform: translateX(4px); }
.om-voet { background: var(--inkt); color: rgba(247,244,238,.72); padding-block: clamp(2.5rem,5vw,4rem) 1.5rem; }
.om-voet__kolommen { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(1.5rem,3vw,3rem); padding-block-end: 2.5rem; border-block-end: 1px solid rgba(247,244,238,.14); }
@media (max-width: 960px) {
.om-voet__kolommen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.om-voet__kolommen { grid-template-columns: 1fr; }
}
.om-voet h4 { margin:0 0 .9rem; color: var(--papier); font-size:.95rem; font-weight:650; letter-spacing:0; }
.om-voet li { margin-block-end:.45rem; font-size:.92rem; }
.om-voet a:hover { color: var(--blad); }
.om-voet__over img { block-size:28px; margin-block-end:1rem; }
.om-voet__over p { font-size:.94rem; max-inline-size:34ch; margin-block-end:1.2rem; }
.om-voet__gegevens { display:grid; gap:.35rem; font-size:.94rem; }
.om-voet__gegevens a { color: var(--papier); font-weight:600; }
.om-voet__onder { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; padding-block-start:1.4rem; font-size:.86rem; }
.om-voet__onder ul { display:flex; flex-wrap:wrap; gap:1.2rem; }
.om-voet__onder li { margin:0; }
@media (prefers-reduced-motion: reduce) {
.om * { animation:none !important; transition-duration:1ms !important; }
}
.om-voet { background:none; padding-block:0; }
.om-voet__cta { background: var(--groen); }
.om-voet__cta-in { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.7rem; }
.om-voet__cta-tekst { margin:0; color: var(--papier); font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:650; }
.om-voet__cta-btn { display:inline-flex; align-items:center; gap:.5rem; border:2px solid var(--papier); color: var(--papier); padding:.7rem 1.3rem; border-radius:999px; font-weight:650; font-size:.98rem; white-space:nowrap; transition: background-color .18s ease, color .18s ease; }
.om-voet__cta-btn:hover { background: var(--papier); color: var(--groen); }
.om-voet__kolommen-wrap { background: linear-gradient(175deg, var(--diep) 30%, var(--groen) 100%); padding-block: clamp(2.5rem,5vw,4rem) 0; }
.om-voet__badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-block:1rem 0 0; }
.om-voet__badges img { block-size:34px; inline-size:34px; object-fit:cover; border-radius:6px; background: var(--papier); padding:.3rem; }
.om-voet__social { display:flex; gap:.55rem; margin-block-start:1.1rem; }
.om-voet__social a { display:inline-flex; align-items:center; justify-content:center; inline-size:2rem; block-size:2rem; border-radius:50%; border:1px solid rgba(247,244,238,.3); color: var(--papier); }
.om-voet__social a:hover { background: rgba(247,244,238,.15); }
.om-voet__onder { background: var(--diep); padding-block:1rem; margin:0; }
.om-voet__onder-in { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; }
@media (max-width:760px) {
.om-voet__cta-in { flex-direction:column; align-items:flex-start; }
}
.om-bel,
.om-start {
  border-radius: 0;
  height: 52px;
  box-sizing: border-box;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 16px;
  line-height: 32px;
}
.om-start {
  background: #FD8A32;
  border: 2px solid #FD8A32;
  color: #fff;
}
.om-start:hover {
  background: #fff;
  color: #FD8A32;
  transform: none;
}
.om-bel {
  background: var(--inkt);
  border: 2px solid var(--inkt);
  color: #fff;
}
.om-bel:hover {
  background: #fff;
  color: var(--inkt);
  transform: none;
}
.om-start svg { flex-shrink:0; }
.om-decor i,
.om-start,
.om-bel,
.om-bel__stip,
.om-voet__cta-btn,
.om-voet__badges img,
.om-voet__social a {
  border-radius: 0 !important;
}

/* ---- uit stijlblok 8 van de voorpagina ---- */
.om-voet .om-voet__badges { gap:.4rem; align-items:center; margin-block-start:1.3rem; }
.om-voet .om-voet__badges img { block-size:4.4rem !important; inline-size:auto !important; max-inline-size:8rem; object-fit:contain; background:transparent !important; padding:0 !important; border:0 !important; box-shadow:none !important; }

/* ---- uit stijlblok 9 van de voorpagina ---- */
.om-decor i:nth-child(1) { background: radial-gradient(circle, rgba(0,119,90,.85), transparent 70%) !important; }
.om-decor i:nth-child(2) { background: radial-gradient(circle, rgba(6,52,42,.78), transparent 70%) !important; }
.om-decor i:nth-child(3) { background: radial-gradient(circle, rgba(0,119,90,.55), transparent 70%) !important; }
.om-voet .om-voet__badges { display: flex; flex-wrap: nowrap; align-items: center; gap: .7rem; }
.om-bel { white-space: nowrap; }
@media (max-width: 640px) {
.om-kop__acties { flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; }
.om-bel { font-size: .9rem; }
}
.om-voet .om-voet__badges img[src*="channable"] { transform: translateY(-4px); }
.om-voet .om-voet__badges img[src*="shopify"] { transform: translateY(-1px); }
.om-voet .om-voet__badges img { block-size: 2.7rem !important; inline-size: auto !important; max-inline-size: 5.4rem !important; flex: 0 0 auto; object-fit: contain !important; object-position: center !important; }

/* ---- uit stijlblok 10 van de voorpagina ---- */
.om-kop img { block-size: 42px !important; inline-size: auto !important; }
@media (max-width: 900px) {
.om-kop img { block-size: 34px !important; }
}

/* ---- uit stijlblok 11 van de voorpagina ---- */
.om-kop img { block-size: 38px !important; inline-size: auto !important; max-inline-size: 100%; }
@media (max-width: 900px) {
.om-kop img { block-size: 32px !important; }
}
@media (max-width: 480px) {
.om-kop img { block-size: 27px !important; }
}
.om .om-inlog { display:inline-flex; align-items:center; gap:.45rem; padding:.6rem .95rem; border:1px solid var(--lijn); background: var(--wit); color: var(--diep); font-weight:650; font-size:.92rem; white-space:nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.om .om-inlog:hover { background: var(--diep); color: var(--papier); border-color: var(--diep); }
.om-inlog svg { flex:0 0 auto; }
@media (max-width: 1050px) {
.om-inlog span { display:none; }
.om .om-inlog { padding:.6rem .7rem; }
}
@media (max-width: 620px) {
.om-kop__in { flex-wrap: wrap; row-gap: .7rem; }
.om-kop__acties { inline-size: 100%; justify-content: flex-start; gap: .5rem; flex-wrap: nowrap; }
.om .om-bel { font-size: .85rem; padding-inline: .75rem; }
.om .om-start { font-size: .85rem; padding-inline: .85rem; }
.om-kop img { block-size: 26px !important; }
}
.om-kop nav a { white-space: nowrap; }
.om-kop__in { gap: clamp(.8rem,1.8vw,2rem); }
.om-kop nav { gap: clamp(.7rem,1.5vw,1.6rem); }
@media (max-width: 1250px) {
.om-inlog span { display:none; }
.om .om-inlog { padding:.6rem .7rem; }
}
/* De voorpagina houdt kop en voet op min(1440px, 100% - 3rem). Dezelfde maat
   voor elke pagina, want het is letterlijk dezelfde balk. */
.om-pand .om-breed { width: min(1440px, 100% - 3rem); }
@media (max-width: 900px) {
.om-pand .om-breed { width: min(1320px, 100% - 2rem); }
}
/* ---- kop boven de pagina-inhoud ----
   De voorpagina zet elk direct kind van .om op z-index 1, kop en secties
   inbegrepen. Het uitklappaneel valt daardoor achter de tekst van de eerste
   sectie, die verderop in de DOM staat. De regel hieronder tilt de kop uit die
   rij; hij staat bewust niet in een mediaquery, want het paneel bestaat op elke
   breedte. `!important` is nodig omdat de voorpagina haar eigen kopie van de
   z-index-regel inline meelevert, na deze stijllaag. */
.om .om-kop { z-index:70 !important; }

/* ---- mobiel menu, uit stijlblok 13 van de voorpagina ---- */
.om .om-menuknop { display:none; }
@media (max-width:900px) {
.om .om-kop { position:relative; }
.om .om-menuknop { display:inline-flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px; inline-size:40px; block-size:40px; padding:0; cursor:pointer; background:var(--wit); border:1px solid var(--lijn); }
.om .om-menuknop span { display:block; inline-size:18px; block-size:2px; background:var(--inkt); transition:transform .2s ease,opacity .2s ease; }
.om .om-kop--open .om-menuknop span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.om .om-kop--open .om-menuknop span:nth-child(2) { opacity:0; }
.om .om-kop--open .om-menuknop span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.om .om-kop--open nav { display:flex !important; flex-direction:column; position:absolute; inset-inline:0; inset-block-start:100%; background:var(--wit); padding:.6rem 1.25rem 1.1rem; gap:0; box-shadow:0 24px 44px -22px rgba(0,0,0,.35); z-index:60; }
.om .om-kop--open nav a { padding-block:.75rem; font-size:1rem; border-block-end:1px solid var(--lijn); }
.om .om-kop--open nav a:last-child { border-block-end:0; }
.om .om-kop { z-index:70 !important; }
.om .om-kop--open { z-index:90 !important; }
}
@media (max-width:620px) {
.om .om-kop .om-bel { display:none !important; }
.om .om-kop img { block-size:24px !important; }
.om .om-menuknop { inline-size:38px !important; block-size:38px !important; }
.om .om-kop__acties>a { block-size:38px !important; }
.om .om-inlog { inline-size:38px !important; }
.om .om-start { padding-inline:.6rem !important; }
}

/* ---- eigen aanvullingen voor het sitebrede gebruik ---- */
/* Links in kop en voet erven hun kleur; het thema kleurt ze anders groen. */
.om-bovenbalk a, .om-kop a, .om-voet a { color: inherit; text-decoration: none; }
.om-kop nav a { color: var(--zacht); }
.om-voet ul { list-style: none; margin: 0; padding: 0; }
.om-voet__onder ul { list-style: none; margin: 0; padding: 0; }
/* De voet staat los van de laatste sectie van de pagina. */
.om-voet { margin-block-start: 0; }

/* ---- correcties na de meting van 9 september ---- */
/* De regel hierboven kleurt ook de knoppen, die daardoor donker op donker
   staan. De knoppen krijgen hun eigen kleur terug met hogere specificiteit. */
.om-kop .om-bel { color: #fff; }
.om-kop .om-inlog { color: var(--diep); }
.om-kop .om-bel:hover,
.om-kop .om-bel:focus-visible { color: var(--inkt); }
.om-kop .om-inlog:hover { color: var(--papier); }

/* Telefoonicoon en korte knoptekst horen alleen op smalle schermen. */
.om .om-bel__ico { display: none; }
.om .om-start__kort { display: none; }
.om-start svg { flex-shrink: 0; }
.om-bel { white-space: nowrap; }

/* Het thema kleurt de menuknop; die staat hier los van de tekstkleur. */
.om .om-menuknop { color: var(--inkt); font-size: 1rem; font-weight: 400; border-radius: 0; }

@media (max-width: 640px) {
.om-kop__acties { flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; }
.om-bel { font-size: .9rem; }
}
@media (max-width: 620px) {
.om .om-kop__acties { margin-inline-start: auto; inline-size: auto !important; justify-content: flex-end !important; gap: .35rem !important; flex-wrap: nowrap !important; }
.om .om-bel__stip { display: none !important; }
.om .om-bel__nr { display: none !important; }
.om .om-bel__ico { display: block !important; }
.om .om-bel { padding: .55rem .7rem !important; inline-size: 40px !important; padding-inline: 0 !important; }
.om .om-start__vol { display: none !important; }
.om .om-start__kort { display: inline !important; }
.om .om-start { padding: .55rem .8rem !important; font-size: .85rem !important; padding-inline: .75rem !important; }
.om .om-inlog { padding: .55rem .65rem !important; inline-size: 40px !important; padding-inline: 0 !important; }
.om .om-kop__acties > a { block-size: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-block: 0 !important; }
}
@media (max-width: 520px) {
.om .om-kop__acties { gap: .3rem !important; }
.om .om-kop__acties .om-bel,
.om .om-kop__acties .om-start { font-size: .74rem !important; padding-inline: .6rem !important; }
.om .om-kop__acties .om-inlog { padding-inline: .5rem !important; }
}

/* De voorpagina sluit af met dit blok; die volgorde bepaalt de eindmaten. */
@media (max-width: 620px) {
.om .om-kop__acties { gap: .35rem !important; }
.om .om-kop .om-bel { display: none !important; }
.om .om-menuknop { inline-size: 38px !important; block-size: 38px !important; }
.om .om-kop__acties > a { block-size: 38px !important; }
.om .om-inlog { inline-size: 38px !important; }
.om .om-start { padding-inline: .6rem !important; }
}
.om .om-menuknop { background: var(--wit); }

/* ================================================================
   Contentafstemming: de rest van de site in de vormentaal van de
   voorpagina. Gemeten op 9 september 2026, na de kop- en voetwissel.

   Wat hier NIET in staat: sitebrede sectiepadding. De verticale ruimte
   van de Elementor-secties blijft zoals ze is; de kop is niet langer
   vast, dus geen enkele titel valt nog achter de kopbalk. Forceren van
   64/64 op elke sectie zou de opmaak van 168 pagina's verschuiven
   zonder dat iemand die pagina's heeft nagelopen.
   ================================================================ */

/* ---- een knopvorm: alles rechthoekig, zoals op de voorpagina ---- */
body.om-huisstijl a.xts-button,
body.om-huisstijl .elementor-button,
body.om-huisstijl input[type="submit"],
body.om-huisstijl button[type="submit"],
body.om-huisstijl .woocommerce a.button,
body.om-huisstijl .woocommerce button.button,
body.om-huisstijl .woocommerce input.button,
body.om-huisstijl button.woocommerce-button,
body.om-huisstijl button.searchsubmit,
body.om-huisstijl .gform_button,
body.om-huisstijl .wpcf7-submit,
body.om-huisstijl .omlb__knop,
body.om-huisstijl .xts-btn,
body.om-huisstijl .xts-search-button {
	border-radius: 0 !important;
}

/* ---- kaarten: rechthoekig, met de schaduw van de voorpagina ---- */
body.om-huisstijl article.xts-post,
body.om-huisstijl article.xts-single-post,
body.om-huisstijl .elementor-post,
body.om-huisstijl .xts-post-image,
body.om-huisstijl .xts-post-image img,
body.om-huisstijl .xts-post img {
	border-radius: 0 !important;
}

/* ---- koptypografie ---- */
/* De voorpagina: h1 49,6 px desktop en 30,4 px mobiel, gewicht 700.
   De maat wordt afgedwongen, de kleur niet: een witte titel op een
   donkere sectie moet wit blijven. */
body.om-huisstijl h1,
body.om-huisstijl .xts-page-title h1,
body.om-huisstijl .entry-title,
body.om-huisstijl h1.elementor-heading-title {
	font-size: clamp(1.9rem, 3.44vw, 3.1rem) !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.022em !important;
}

body.om-huisstijl h2,
body.om-huisstijl h2.elementor-heading-title {
	font-size: clamp(1.5rem, 2.67vw, 2.4rem) !important;
	font-weight: 700 !important;
	line-height: 1.14 !important;
	letter-spacing: -0.022em !important;
}

body.om-huisstijl h3,
body.om-huisstijl h3.elementor-heading-title {
	font-weight: 700;
	letter-spacing: -0.022em;
}

/* De archief- en WooCommerce-koppen staan op #242424; dat is de vierde
   grijstint op de site en hoort er niet. */
body.om-huisstijl .xts-page-title h1,
body.om-huisstijl .woocommerce-products-header h1,
body.om-huisstijl .page-title,
body.om-huisstijl h1.entry-title {
	color: var(--inkt);
}

/* ---- bodytekst: de grijswaarde van de voorpagina ---- */
/* Zonder !important, zodat Elementor-secties die hun tekst bewust wit
   of donker zetten hun eigen kleur houden. */
body.om-huisstijl .elementor-widget-text-editor,
body.om-huisstijl .elementor-widget-text-editor p,
body.om-huisstijl .elementor-widget-theme-post-content p,
body.om-huisstijl .entry-content > p {
	font-size: 1.12rem;
	line-height: 1.6;
	color: var(--zacht);
}

/* ---- broodkruimels: #A5A5A5 haalt ratio 2,4 en is te licht ---- */
body.om-huisstijl .xts-breadcrumbs,
body.om-huisstijl .xts-breadcrumbs a,
body.om-huisstijl nav.woocommerce-breadcrumb,
body.om-huisstijl nav.woocommerce-breadcrumb a,
body.om-huisstijl .breadcrumb_last {
	color: var(--zacht) !important;
}
body.om-huisstijl .breadcrumb_last {
	color: var(--inkt) !important;
}

/* ---- een contentbreedte: 1320 px, zoals .om-breed op de voorpagina ---- */
body.om-huisstijl .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1320px;
}
body.om-huisstijl .omlb__breed {
	width: min(1320px, 100% - 2.5rem);
}

/* De omlb-pagina's van Rick houden op mobiel 5 px marge over; de
   voorpagina houdt er 16 aan. */
@media (max-width: 620px) {
	body.om-huisstijl .omlb__breed {
		width: min(1320px, 100% - 2rem);
	}
}

/* ---- WooCommerce-meldingen buiten het palet ---- */
body.om-huisstijl .woocommerce-info,
body.om-huisstijl .woocommerce-message {
	background: var(--groen) !important;
	color: var(--papier) !important;
	border-radius: 0 !important;
}
body.om-huisstijl .woocommerce-info::before,
body.om-huisstijl .woocommerce-message::before {
	color: var(--papier) !important;
}

/* ---- tekstpagina's zonder Elementor (support, vacatures) ---------------
   Deze pagina's staan in de gewone post_content. Ze lenen de vormtaal van de
   voorpagina: rechte hoeken, papier als grond, groen voor de aanzet. De
   klassen staan los van de Elementor-opmaak zodat ze nergens anders raken. */

.om-tp { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem); }
.om-tp__kop { max-width: 46rem; }
.om-tp h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; color: var(--inkt); margin: 0 0 1rem; }
.om-tp__intro { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.6; color: var(--zacht); margin: 0; }

.om-tp__kaarten { display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); margin-block: clamp(2.5rem, 5vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.om-tp__kaart { background: var(--wit); padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: .55rem; }
.om-tp__kaart h2 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--inkt); margin: 0; }
.om-tp__kaart p { font-size: 1rem; line-height: 1.6; color: var(--zacht); margin: 0; }
.om-tp__kaart a { color: var(--groen); font-weight: 600; text-decoration: none; margin-block-start: auto; padding-block-start: .4rem; }
.om-tp__kaart a:hover { text-decoration: underline; }

.om-tp__blok { max-width: 46rem; }
.om-tp__blok h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--inkt); margin: 0 0 .9rem; }
.om-tp__blok p { font-size: 1.08rem; line-height: 1.65; color: var(--zacht); margin: 0 0 1rem; }
.om-tp__blok a { color: var(--groen); font-weight: 600; }

.om-tp__lijst { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.om-tp__lijst li { position: relative; padding-inline-start: 1.6rem; font-size: 1.08rem; line-height: 1.6; color: var(--zacht); }
.om-tp__lijst li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; inline-size: .5rem; block-size: .5rem; background: var(--blad); }

.om-tp__aanzet { background: var(--diep); color: var(--wit); padding: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
.om-tp__aanzet h2 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 700; line-height: 1.2; color: var(--wit); margin: 0; }
.om-tp__aanzet p { font-size: 1.02rem; line-height: 1.55; color: rgba(255,255,255,.82); margin: .5rem 0 0; max-width: 34rem; }
.om-tp__knoppen { display: flex; flex-wrap: wrap; gap: .7rem; }
.om-tp__knop { display: inline-flex; align-items: center; gap: .5rem; background: #FD8A32; color: var(--inkt); font-weight: 700; font-size: 1rem; padding: .95rem 1.5rem; text-decoration: none; border: 0; }
.om-tp__knop:hover { background: #E97A22; color: var(--inkt); }
.om-tp__knop--rand { background: transparent; color: var(--wit); border: 1px solid rgba(255,255,255,.4); }
.om-tp__knop--rand:hover { background: rgba(255,255,255,.1); color: var(--wit); }

@media (max-width: 700px) {
.om-tp__aanzet { flex-direction: column; align-items: flex-start; }
}

/* ---- uitklapmenu in de kop ---------------------------------------------
   Herstelt de menustructuur die het oude thema als mega-menu meebracht: de
   diensten en de bedrijfspagina's hangen weer onder hun hoofdregel. Op smalle
   vensters wordt het een accordeon binnen het schuifmenu. */

.om-kop nav .om-nav__blok { position: relative; display: flex; align-items: center; gap: .25rem; }
.om-kop nav .om-nav__hoofd { display: inline-flex; align-items: center; gap: .3rem; }
.om-nav__pijl { flex: none; transition: transform .18s ease; }
.om-nav__blok:hover .om-nav__pijl,
.om-nav__blok:focus-within .om-nav__pijl { transform: rotate(180deg); }
.om-nav__schakel { display: none; }

.om-nav__uit { position: absolute; inset-block-start: 100%; inset-inline-start: 0; padding-block-start: 1.15rem; z-index: 80; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.om-nav__uit--breed { inset-inline-start: 50%; margin-inline-start: -1px; transform: translate(-50%, 6px); }
.om-nav__blok:hover .om-nav__uit,
.om-nav__blok:focus-within .om-nav__uit { opacity: 1; visibility: visible; transform: translateY(0); }
.om-nav__blok:hover .om-nav__uit--breed,
.om-nav__blok:focus-within .om-nav__uit--breed { transform: translate(-50%, 0); }

.om-nav__uit-in { display: flex; gap: 2.4rem; background: var(--wit); border: 1px solid var(--lijn); box-shadow: 0 28px 56px -28px rgba(26,35,30,.4); padding: 1.6rem 1.8rem; max-inline-size: calc(100vw - 2.5rem); }
.om-nav__kolom { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 12.5rem; }
.om-nav__kop { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--groen); margin-block-end: .6rem; }
.om-kop nav .om-nav__kolom a { display: block; padding-block: .42rem; font-size: .95rem; line-height: 1.35; color: var(--inkt); white-space: nowrap; }
.om-kop nav .om-nav__kolom a:hover { color: var(--groen); }

@media (max-width: 1100px) {
.om-nav__uit-in { gap: 1.5rem; padding: 1.3rem 1.4rem; }
.om-nav__kolom { min-inline-size: 11rem; }
.om-kop nav .om-nav__kolom a { font-size: .9rem; }
}

/* Binnen het schuifmenu: alles onder elkaar, opengeklapt met de knop. */
.om .om-kop--open nav .om-nav__blok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-block-end: 1px solid var(--lijn); }
.om .om-kop--open nav .om-nav__blok:last-child { border-block-end: 0; }
.om .om-kop--open nav .om-nav__hoofd { flex: 1 1 auto; padding-block: .75rem; font-size: 1rem; border-block-end: 0; }
.om .om-kop--open nav .om-nav__pijl { display: none; }
.om .om-kop--open nav .om-nav__schakel { display: block; flex: none; inline-size: 2.6rem; block-size: 2.6rem; border: 0; background: transparent; position: relative; cursor: pointer; }
.om .om-kop--open nav .om-nav__schakel::before,
.om .om-kop--open nav .om-nav__schakel::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: .8rem; block-size: 2px; background: var(--inkt); transform: translate(-50%, -50%); transition: transform .18s ease; }
.om .om-kop--open nav .om-nav__schakel::after { transform: translate(-50%, -50%) rotate(90deg); }
.om .om-kop--open nav .om-nav__schakel[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(0deg); }
.om .om-kop--open nav .om-nav__uit { position: static; opacity: 1; visibility: visible; transform: none; padding: 0; display: none; flex: 1 1 100%; }
.om .om-kop--open nav .om-nav__blok--open .om-nav__uit { display: block; }
.om .om-kop--open nav .om-nav__uit-in { flex-direction: column; gap: 1rem; border: 0; box-shadow: none; padding: 0 0 .9rem .8rem; background: transparent; max-inline-size: none; }
.om .om-kop--open nav .om-nav__kolom { min-inline-size: 0; }
.om .om-kop--open nav .om-nav__kolom a { padding-block: .42rem; font-size: .94rem; border-block-end: 0; white-space: normal; }

/* ==========================================================================
   Aanvullingen nieuwe stijl
   ========================================================================== */

/* Kop-CTA: tekst en pijl wit. Zonder deze regel wint .om-kop a { color: inherit }
   van .om-start en wordt de knoptekst donker. */
.om-kop .om-start,
.om-kop .om-start svg { color: #fff; }
.om-kop .om-start:hover,
.om-kop .om-start:focus-visible,
.om-kop .om-start:hover svg { color: #FD8A32; }

/* WhatsApp-zweefknop met portret, op elke pagina.
   De knop van Joinchat blijft uit zodat er maar een bel in beeld staat. */
.joinchat,
.joinchat__button,
#joinchat { display: none !important; }

a.om-zweefknop {
  position: fixed;
  inset-block-end: 1.4rem;
  inset-inline-end: 1.4rem;
  z-index: 60;
  display: block;
  inline-size: 4.6rem;
  block-size: 4.6rem;
  padding: 0 !important;
  background: transparent !important;
  border: 0;
  border-radius: 999px !important;
  overflow: visible;
  line-height: 0;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .45);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease;
}

a.om-zweefknop:hover,
a.om-zweefknop:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .55);
}

a.om-zweefknop span { display: none !important; }

a.om-zweefknop .om-zweefknop__foto {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
  background: #25D366;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #25D366;
  border-radius: 999px !important;
}

a.om-zweefknop > svg {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -2px;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  padding: .34rem;
  box-sizing: border-box;
  background: #25D366;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px !important;
}

@media print { a.om-zweefknop { display: none !important; } }

@media (max-width: 600px) {
  a.om-zweefknop {
    inline-size: 4rem;
    block-size: 4rem;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
  }
}

/* De naar-boven-knop van het thema staat op dezelfde plek als de WhatsApp-knop.
   Hij schuift daarom een stukje omhoog. */
.xts-scroll-to-top {
  bottom: 6.9rem !important;
  z-index: 59 !important;
}

@media (max-width: 600px) {
  .xts-scroll-to-top { bottom: 5.9rem !important; }
}