/* bugs.css — tijdelijke pleisters voor framework-gedrag dat (nog) niet werkt.
 *
 * Elke regel noemt wat er stuk is en waaraan je ziet dat hij weg mag. Dit bestand hoort
 * te krimpen, niet te groeien: staat er iets in dat het framework inmiddels zelf doet,
 * haal 'm eruit en meet opnieuw. Wie hier iets bij zet, zet er ook bij waarom.
 *
 * In `@layer site`, zoals templates/page.php voorschrijft: zo winnen deze regels van het
 * framework maar verliezen ze nog steeds van de opmaak uit het CMS. Zonder die wikkel zou
 * dit bestand van álles winnen, ook van een redacteur.
 *
 * Aangelegd 02-09-2026 op verzoek van Ronny, zodat het werk aan deze site door kan.
 * De onderliggende punten staan in ~/agents/support.md.
 *
 * Vervallen op 03-09-2026, na de bump naar framework 1.58.1922:
 *   - de hoogte van de hero-wrappers (framework 1.58.1919, `.hero[data-hero-shape]
 *     .layer__sc{height:100%}` in shell.css — alleen waar de hoogte van bovenaf komt,
 *     zodat `format=original` het beeld maatgevend laat; onze regel deed dat niet);
 *   - het omdraaien van de kolommen bij `is-reversed` (framework 1.58.1922, in
 *     modules/layer-text.css).
 * Beide nagemeten met dit bestand uitgeschakeld: hero 600/600/600, en op
 * /product/rvs-keukenblad staat het beeld links (x=168) en de tekst rechts (x=756).
 */

/* 0 — De laag-spacing die het framework losliet (commit f22ad7e13a, 12-09-2026,
 * "Maak layer spacing CMS-first"). Deze site leunde er volledig op: na de bump naar
 * 1.58.2256 stond elke `.layer__inner` op `padding: 0`, waardoor de herotitel en de
 * subtitel over elkaar vielen en de tekst eronder tegen de sectierand plakte.
 * Nagemeten vóór de bump: hero 112px/24px, contentlagen 40px/24px -- precies de
 * waarden die hier weer staan.
 *
 * LET OP: dit blok staat in `@layer framework` en niet in `@layer site` zoals de rest
 * van dit bestand. Dat is met opzet: zo staat het op exact dezelfde plek in de rangorde
 * als voorheen, dus de regels hieronder en de opmaak uit het CMS winnen er nog steeds
 * van. In `@layer site` zou deze padding juist van elke site-regel winnen.
 *
 * Weg zodra: de spacing per laag in het CMS staat. Dan kan dit blok eruit en verandert
 * er niets -- meet dat na met ~/work/bin/framework-spacing-check.mjs. */
@layer framework {
  .layer__inner{ max-width:var(--max); margin:0 auto; padding:2.5rem 1.5rem; }
  .hero .layer__inner, .hero__content{ max-width:var(--max); margin:0 auto; padding:4.5rem 1.5rem; }
  .hero--image .layer__inner, .hero--image .hero__content{ padding:7rem 1.5rem; }
  .layer--columns .layer__columns{ column-gap:var(--cols-gx, 2rem); row-gap:var(--cols-gy, 2rem); }
  @media (min-width: 761px) {
    .layer--columns .layer__columns{
      column-gap:var(--cols-gx-d, var(--cols-gx, 2rem));
      row-gap:var(--cols-gy-d, var(--cols-gy, 2rem));
    }
  }
  .media-album{ gap:var(--media-album-gap, 4px); }
}

@layer site {

  /* 1 — Kaarten kunnen geen achtergrond krijgen.
   * `design_cards → design_item → achtergrondkleur` wordt in het CMS opgeslagen en door de
   * API netjes teruggegeven, maar er komt geen CSS op de pagina: de kaart rendert als kale
   * `<article class="card">` zonder de `ds-cards-item`-haak waar die opmaak aan hangt. Het
   * framework kent die klasse wel (SiteDesignTierCssTest), de renderer zet 'm niet.
   * Weg zodra: de kaart die haak krijgt en de CMS-waarde dus doorkomt. */
  .layer--cards .card__body { padding: 1rem 1.25rem 1.25rem; }

  /* RVS-only: ruimte voor box-shadow op .card__content, zonder de slides smaller te maken. */
  .layer--cards .carousel__viewport {
    width: calc(100% + 1.5rem);
    margin-inline: -.75rem;
    padding: .75rem;
    clip-path: inset(-.75rem .75rem);
  }


  /* 2 — Een smalle tekstkolom staat links, ook als de tekst gecentreerd is.
   * `layer__text-col` krijgt zijn breedte mee als `--text-col-w`, maar nooit een
   * uitlijning: op een CTA-laag met gecentreerde tekst hangt het blok daardoor links in
   * de sectie. Via het CMS niet te zetten — `design_column1` raakt dit element niet op
   * een tekst-laag (geen opmaakklasse op de kolom). Alleen daar waar de tekst zelf ook
   * gecentreerd is; een gewone tekstlaag hoort links te blijven.
   * Weg zodra: de renderer de kolom zelf uitlijnt of er een haak op zet. */
  .layer--cta .layer__text-col,
  [data-type="text_centered"] .layer__text-col { margin-inline: auto; }


  /* Menu rechts uitlijnen: navigation_settings.alignment="right" zet wel
   * justify-content:flex-end op .site-nav__list, maar de lijst rekt niet mee,
   * dus visueel verschuift er niets. margin-left:auto duwt het menu naar rechts.
   * Weg zodra: de renderer alignment="right" zelf honoreert (Flow-punt RVS). */
  #site-nav .site-nav__list { margin-left: auto; }

  }

/* Ongelaagd (buiten @layer site): USP-balk home als nette responsive rij.
 * Het thema zet .usps als inline-flex met een unlayered !important, daarom moet dit
 * ook unlayered met !important. Weg zodra layer_usps type=4 zelf een gelijke rij rendert. */
.layer--usps[data-type="4"] ul.usps{display:flex !important;flex-wrap:wrap !important;column-gap:30px !important;row-gap:26px !important;width:100% !important;align-items:flex-start !important}
.layer--usps[data-type="4"] ul.usps > .usps__item{flex:0 0 calc((100% - 90px)/4) !important;min-width:0}
@media (max-width:900px){.layer--usps[data-type="4"] ul.usps > .usps__item{flex-basis:calc((100% - 30px)/2) !important}}
@media (max-width:560px){.layer--usps[data-type="4"] ul.usps > .usps__item{flex-basis:100% !important}}

/* USP-subteksten in de lichtblauwe laagkleur (i.p.v. donkergrijs) - home USP-balk. */
.layer--usps .usps__text{color:#E9F2FB !important}

/* Knop-pijl: thema zet content:"->" (dun). Vervang door de flaticon-pijl (stevig), in de
 * knop-tekstkleur (wit op primaire knop) via mask. Weg zodra een net knop-icoon in EH kan. */
.btn--primary::after{content:"" !important;display:inline-block;width:.8em;height:.8em;margin-left:.5em;vertical-align:-.1em;background:url(/assets/img/arrow-right.svg) no-repeat center/contain !important}

/* Cards-sectie: meer lucht tussen sectietitel en de kaarten. */
.layer--cards .layer-cards__header{margin-bottom:1.9rem !important}

/* Card-link 'Bekijk' -> lichtblauw pijl-icoon, rechts uitgelijnd (algemene kaart-link-stijl). */
.layer--cards .card__cta{display:block !important;text-align:right !important;font-size:0 !important;line-height:0 !important}
.layer--cards .card__cta::after{content:"" !important;display:inline-block;width:22px;height:22px;background-color:#2FA4E7;-webkit-mask:url(/assets/img/arrow-right.svg) no-repeat center/contain;mask:url(/assets/img/arrow-right.svg) no-repeat center/contain}

/* CTA-band: simpele gradient in de blauwtinten van de hero (donker -> teal-navy).
 * Witte tekst blijft leesbaar. */
body main .layer--text.layer--cta{
  background-color:#0E2037 !important;
  background-image:linear-gradient(120deg, var(--theme-color-1) 0%, var(--theme-color-8) 100%) !important;
  background-size:auto !important;
}

/* Logo groter: thema zet .site-logo__img op height 48px; hoogte kan niet via EH (slot accepteert alleen width).
 * Proportioneel vergroten. Weg zodra logo-hoogte in EH kan. */
.site-header .site-logo__img{height:114px !important;width:auto !important;max-width:none !important;transition:height .25s ease}
.site-header.is-scrolled .site-logo__img{height:64px !important}
@media(max-width:768px){.site-header .site-logo__img{height:84px !important}.site-header.is-scrolled .site-logo__img{height:52px !important}}

/* Hero-tekst links uitlijnen met de content-container (max-width 1152 + 24px padding).
 * Thema zet de overlay absoluut op left:80px, los van de content-marge; op brede schermen
 * viel de hero daardoor te ver naar links. Weg zodra de hero de content-container volgt. */
@media (min-width:1152px){
  .layer--hero .hero__overlay--left{ left:calc((100% - 1152px)/2 + 24px) !important; }
}

/* Simpeler dropdown-submenu (a la aikongym) in RVS-stijl: donkere dropdown, witte items,
 * kleine blauwe chevron, geen kopregel/knopvakken/pijl-rondjes. */
.site-nav__dropdown{background:#16293f !important;border:1px solid rgba(255,255,255,.10) !important;box-shadow:0 18px 40px -12px rgba(0,0,0,.5) !important;padding:.6rem .5rem !important;border-radius:12px !important}
.site-nav__column-header{display:none !important}
.site-nav__column-list{display:block !important;margin:0 !important;padding:0 !important}
.site-nav__dropdown-item{margin:.22em 0 !important;list-style:none !important}
.site-nav__dropdown-link{background:none !important;border:0 !important;border-radius:6px !important;box-shadow:none !important;padding:.72em .6em !important;display:flex !important;align-items:center !important;gap:.6em !important;color:#fff !important;font-family:"Montserrat", system-ui, sans-serif !important;font-weight:600 !important}
.site-nav__dropdown-link::after{content:"" !important;display:none !important}
.site-nav__dropdown-link::before{content:"" !important;display:inline-block;width:6px;height:6px;border-top:2px solid #2FA4E7;border-right:2px solid #2FA4E7;transform:rotate(45deg);flex:0 0 auto}
.site-nav__dropdown-link:hover{background:rgba(255,255,255,.06) !important;color:#2FA4E7 !important}
.site-nav__dropdown-link:hover::before{border-color:#2FA4E7}
.site-nav__dropdown .site-nav__item-title, .site-nav__dropdown-link .site-nav__item-title{color:#fff !important;font-weight:600 !important;background:none !important}
.site-nav__dropdown-link:hover .site-nav__item-title{color:#2FA4E7 !important}

/* 4:3 op inmeten-beelden (bron 516 is 1:1); cover-crop, geen vervorming. */
.media-43 .text-image__media img{aspect-ratio:4/3 !important;object-fit:cover !important;width:100% !important;height:auto !important}

/* Alterneren beeld links/rechts: 1e/3e/.. laag foto links via kolomvolgorde omdraaien (rtl), tekst blijft ltr. */
.img-left .text-image__grid{direction:rtl !important}
.img-left .text-image__grid > *{direction:ltr !important}

/* USP-strip witte variant (bibliotheek): witte bg, donkere titels, geen onderschriften. */
.usp-strip-light,.usp-strip-light .layer__bg{background:transparent !important}
.usp-strip-light .usps__title{color:#0E2037 !important}
.usp-strip-light .usps__text{display:none !important}

/* Mobiel: logo compacter + hero minder hoge padding (minder lege ruimte). */
@media (max-width:767px){
  .site-header .site-logo__img{height:46px !important}
  .layer--hero .layer__inner{padding-top:64px !important;padding-bottom:64px !important}
}


/* Tekst+beeld stapelen in de strook 761-767px. Het framework schakelt op 761px naar twee
 * kolommen; op deze site levert dat kolommen van ~340px op, te smal voor de kop en het beeld.
 *
 * Hier stond een `display:block !important` (plus een `order:-1` en een `margin-top`) die vanaf
 * 767px stapelde. Dat werkte, maar sloopte het CMS-veld `btt` ("Mobiel"): dat veld zet
 * `data-stack-order="reverse"` op de sectie en het framework verwisselt de kolommen met `order`,
 * en `order` doet niets in een block-container. De redacteur koos dus "Tekst onder, media boven"
 * en zag niets gebeuren. Gemeten op 390px: met `display:block` verandert het omzetten van dat veld
 * exact nul; als grid springt het beeld meteen naar boven.
 *
 * Daarom blijft het hier een grid met een enkele kolom, en geen `!important`: de extra klasse
 * `.layer--text-image` geeft al meer specificiteit dan de framework-regel, en `@layer site` wint
 * sowieso van `@layer framework`. De onderlinge ruimte komt nu uit de `row-gap` van het grid,
 * waardoor de losse `margin-top` op het gestapelde beeld ook overbodig is.
 *
 * Weg zodra: het framework z'n stapelgrens en die van deze site gelijk trekt (760/761 tegenover
 * 767/768). */
@media (min-width:761px) and (max-width:767px){
  .layer--text-image .text-image__grid{grid-template-columns:1fr}
  /* Het framework zet de omkering van `btt` alleen onder 760px; in deze strook stapelen we
   * zelf, dus hier hoort hij ook te gelden. Zelfde selectorvorm als het framework gebruikt. */
  .layer--text-image[data-stack-order="reverse"] .text-image__grid > :nth-child(2){order:-1}
}

/* Contactformulier-kop: eyebrow boven de titel (text_form-laag).
 * Het framework rendert bij een form-blok de titel eerst en de subtitle eronder;
 * hier gebruiken we de subtitle als eyebrow en zetten die met flex-order boven de titel.
 * Weg zodra: het form-blok een eigen eyebrow-veld boven de titel kent. */
.layer-text-form__form{display:flex;flex-direction:column}
.layer-text-form__form > form{order:3}
.layer-text-form__form .ds-forms-title{order:2;margin:0 0 1.1rem}
.layer-text-form__form .ds-forms-subtitle{order:1;margin:0 0 .35rem;color:#2FA4E7;font-family:"Montserrat",system-ui,sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}

/* Tekst+beeld met uitlijning "content": beeld bovenaan bij de tekst i.p.v. verticaal
 * gecentreerd. De site-brede head-regel `.text-image__grid{align-items:center}` (ongelaagd)
 * centreert elke tekst+beeld-laag; op een laag met veel tekst zakt het beeld dan ver weg.
 * Deze regel geldt alleen waar een redacteur bewust uitlijning "content" kiest, dus per laag
 * opt-in. Ongelaagd + hogere specificiteit zodat hij van die head-regel wint.
 * Weg zodra: het uitlijningsveld zelf wint van de globale center-regel. */
.text-image__grid[data-right-vertical-alignment="content"] .text-image__media{align-self:start}

/* Foto's 4:3 op tekst+beeld-lagen met class .media-4x3 (CMS: design_layer css-class).
 * aspect-ratio/object-fit worden door de opmaak-slot geweigerd, daarom hier. Herbruikbaar.
 * Toegepast: /informatie/productie-rvs-keukenblad (lagen 518, 520). */
.media-4x3 .ds-media{aspect-ratio:4 / 3;object-fit:cover;width:100%;height:auto}

/* Mobiel accordion-hoofdmenu (naar capitalsupport.nl, in RVS-stijl). custom.js zet
 * .mb-acc-ready op .site-nav en voegt per ouder-item een .mb-acc-toggle toe; de toggle zet
 * .is-acc-open op het item. Submenu dicht tenzij open. Alleen mobiel; toggle staat default uit.
 * Weg zodra: het framework inklapbare mobiele submenu's zelf levert (Flow #430). */
.mb-acc-toggle{display:none}
@media (max-width:767px){
  /* Mobiel menu als nette volle-breedte kolom, links uitgelijnd (desktop staat rechts uit;
     die uitlijning schoof de items op mobiel naar rechts). Zoals capitalsupport.nl. */
  /* volle breedte: #site-nav is flex; als kolom stretcht de lijst over de hele breedte,
     en de auto-linkermarge (desktop rechts-uitlijning) resetten. */
  .site-nav.mb-acc-ready{flex-direction:column;align-items:stretch}
  .site-nav.mb-acc-ready .site-nav__list{flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;margin:0;width:100%}
  /* CMS-knoppen met positie 'Mobiel' onder het menu (custom.js verplaatst .site-nav__ctas--mobile
     hierheen); de desktop-knop (ctas--main) verbergen we in de balk op mobiel. */
  .site-header__tools > .site-nav__ctas--main{display:none !important}
  .site-nav.mb-acc-ready > .site-nav__ctas--mobile{margin:1.25rem 0 0;width:100%;display:flex;flex-direction:column;gap:.75rem}
  .site-nav.mb-acc-ready > .site-nav__ctas--mobile .site-nav__cta{width:100%;justify-content:center;padding:.85rem 1.25rem;font-size:1rem}
  .site-nav.mb-acc-ready .site-nav__item{width:100%}
  .site-nav.mb-acc-ready .site-nav__item--has-dropdown{display:flex;flex-wrap:wrap;align-items:center}
  .site-nav.mb-acc-ready .site-nav__item--has-dropdown > .site-nav__link{flex:1 1 auto}
  .site-nav.mb-acc-ready .site-nav__item--has-dropdown > .site-nav__link::after{display:none}
  .site-nav.mb-acc-ready .mb-acc-toggle{
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:3rem;height:3rem;margin:0;padding:0;background:transparent;border:0;cursor:pointer;
  }
  .site-nav.mb-acc-ready .mb-acc-toggle__icon{
    width:.62rem;height:.62rem;border-right:2px solid #7CC4F0;border-bottom:2px solid #7CC4F0;
    transform:rotate(45deg);transition:transform .22s ease;
  }
  .site-nav.mb-acc-ready .site-nav__item--has-dropdown.is-acc-open > .mb-acc-toggle .mb-acc-toggle__icon{
    transform:rotate(-135deg);
  }
  .site-nav.mb-acc-ready .site-nav__item--has-dropdown > .site-nav__dropdown{
    flex:0 0 100%;display:none;
  }
  .site-nav.mb-acc-ready .site-nav__item--has-dropdown.is-acc-open > .site-nav__dropdown{
    display:block;
  }
}


/* Inhoud-links (tel/mailto e.d.) lichtblauw met onderstreping op lagen met class .link-accent.
 * Huisstijl-lichtblauw #2FA4E7, hover #1B87C9. Toegepast: /contact (laag 40). Herbruikbaar. */
.link-accent .ds-text a,.link-accent .ds-forms a{color:#2FA4E7;text-decoration:underline;text-underline-offset:2px}
.link-accent .ds-text a:hover,.link-accent .ds-forms a:hover{color:#1B87C9}


/* Bullet-lijsten in richtext: minder lucht tussen de items (was 18px p-marge). */
.ds-text li > p{margin-bottom:.4rem}


/* Bullets in richtext lichtblauw (huisstijl #2FA4E7). */
.ds-text ul li::marker{color:#2FA4E7}

/* Mobiel menu v3 (Age): (1) paneel vult de hele hoogte onder de header, (2) achtergrond
 * ~92% dekkend (licht doorschijnend), (3) submenu altijd in-flow op volle breedte -- op een
 * echte iPhone hield het framework-dropdown z'n absolute (flyout-)positie, waardoor de subs
 * naar links verschoven. Ongelaagd + hoge specificiteit; !important op de dropdown-positie om
 * de flyout-regels van het framework te verslaan. Weg zodra: framework native mobiel-menu. */
@media (max-width:767px){
  html[data-menu-open="true"] .site-nav.mb-acc-ready{
    height:calc(100dvh - 100%);
    max-height:calc(100dvh - 100%);
    background:rgba(14,32,55,0.92);
  }
  .site-nav.mb-acc-ready .site-nav__item--has-dropdown > .site-nav__dropdown{
    position:static !important;inset:auto !important;transform:none !important;
    width:100% !important;min-width:0 !important;max-width:none !important;margin:0 !important;
  }
  .site-nav.mb-acc-ready .site-nav__dropdown .site-nav__columns,
  .site-nav.mb-acc-ready .site-nav__dropdown .site-nav__column{width:100% !important;max-width:none !important}
  /* Mobiel submenu zonder eigen achtergrond/kader (Age 2026-09-15): items staan direct in het
   * navy paneel. Desktop-dropdown (kaart) blijft ongewijzigd. */
  .site-nav.mb-acc-ready .site-nav__item--has-dropdown > .site-nav__dropdown{
    background:transparent !important;border:0 !important;box-shadow:none !important;
    border-radius:0 !important;padding:0 0 .5rem !important;
  }
}


/* Bodem-menu (Sitemap e.d.) dezelfde kleur als de copyright-regel (#8AA1BC), i.p.v. grijs #666. */
.site-footer__menu a{color:#8AA1BC}
.site-footer__menu a:hover{color:#FFFFFF}

/* Mobiel menu v4 (Age): (1) dubbele lijn bij submenu-items weg -- de hoofdlink van een
 * has-dropdown item hield z'n border-bottom (partieel, tot de chevron) naast de volle-breedte
 * item-divider; die link-lijn halen we weg. (2) De divider 50% transparant. Weg zodra: framework
 * native mobiel-menu. (Belknop = nu CMS-CTA positie 'Mobiel', zie blok hierboven.) */
@media (max-width:767px){
  .site-nav.mb-acc-ready .site-nav__item--has-dropdown > .site-nav__link{border-bottom:0 !important}
  .site-nav.mb-acc-ready .site-nav__item{border-top-color:rgba(229,229,229,0.5)}
}

/* CTA's met positie 'Mobiel' (Website instellingen > Navigatie > CTA's) rendert het framework
 * ook op desktop in de header-balk, zonder breakpoint. Interim: op desktop verbergen.
 * Weg zodra: framework koppelt positie 'Mobiel' zelf aan het mobiele menu. */
@media (min-width:768px){
  .site-nav__ctas--mobile{display:none !important}
}


/* Cookie-melding in huisstijl (mm-consent). Overschrijft alleen de thema-variabelen
 * van de cookie-module met de merkkleuren; geen layout-hacks. Weg zodra: CMS-optie
 * om de cookie-banner te thematiseren. */
.mm-cookie{
  --mm-cookie-accent:#2FA4E7;
  --mm-cookie-accent-dk:#1B87C9;
  --mm-cookie-accent-fg:#FFFFFF;
  --mm-cookie-bg:#FFFFFF;
  --mm-cookie-fg:#0E2037;
  --mm-cookie-muted:#5A6B7B;
  --mm-cookie-border:#DDE3E9;
  --mm-cookie-soft:#EDF4FB;
}
.mm-cookie__body,.mm-cookie--modal>.mm-cookie__body{border-radius:16px 16px 0 0}
.mm-cookie--modal{border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -12px rgba(14,32,55,.35)}
.mm-cookie__title{font-family:"Montserrat",system-ui,sans-serif;font-weight:700;color:#0E2037}
.mm-cookie__btn{font-family:"Montserrat",system-ui,sans-serif;font-weight:600;border-radius:10px}
.mm-cookie__cats{border-radius:12px}

/* Offerte-/contactformulier: kaart houdt een subtiele rand + zachte schaduw, zodat de
 * (lichtblauwe) formulierachtergrond zichtbaar los blijft van de gradient-sectie eronder.
 * De kaart is thema-gestuurd (.layer__form bg in @layer theme) en per-laag opmaak raakt 'm
 * niet (geen opmaakhaak op de kaart), daarom hier ongelaagd. Weg zodra: EH een opmaakhaak
 * op de formulierkaart geeft. Toegepast: /offerte-aanvragen (laag 84), /contact (laag 40). */
.layer-text-form__form{border:1px solid #CFE0F1;box-shadow:0 16px 40px -20px rgba(14,32,55,.20)}

/* Formuliertitel even groot als de sectietitel ernaast (.ds-title 24px), zodat
 * "Vraag je offerte aan" en "Offerte aanvragen voor RVS maatwerk" gelijk ogen.
 * Grootte via de form-composite-slot geweigerd, daarom hier. */
.layer-text-form__form .ds-forms-title{font-size:24px;line-height:27.6px}

/* Offerteform-laag (design_layer css-class .form-title-align): linkerkolom op desktop
 * gelijk laten beginnen met de formuliertitel (die onder z'n eyebrow staat), zodat
 * "Offerte aanvragen voor RVS maatwerk" en "Vraag je offerte aan" op 1 lijn staan.
 * Alleen desktop (mobiel stapelt). Gescoped op deze laag, raakt contact niet. */
@media(min-width:768px){.form-title-align .layer-text-form__text{margin-top:58px}}

/* Dubbele pijltjes mobiel menu: het framework levert nu zelf een submenu-toggle
 * (.site-nav__submenu-toggle) naast onze eigen accordion-toggle (.mb-acc-toggle) -> twee
 * chevrons per item. Onze accordion is de werkende (ons CSS stuurt de dropdown via
 * .is-acc-open; de framework-toggle blijft hier inert). Verberg de framework-toggle op
 * mobiel. Weg zodra: we overstappen op het native framework-mobielmenu i.p.v. deze accordion. */
@media(max-width:767px){.site-nav.mb-acc-ready .site-nav__submenu-toggle{display:none !important}}

/* USP-strip variant met 3 items (.usp-3 via design_layer css-class): op desktop 3 gelijke
 * kolommen i.p.v. 4. Laag blijft type=4 zodat de flex-rij-basis (ul.usps) en de tablet/mobiel
 * breakpoints (<=900 2-koloms, <=560 1-koloms) van .layer--usps[data-type="4"] blijven gelden;
 * hier alleen de desktop-kolombreedte overschrijven naar 3. */
@media(min-width:901px){.layer--usps.usp-3[data-type="4"] ul.usps > .usps__item{flex:0 0 calc((100% - 60px)/3) !important}}

/* USP-strip witte variant met subtitels (.usp-light): witte achtergrond (via CMS design_layer
 * background-color) met zwarte tekst. Overschrijft de site-brede lichtblauwe subtitel-kleur
 * (.layer--usps .usps__text{color:#E9F2FB}) naar donker, en toont de subtitels (anders dan
 * .usp-strip-light die ze verbergt). Combineer met .usp-3 voor 3 kolommen. Gedeeld blok
 * (groep 590 -> laag 790), gebruikt op de productpagina's. */
.usp-light .usps__title{color:#0E2037 !important}
.usp-light .usps__text{color:#3A4A5A !important;display:block !important}