/* ==========================================================================
   Bridle2Fit · blokpatronen (hoofdstuk 6a)
   Laadt op elke pagina: een patroon kan ook in een widgetgebied staan.

   Elk patroon is een groep met een klasse. De klant past tekst en beeld aan,
   de vorm zit hier. Mobile first (hoofdstuk 3a).

   Over de selectors: WordPress zet marges op blokken in een groep met
   :root :where(.is-layout-flow) > * (specificiteit 0,1,0). Waar het thema die
   marges vervangt door een gap, staat body ervoor (0,1,1). Zo wint het thema
   zonder !important, ook als de kern-CSS later laadt.
   ========================================================================== */

:root{
  --b2f-icon-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M5 7h22v15H13l-6 5v-5H5z'/%3E%3Cpath d='M10 13h12M10 17h8'/%3E%3C/svg%3E");
  --b2f-icon-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16v.5'/%3E%3C/svg%3E");
  --b2f-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --b2f-icon-spinner-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326252A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.3'/%3E%3Cpath d='M12 3a9 9 0 019 9'/%3E%3C/svg%3E");
  --b2f-icon-spinner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.3'/%3E%3Cpath d='M12 3a9 9 0 019 9'/%3E%3C/svg%3E");
  --b2f-icon-parts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='4' y='4' width='10' height='10'/%3E%3Crect x='18' y='4' width='10' height='10'/%3E%3Crect x='4' y='18' width='10' height='10'/%3E%3Crect x='18' y='18' width='10' height='10'/%3E%3C/svg%3E");
  --b2f-icon-size:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='3' y='11' width='26' height='10'/%3E%3Cpath d='M8 11v4M13 11v6M18 11v4M23 11v6'/%3E%3C/svg%3E");
  --b2f-icon-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M16 29s9-8.2 9-15a9 9 0 00-18 0c0 6.8 9 15 9 15z'/%3E%3Ccircle cx='16' cy='14' r='3.2'/%3E%3C/svg%3E");
  --b2f-icon-return:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M6 12h17a5 5 0 010 10H12'/%3E%3Cpath d='M11 7l-5 5 5 5'/%3E%3C/svg%3E");
  --b2f-icon-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M16 3l11 5v8c0 7-4.6 11.4-11 13-6.4-1.6-11-6-11-13V8l11-5z'/%3E%3Cpath d='M11 16l3.6 3.6L21 12.5'/%3E%3C/svg%3E");
  --b2f-icon-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='2' y='9' width='18' height='12'/%3E%3Cpath d='M20 13h5l5 4v4h-10z'/%3E%3Ccircle cx='8' cy='24' r='2.6'/%3E%3Ccircle cx='23' cy='24' r='2.6'/%3E%3C/svg%3E");
  --b2f-icon-question:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='16' cy='16' r='12'/%3E%3Cpath d='M12.4 12.6a3.7 3.7 0 017.2 1.2c0 2.5-3.6 3-3.6 5.2M16 23.2v.4'/%3E%3C/svg%3E");
  --b2f-icon-buckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='5' y='9' width='22' height='14' rx='1'/%3E%3Cpath d='M11 9v14M16 13v6'/%3E%3C/svg%3E");
  --b2f-icon-noseband:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M6 10c4-4 16-4 20 0M6 22c4 4 16 4 20 0'/%3E%3Cpath d='M4 16h24'/%3E%3C/svg%3E");
  --b2f-icon-pressure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M16 4v10M11 9l5-5 5 5'/%3E%3Cpath d='M5 20h22'/%3E%3Cpath d='M9 26h14'/%3E%3C/svg%3E");
  --b2f-icon-notice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='16' cy='16' r='12.5'/%3E%3Cpath d='M16 9.5v8.5M16 21.5v1'/%3E%3C/svg%3E");
  --b2f-icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M5 16h21M19 9l7 7-7 7'/%3E%3C/svg%3E");
  --b2f-icon-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M16 4v17M9 14l7 7 7-7'/%3E%3Cpath d='M5 27h22'/%3E%3C/svg%3E");
  --b2f-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M9 12l7 7 7-7'/%3E%3C/svg%3E");
}

/* ---------- Band: een sectie over de volle breedte ---------- */
/* De inhoud stopt op 1440 px; de zijmarge groeit mee zonder extra wrapper. */

.b2f-band{
  --b2f-band-x:max(var(--b2f-gutter), calc((100% - var(--b2f-max)) / 2 + var(--b2f-gutter)));
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:var(--b2f-section-y) var(--b2f-band-x);
  background:var(--b2f-warm-white);
  color:var(--b2f-charcoal);
}
body .b2f-band > *,
body .b2f-band .wp-block-group > *{margin:0}
.b2f-band--stone{background:var(--b2f-stone)}
.b2f-band--paper{border-top:1px solid var(--b2f-line);background:var(--b2f-paper)}
/* Lijnpatroon op pattern, zoals onder Hulp bij je keuze op de homepage. */
/* Lijnpatroon uit de brand identity: witte diagonalen van 2 px. */
/* Versie 2: de lijnen zachter (minder wit, dunner), een rustige afwisseling. */
.b2f-band--pattern{background:var(--b2f-pattern) repeating-linear-gradient(118deg,rgba(255,255,255,.5) 0 1.5px,rgba(255,255,255,0) 1.5px 64px)}
.b2f-band.b2f-dark{background:var(--b2f-graphite);color:var(--b2f-warm-white)}
.b2f-band.b2f-dark--night{background:var(--b2f-night)}
@media (min-width:768px){
  .b2f-band{gap:28px}
}
@media (min-width:1100px){
  .b2f-band{gap:32px}
}

/* Alleen vanaf tablet: een sectie of een paar woorden die op het mobiele bord
   ontbreken. En omgekeerd: alleen op mobiel. */
/* html body ervoor: deze klassen moeten winnen van de display van het blok
   zelf (zoals body .b2f-checks{display:flex}), zonder !important. */
@media (max-width:767px){
  html body .b2f-verberg-mobiel{display:none}
}
@media (min-width:768px){
  html body .b2f-alleen-mobiel{display:none}
}

/* ---------- Label, kop en inleiding van een sectie ---------- */

.b2f-kicker{
  font-size:var(--b2f-fs-label);
  font-weight:400;
  line-height:1.3;
  letter-spacing:var(--b2f-ls-label);
  text-transform:uppercase;
  color:var(--b2f-gold-deep);
}
.b2f-dark .b2f-kicker,
.b2f-hero .b2f-kicker{color:var(--b2f-gold)}

.b2f-band__head{display:flex;flex-direction:column;gap:10px}
.b2f-band__title{
  max-width:34ch;
  font-size:var(--b2f-fs-section);
  font-weight:400;
  line-height:1.18;
  letter-spacing:.02em;
  text-wrap:balance;
  color:var(--b2f-graphite);
}
.b2f-dark .b2f-band__title{color:var(--b2f-warm-white)}
.b2f-band__intro{
  max-width:64ch;
  font-size:var(--b2f-fs-body);
  line-height:1.75;
  text-wrap:pretty;
  color:var(--b2f-muted);
}
.b2f-dark .b2f-band__intro{color:var(--b2f-muted-dark)}
.b2f-band strong{font-weight:600}
@media (min-width:1100px){
  .b2f-band__head{gap:14px}
  .b2f-band__title{line-height:1.14}
}

/* Link als onderstreept label (.ul op de borden). */
.b2f-link a,
a.b2f-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--b2f-gold-deep);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:7px;
}
.b2f-link a:hover,
a.b2f-link:hover{color:var(--b2f-charcoal)}
.b2f-link--ink a{color:var(--b2f-charcoal)}
.b2f-link--ink a:hover{color:var(--b2f-gold-deep)}
.b2f-dark .b2f-link a,
.b2f-dark a.b2f-link{color:var(--b2f-gold)}
.b2f-dark .b2f-link a:hover{color:var(--b2f-warm-white)}

/* ---------- Knop uit de blokeditor, hoofdstuk 4.1 ---------- */
/* Standaard goud. Blokstijlen: Lijn, en Goud met downloadicoon. */

body .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px 14px;margin:0}
body .wp-block-button{margin:0}
body .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  max-width:100%;
  padding:10px 22px;
  border:1px solid var(--b2f-gold);
  border-radius:var(--b2f-radius);
  background:var(--b2f-gold);
  color:var(--b2f-graphite);
  font:600 var(--b2f-fs-button)/1.25 var(--b2f-font);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  box-shadow:none;
  transition:filter var(--b2f-dur) var(--b2f-ease),border-color var(--b2f-dur) var(--b2f-ease);
}
body .wp-block-button__link::after{
  content:"";
  flex-shrink:0;
  width:18px;
  height:18px;
  background:currentColor;
  -webkit-mask:var(--b2f-icon-arrow) center / contain no-repeat;
  mask:var(--b2f-icon-arrow) center / contain no-repeat;
}
body .wp-block-button__link:hover{color:var(--b2f-graphite);filter:brightness(1.08)}
body .wp-block-button__link:focus-visible{outline:2px solid var(--b2f-focus);outline-offset:2px}

body .is-style-line .wp-block-button__link{border-color:var(--b2f-charcoal);background:transparent;color:var(--b2f-charcoal)}
body .is-style-line .wp-block-button__link:hover{border-color:var(--b2f-gold-deep);filter:none}
body .b2f-dark .is-style-line .wp-block-button__link{border-color:var(--b2f-muted-dark);color:var(--b2f-warm-white)}
body .b2f-dark .is-style-line .wp-block-button__link:hover{border-color:var(--b2f-gold)}

body .is-style-download .wp-block-button__link::after{order:-1;-webkit-mask-image:var(--b2f-icon-download);mask-image:var(--b2f-icon-download)}

@media (max-width:767px){
  /* Op mobiel vult een losse knop de breedte, zoals op de borden. */
  body .wp-block-buttons > .wp-block-button{flex:1 1 100%}
  body .wp-block-buttons .wp-block-button__link{width:100%}
}
@media (min-width:768px){
  body .wp-block-button__link{min-height:56px;padding:0 28px;white-space:nowrap;line-height:1.1}
}

/* ---------- hero-donker ---------- */
/* Zonder foto: goudstreep en titel. Met foto: op mobiel vult de foto het vlak
   en staat de tekst onderaan, vanaf 1100 px staat de foto rechts en loopt hij
   naar links weg in het donker. */

.b2f-band.b2f-hero{
  --b2f-focus:var(--b2f-gold);
  position:relative;
  justify-content:flex-end;
  gap:14px;
  min-height:200px;
  padding-block:32px 26px;
  overflow:hidden;
  background:var(--b2f-night);
  color:var(--b2f-warm-white);
}
.b2f-hero:not(:has(> .b2f-kicker))::before{
  content:"";
  position:relative;
  z-index:2;
  width:40px;
  height:1px;
  background:var(--b2f-gold);
}
.b2f-hero > :not(.b2f-hero__media){position:relative;z-index:2}
.b2f-hero__title{
  max-width:24ch;
  font-size:var(--b2f-fs-hero-page);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.02em;
  text-wrap:balance;
  color:var(--b2f-warm-white);
}
.b2f-hero__media{position:absolute;inset:0;z-index:0;margin:0}
body .b2f-hero__media{margin:0}
.b2f-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.b2f-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(23,22,27,.96) 18%,rgba(23,22,27,.62) 58%,rgba(23,22,27,.3) 100%);
}
/* Nog geen foto gekozen: de kop blijft donker en leeg. */
.b2f-hero__media:not(:has(img[src])){display:none}
.b2f-hero:has(> .b2f-hero__media img[src]){min-height:320px}

@media (min-width:768px){
  .b2f-band.b2f-hero{min-height:220px;padding-block:48px 40px}
  .b2f-hero:has(> .b2f-hero__media img[src]){min-height:380px}
}
@media (min-width:1100px){
  .b2f-band.b2f-hero{justify-content:center;gap:22px;min-height:260px;padding-block:56px}
  .b2f-hero__title{line-height:1.1}
  .b2f-hero:has(> .b2f-hero__media img[src]){
    min-height:440px;
    background:linear-gradient(90deg,var(--b2f-night) 0%,var(--b2f-graphite) 58%);
  }
  .b2f-hero:has(> .b2f-hero__media img[src]) .b2f-hero__title{max-width:22ch}
  .b2f-hero__media{left:auto;width:min(620px,45%)}
  .b2f-hero__media::after{
    background:linear-gradient(90deg,var(--b2f-graphite) 0%,rgba(38,37,42,.94) 9%,rgba(38,37,42,.62) 24%,rgba(38,37,42,.24) 44%,rgba(38,37,42,0) 64%);
  }
  .b2f-hero > :not(.b2f-hero__media){max-width:760px}
}

/* ---------- Inleiding (gecentreerde zin) ---------- */

.b2f-band.b2f-statement{align-items:center;gap:16px;text-align:center;padding-block:40px}
.b2f-statement::before{content:"";width:34px;height:1px;background:var(--b2f-gold-deep)}
.b2f-statement__lead{
  max-width:50ch;
  font-size:20px;
  line-height:1.45;
  text-wrap:balance;
  color:var(--b2f-graphite);
}
/* Gecentreerd, net als de zin erboven. */
.b2f-statement__text{
  max-width:62ch;
  margin-top:8px;
  font-size:var(--b2f-fs-body);
  line-height:1.75;
  text-align:center;
  text-wrap:balance;
  color:var(--b2f-muted);
}
@media (min-width:1100px){
  .b2f-band.b2f-statement{gap:24px;padding-block:76px}
  .b2f-statement::before{width:40px}
  .b2f-statement__lead{font-size:26px;line-height:1.5;letter-spacing:.015em}
  .b2f-statement__text{margin-top:20px;line-height:1.78}
}

/* ---------- citaatband ---------- */

.b2f-band.b2f-quoteband{align-items:flex-start;gap:16px}
.b2f-quoteband__quote{
  max-width:40ch;
  font-size:22px;
  line-height:1.4;
  text-wrap:pretty;
  color:var(--b2f-warm-white);
}
.b2f-quoteband__cite{
  font-size:var(--b2f-fs-label);
  letter-spacing:var(--b2f-ls-label);
  text-transform:uppercase;
  color:var(--b2f-gold);
}
@media (min-width:1100px){
  .b2f-band.b2f-quoteband{align-items:center;text-align:center;gap:24px}
  .b2f-quoteband__quote{font-size:30px;line-height:1.35}
}

/* ---------- split ---------- */
/* Onder 1100 px gestapeld: beeld boven, tekst onder (hoofdstuk 3a.2, Over). */

.b2f-band.b2f-split{gap:0;padding:0;container-type:inline-size}
/* De zijlijn van de pagina binnen een split die over de hele breedte loopt:
   op 1440 de gewone kantlijn, op bredere schermen ingesprongen zoals de kop. */
.b2f-split{--b2f-split-x:max(var(--b2f-gutter), calc((100cqw - var(--b2f-max)) / 2 + var(--b2f-gutter)))}
body .b2f-split__media{margin:0}
.b2f-split__media{height:260px;overflow:hidden;background:var(--b2f-graphite)}
.b2f-split__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform var(--b2f-dur-photo) cubic-bezier(.22,.61,.36,1)}
.b2f-split__media:not(:has(img[src])){display:none}
.b2f-split__body{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:var(--b2f-section-y) var(--b2f-band-x);
}
.b2f-split__body > p:not([class*="b2f-"]){
  max-width:64ch;
  font-size:var(--b2f-fs-body);
  line-height:1.75;
  text-wrap:pretty;
  color:var(--b2f-muted);
}
.b2f-dark .b2f-split__body > p:not([class*="b2f-"]){color:var(--b2f-muted-dark)}

/* Illustratie op patroon, zoals de anatomietekening: contain en multiply. */
.b2f-split--illustratie .b2f-split__media{height:auto;padding:16px;background:var(--b2f-pattern)}
.b2f-split--illustratie .b2f-split__media img{height:auto;max-height:520px;object-fit:contain;mix-blend-mode:multiply}

/* Genummerde lijst in een split: 01, 02 in goud. */
.b2f-split__body ol{
  display:flex;
  flex-direction:column;
  gap:11px;
  max-width:64ch;
  padding:12px 0 0;
  border-top:1px solid var(--b2f-line);
  list-style:none;
  counter-reset:b2f-num;
}
.b2f-split__body ol li{
  position:relative;
  padding-left:30px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--b2f-muted);
  counter-increment:b2f-num;
}
.b2f-split__body ol li::before{
  content:counter(b2f-num,decimal-leading-zero);
  position:absolute;
  left:0;
  top:3px;
  font-size:11px;
  line-height:1.65;
  color:var(--b2f-gold-deep);
}

@media (min-width:768px){
  .b2f-split__media{height:380px}
}
@media (min-width:1100px){
  .b2f-band.b2f-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:520px}
  .b2f-split__media{height:auto;min-height:100%}
  .b2f-split--rechts .b2f-split__media{order:2}
  /* Tekst links: de tekst begint op de zijlijn, net als het logo. */
  /* Tekst links: de inspringing naar de logolijn komt bovenop de tekstbreedte
     (512 px), anders blijft er op brede schermen maar een smalle kolom over. */
  .b2f-split--rechts .b2f-split__body{padding-left:var(--b2f-split-x);max-width:calc(512px + var(--b2f-split-x) + 64px)}
  .b2f-split__body{justify-content:center;gap:22px;max-width:640px;padding:48px 64px}
  .b2f-split__body > p:not([class*="b2f-"]){line-height:1.78}
  .b2f-split--illustratie .b2f-split__media{display:flex;align-items:center;justify-content:center;padding:40px}
  .b2f-split__body ol{gap:14px;padding-top:6px}
  .b2f-split__body ol li{padding-left:36px;font-size:16px;line-height:1.7}
  .b2f-split__body ol li::before{top:2px;font-size:12px;letter-spacing:.14em}
}

/* ---------- kaarten-3 en kaarten-4 ---------- */
/* Alles onder .b2f-cards: de productkaart van de winkel heet ook .b2f-card en
   mag deze regels niet krijgen. */

.b2f-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.b2f-cards > .b2f-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper);
  transition:border-color .4s var(--b2f-ease);
}
.b2f-cards > .b2f-card--link:hover{border-color:var(--b2f-greige)}
/* Klikbare kaart: de link op de titel dekt de hele kaart. */
.b2f-cards .b2f-card--link .b2f-card__title a{color:inherit;text-decoration:none}
.b2f-cards .b2f-card--link .b2f-card__title a::after{content:"";position:absolute;inset:0}
.b2f-cards .b2f-card--link .b2f-card__title a:focus-visible{outline:none}
.b2f-cards > .b2f-card--link:has(a:focus-visible){outline:2px solid var(--b2f-focus);outline-offset:2px}
.b2f-cards .b2f-card--link .b2f-card__title::after{content:" \2192";color:var(--b2f-gold-deep);transition:margin var(--b2f-dur) var(--b2f-ease)}
.b2f-cards > .b2f-card--link:hover .b2f-card__title::after{margin-left:4px}
.b2f-cards > .b2f-card[class*="is-icon-"]::before{
  content:"";
  width:27px;
  height:27px;
  background:var(--b2f-gold-deep);
  -webkit-mask:var(--b2f-card-icon) center / contain no-repeat;
  mask:var(--b2f-card-icon) center / contain no-repeat;
}
.b2f-cards .b2f-card__title{
  font-size:15.5px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.01em;
  color:var(--b2f-graphite);
}
.b2f-cards .b2f-card__text{font-size:15px;line-height:1.7;text-wrap:pretty;color:var(--b2f-muted)}

/* Kaart met een foto in plaats van een icoon: geen kader. */
.b2f-cards > .b2f-card:has(> .b2f-card__media){gap:14px;padding:0;border:0;background:none}
body .b2f-cards .b2f-card__media{margin:0}
.b2f-cards .b2f-card__media{height:240px;overflow:hidden;background:var(--b2f-pattern)}
.b2f-cards .b2f-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--b2f-dur-photo) cubic-bezier(.22,.61,.36,1)}
.b2f-cards > .b2f-card--link:hover .b2f-card__media img{transform:scale(1.04)}
.b2f-cards .b2f-card__media.is-cutout img{padding:28px;object-fit:contain;mix-blend-mode:multiply}

@media (min-width:768px){
  .b2f-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .b2f-cards > .b2f-card{padding:26px}
  .b2f-cards .b2f-card__title{font-size:17px}
}
@media (min-width:1100px){
  .b2f-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .b2f-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Twee kaarten in een rij van drie: samen de volle breedte. */
  .b2f-cards--3:has(> .b2f-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .b2f-cards:has(> .b2f-card > .b2f-card__media){gap:24px}
  .b2f-cards > .b2f-card{gap:13px;padding:30px}
  .b2f-cards .b2f-card__title{font-size:18px}
  .b2f-cards .b2f-card__media{height:320px}
}

.b2f-cards > .b2f-card.is-icon-parts{--b2f-card-icon:var(--b2f-icon-parts)}
.b2f-cards > .b2f-card.is-icon-size{--b2f-card-icon:var(--b2f-icon-size)}
.b2f-cards > .b2f-card.is-icon-pin{--b2f-card-icon:var(--b2f-icon-pin)}
.b2f-cards > .b2f-card.is-icon-return{--b2f-card-icon:var(--b2f-icon-return)}
.b2f-cards > .b2f-card.is-icon-shield{--b2f-card-icon:var(--b2f-icon-shield)}
.b2f-cards > .b2f-card.is-icon-truck{--b2f-card-icon:var(--b2f-icon-truck)}
.b2f-cards > .b2f-card.is-icon-question{--b2f-card-icon:var(--b2f-icon-question)}
.b2f-cards > .b2f-card.is-icon-buckle{--b2f-card-icon:var(--b2f-icon-buckle)}
.b2f-cards > .b2f-card.is-icon-noseband{--b2f-card-icon:var(--b2f-icon-noseband)}
.b2f-cards > .b2f-card.is-icon-pressure{--b2f-card-icon:var(--b2f-icon-pressure)}
.b2f-cards > .b2f-card.is-icon-chat{--b2f-card-icon:var(--b2f-icon-chat)}

/* Alinea na het raster, zoals de slotzin onder Mix & Match. */
.b2f-band > p:not([class*="b2f-"]){
  max-width:70ch;
  font-size:var(--b2f-fs-body);
  line-height:1.78;
  text-wrap:pretty;
  color:var(--b2f-muted);
}

/* ---------- genummerd ---------- */

.b2f-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;counter-reset:b2f-step}
.b2f-step{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:18px;
  border-top:1px solid var(--b2f-line);
  counter-increment:b2f-step;
}
.b2f-step::before{
  content:counter(b2f-step,decimal-leading-zero);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--b2f-gold-deep);
}
.b2f-step__title{font-size:var(--b2f-fs-lead);font-weight:400;line-height:1.3;letter-spacing:.01em;color:var(--b2f-graphite)}
.b2f-step__text{font-size:14.5px;line-height:1.68;color:var(--b2f-muted)}
@media (min-width:768px){
  .b2f-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
}
@media (min-width:1100px){
  .b2f-step__title{font-size:17px}
}

/* ---------- cta-donker ---------- */

.b2f-band.b2f-cta{gap:16px}
.b2f-cta__body{display:flex;flex-direction:column;gap:10px;max-width:640px}
@media (min-width:1100px){
  .b2f-band.b2f-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:48px;padding-block:68px}
  .b2f-cta__body{gap:14px}
  .b2f-cta .b2f-band__intro{line-height:1.78}
}

/* ---------- let-op ---------- */

.b2f-notice{
  display:flex;
  gap:12px;
  align-items:flex-start;
  max-width:68ch;
  padding:14px 16px;
  border-left:3px solid var(--b2f-warn-line);
  background:var(--b2f-warn-bg);
  color:var(--b2f-warn);
}
.b2f-notice::before{
  content:"";
  flex-shrink:0;
  width:17px;
  height:17px;
  margin-top:2px;
  background:currentColor;
  -webkit-mask:var(--b2f-icon-notice) center / contain no-repeat;
  mask:var(--b2f-icon-notice) center / contain no-repeat;
}
body .b2f-notice > *{margin:0}
.b2f-notice p{font-size:var(--b2f-fs-small);line-height:1.6}
.b2f-notice a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (min-width:768px){
  .b2f-notice{padding:16px 18px}
}

/* ---------- Feitenband ---------- */

.b2f-band.b2f-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.b2f-fact{display:flex;flex-direction:column;gap:8px}
.b2f-fact__value{font-size:24px;line-height:1.2;color:var(--b2f-warm-white)}
.b2f-fact__text{font-size:14px;line-height:1.6;color:var(--b2f-muted-dark)}
@media (min-width:768px){
  .b2f-band.b2f-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
}
@media (min-width:1100px){
  .b2f-band.b2f-facts{padding-block:56px}
  .b2f-fact__value{font-size:26px}
}

/* ---------- Tekst met zijkolom ---------- */

.b2f-band.b2f-aside-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.b2f-aside-layout__side{display:flex;flex-direction:column;gap:14px}
@media (min-width:1100px){
  .b2f-band.b2f-aside-layout{grid-template-columns:minmax(0,1fr) 360px;gap:72px;padding-block:56px 72px}
  .b2f-band.b2f-aside-layout--wide{grid-template-columns:minmax(0,1fr) 480px;gap:56px}
  .b2f-aside-layout__side{
    position:sticky;
    top:calc(var(--b2f-header-h) + var(--wp-admin--admin-bar--height, 0px) + 24px);
    gap:20px;
  }
}

/* ---------- Infokaart ---------- */

.b2f-infocard{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:18px;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper);
  color:var(--b2f-charcoal);
}
body .b2f-infocard > *{margin:0}
.b2f-infocard .b2f-kicker{font-size:10.5px;letter-spacing:.2em}
.b2f-infocard p:not([class*="b2f-"]){font-size:14px;line-height:1.6;color:var(--b2f-muted)}
.b2f-infocard p:not([class*="b2f-"]) a{color:var(--b2f-gold-deep);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.b2f-infocard .b2f-link{margin-top:2px}
.b2f-infocard.b2f-dark{border-color:var(--b2f-line-dark);background:var(--b2f-graphite);color:var(--b2f-warm-white)}
.b2f-infocard.b2f-dark p:not([class*="b2f-"]){color:var(--b2f-muted-dark)}
.b2f-infocard.b2f-dark p:not([class*="b2f-"]) a{color:var(--b2f-gold)}
@media (min-width:1100px){
  .b2f-infocard{gap:12px;padding:26px}
  .b2f-infocard .b2f-kicker{font-size:11px;letter-spacing:.22em}
  .b2f-infocard p:not([class*="b2f-"]){font-size:14.5px;line-height:1.7}
}

/* Bedrijfsgegevens (5.6): label links, waarde rechts, een haarlijn boven elke rij. */
.b2f-infocard.b2f-company{gap:0}
body .b2f-company .b2f-kicker{margin-bottom:10px}
body .b2f-company__list{margin:0;padding:0}
.b2f-company__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--b2f-line)}
body .b2f-company__row dt{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--b2f-muted)}
body .b2f-company__row dd{margin:0;font-size:14px;text-align:right;overflow-wrap:anywhere}
@media (min-width:1100px){
  body .b2f-company .b2f-kicker{margin-bottom:14px}
  .b2f-company__row{gap:16px;padding:11px 0}
  body .b2f-company__row dt{font-size:12px}
  body .b2f-company__row dd{font-size:14.5px}
}


/* ---------- Lege toestand (bord Toestanden) ---------- */
/* Kaart op paper: icoon in diep goud, kop, één regel uitleg en een lijnknop.
   Voor de lege winkelwagen, nog geen bestellingen, geen resultaten. */

.b2f-empty{
  max-width:var(--b2f-max);
  margin-inline:auto;
  padding:var(--b2f-section-y) var(--b2f-gutter);
}
.b2f-empty__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:520px;
  margin-inline:auto;
  padding:36px 20px;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper);
  color:var(--b2f-graphite);
  text-align:center;
}
body .b2f-empty__card > *{margin:0}
.b2f-empty--inline{padding:0}
.b2f-empty--inline .b2f-empty__card{max-width:none}
.b2f-empty__icon{display:flex;color:var(--b2f-gold-deep)}
.b2f-empty__title{font-size:19px;font-weight:400;line-height:1.25;letter-spacing:.01em;color:var(--b2f-graphite)}
.b2f-empty__text{max-width:42ch;font-size:15px;line-height:1.7;text-wrap:pretty;color:var(--b2f-muted)}
body .b2f-empty__card .b2f-btn{margin-top:6px}
@media (min-width:768px){
  .b2f-empty__card{padding:48px 32px}
  .b2f-empty__title{font-size:21px}
}

/* ---------- Formulierkaart en formulier (hoofdstuk 6b) ---------- */
/* Het formulier komt uit het thema: [b2f_formulier type="contact|retour"].
   Velden volgens 4.2: label boven, 54 px hoog, rand in line. Fouten zoals op
   het bord Toestanden: rood, altijd met tekst. */

.b2f-formcard{display:flex;flex-direction:column;gap:18px}
body .b2f-formcard > *{margin:0}
.b2f-formcard__title{font-size:22px;font-weight:400;line-height:1.2;color:var(--b2f-charcoal)}
.b2f-formcard__text{max-width:64ch;font-size:var(--b2f-fs-body);line-height:1.7;color:var(--b2f-muted)}
@media (min-width:768px){
  .b2f-formcard{gap:22px;padding:36px;border:1px solid var(--b2f-line);background:var(--b2f-paper)}
  .b2f-formcard__title{font-size:26px}
}

.b2f-form{display:flex;flex-direction:column;gap:18px;scroll-margin-top:calc(var(--b2f-header-h) + var(--wp-admin--admin-bar--height, 0px) + 16px)}
body .b2f-form p,
body .b2f-form ul{margin:0}
.b2f-form__form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.b2f-form__field{display:flex;flex-direction:column;gap:7px}
.b2f-form__field label{
  font-size:var(--b2f-fs-label);
  line-height:1.3;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--b2f-muted);
}
.b2f-form__req{color:var(--b2f-muted)}
.b2f-form__opt{letter-spacing:.04em;text-transform:none}
.b2f-form :is(input[type="text"],input[type="email"],input[type="tel"],textarea){
  width:100%;
  min-height:50px;
  margin:0;
  padding:0 13px;
  border:1px solid var(--b2f-line);
  border-radius:0;
  background:var(--b2f-paper);
  color:var(--b2f-charcoal);
  font:16px/1.5 var(--b2f-font); /* 16 px: anders zoomt iOS in */
  -webkit-appearance:none;
  appearance:none;
  transition:border-color var(--b2f-dur) var(--b2f-ease);
}
.b2f-form textarea{min-height:110px;padding:14px 13px;resize:vertical}
.b2f-form :is(input,textarea):hover{border-color:var(--b2f-greige)}
.b2f-form :is(input,textarea):focus{outline:none}
/* Focus en fout van het bord Toestanden: rand plus binnenlijn, samen 2 px. */
.b2f-form :is(input,textarea):focus-visible{border-color:var(--b2f-gold-deep);box-shadow:inset 0 0 0 1px var(--b2f-gold-deep)}
.b2f-form__field.is-invalid label{color:var(--b2f-error)}
.b2f-form :is(input,textarea)[aria-invalid="true"]{border-color:var(--b2f-error);box-shadow:inset 0 0 0 1px var(--b2f-error)}
.b2f-form__error{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--b2f-error)}
.b2f-form__error::before{
  content:"";
  flex-shrink:0;
  width:15px;
  height:15px;
  margin-top:2px;
  background:currentColor;
  -webkit-mask:var(--b2f-icon-alert) center / contain no-repeat;
  mask:var(--b2f-icon-alert) center / contain no-repeat;
}

/* Honeypot: buiten beeld, niet met display:none (sommige robots slaan
   die velden over). */
.b2f-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.b2f-form__submit{display:flex;flex-direction:column;margin-top:6px}
.b2f-form__privacy{font-size:13px;line-height:1.6;color:var(--b2f-muted)}
.b2f-form__privacy a{color:var(--b2f-gold-deep);text-decoration:underline;text-underline-offset:3px}

/* Meldingen boven het formulier. */
.b2f-form__alert{
  padding:16px 18px;
  border-left:3px solid var(--b2f-error);
  background:var(--b2f-error-bg);
  color:var(--b2f-error);
  font-size:14px;
  line-height:1.5;
}
.b2f-form__alert ul{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding-left:18px}
.b2f-form__alert a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.b2f-form__done{
  padding:16px 18px;
  border:0;
  border-left:3px solid var(--b2f-ok);
  background:var(--b2f-paper);
  color:var(--b2f-charcoal);
  font-size:15px;
  line-height:1.6;
}

@media (min-width:768px){
  .b2f-form__form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b2f-form__form > :not(.b2f-form__field--half){grid-column:1 / -1}
  .b2f-form__field{gap:8px}
  .b2f-form :is(input[type="text"],input[type="email"],input[type="tel"]){min-height:54px;padding:0 14px;font-size:15px}
  .b2f-form textarea{padding:15px 14px;font-size:15px}
  .b2f-form__submit{flex-direction:row}
}

/* ---------- Checklist ---------- */

.b2f-checklists{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.b2f-checklist{display:flex;flex-direction:column;gap:16px}
.b2f-checklist__title{font-size:19px;line-height:1.3;color:var(--b2f-charcoal)}
body .b2f-boxlist{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.b2f-boxlist li{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  border-bottom:1px solid var(--b2f-line);
  font-size:14.5px;
  color:var(--b2f-charcoal);
}
.b2f-boxlist li::before{content:"";flex-shrink:0;width:15px;height:15px;border:1px solid var(--b2f-line);background:var(--b2f-paper)}
@media (max-width:767px){
  /* Op mobiel één lijst, zonder kolomtitel (bord MMaat). */
  .b2f-checklists:not(:has(> .b2f-checklist:nth-child(2):not(.b2f-verberg-mobiel))) .b2f-checklist__title{display:none}
}
@media (min-width:768px){
  .b2f-checklists{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
  .b2f-boxlist li{gap:12px;min-height:46px;font-size:15.5px}
  .b2f-boxlist li::before{width:16px;height:16px}
}

/* ---------- Downloadkaart ---------- */

.b2f-download{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  padding:20px;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper);
}
body .b2f-download__cover{margin:0}
.b2f-download__cover{max-width:440px;overflow:hidden;background:var(--b2f-pattern);box-shadow:0 18px 44px rgba(38,37,42,.14)}
.b2f-download__cover img{display:block;width:100%;height:auto}
.b2f-download__body{display:flex;flex-direction:column;gap:16px}
.b2f-download__title{font-size:var(--b2f-fs-display);font-weight:400;line-height:1.18;color:var(--b2f-graphite)}
.b2f-download__text{max-width:54ch;font-size:var(--b2f-fs-lead);line-height:1.75;color:var(--b2f-muted)}
body .b2f-metalist{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0;padding:4px 0 0;list-style:none}
.b2f-metalist li{display:flex;align-items:center;gap:9.5px;font-size:13px;color:var(--b2f-muted)}
.b2f-metalist li + li::before{content:"";flex:none;width:1px;height:12px;margin-left:-10.5px;background:var(--b2f-greige)}
@media (min-width:768px){
  .b2f-download{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:40px;padding:32px}
}
@media (min-width:1100px){
  .b2f-download{grid-template-columns:440px minmax(0,1fr);gap:56px;padding:44px}
  .b2f-download__body{gap:18px}
}

/* ---------- Maattabellen (hoofdstuk 5.5, bord Maat) ---------- */
/* Op mobiel geen kaart: titel, uitleg, tekening en tabel elk in een eigen
   kader. Vanaf 1100 px één kaart per tabel, uitleg en tekening naast elkaar. */

.b2f-band.b2f-sizetables{background:var(--b2f-stone);gap:24px}
.b2f-sizecard{display:flex;flex-direction:column;gap:10px}
.b2f-sizecard__top{display:flex;flex-direction:column;gap:10px}
.b2f-sizecard__intro{display:flex;flex-direction:column;gap:8px}
.b2f-sizecard__intro .b2f-kicker{display:none}
.b2f-sizecard__title{font-size:16px;font-weight:400;line-height:1.3;color:var(--b2f-graphite)}
.b2f-sizecard__text{max-width:42ch;font-size:13.5px;line-height:1.6;color:var(--b2f-muted)}
.b2f-sizecard__drawing{display:flex;justify-content:center;margin:0;padding:14px;border:1px solid var(--b2f-line);background:var(--b2f-paper)}
.b2f-sizecard__svg{display:block;width:100%;max-width:560px;height:auto;background:var(--b2f-paper)}

.b2f-tablewrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper);
}
.b2f-tablewrap:focus-visible{outline:2px solid var(--b2f-focus);outline-offset:2px}
.b2f-sizetable{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
/* Een schuifkader alleen waar de kolommen anders samenklappen: drie of meer. */
.b2f-sizetable:has(thead th:nth-child(3)){min-width:400px}
.b2f-sizetable caption{display:none}
.b2f-sizetable th,
.b2f-sizetable td{padding:12px 13px;border-bottom:1px solid var(--b2f-line);text-align:right;white-space:nowrap}
.b2f-sizetable tr:last-child > *{border-bottom:0}
.b2f-sizetable thead th{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:normal;
  vertical-align:bottom;
  color:var(--b2f-gold-deep);
  border-bottom:1px solid var(--b2f-line);
}
.b2f-sizetable th:first-child{text-align:left}
.b2f-sizetable tbody th{font-weight:400;color:var(--b2f-graphite)}
.b2f-sizetable td{color:var(--b2f-charcoal)}
.b2f-sizetable .b2f-filler{display:none}
.b2f-unit{margin-left:5px;font-size:11px;color:var(--b2f-muted)}
.b2f-sizetable .b2f-none{color:var(--b2f-line)}

/* De eerste kolom blijft staan als de tabel opzij schuift; een haarlijn
   rechts ervan is de rand (hoofdstuk 5.5). */
.b2f-sizetable tbody th,
.b2f-sizetable thead th:first-child{position:sticky;left:0;z-index:1;background:var(--b2f-paper);box-shadow:1px 0 0 var(--b2f-line)}
.b2f-sizetable thead th:first-child{z-index:2}

.b2f-tablehint,
.b2f-footnote{font-size:12px;line-height:1.6;color:var(--b2f-muted)}
.b2f-sizecard:last-of-type .b2f-tablehint,
.b2f-sizecard:not(:has(thead th:nth-child(3))) .b2f-tablehint{display:none}

@media (min-width:768px){
  .b2f-band.b2f-sizetables{gap:28px}
  .b2f-sizecard{gap:0;border:1px solid var(--b2f-line);background:var(--b2f-paper)}
  .b2f-sizecard__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-bottom:1px solid var(--b2f-line)}
  .b2f-sizecard__intro{justify-content:center;gap:13px;padding:30px 32px}
  .b2f-sizecard__intro .b2f-kicker{display:block}
  .b2f-sizecard__title{font-size:22px;line-height:1.2;letter-spacing:.02em}
  .b2f-sizecard__text{font-size:15.5px;line-height:1.72}
  .b2f-sizecard__drawing{align-items:center;padding:24px;border:0;border-left:1px solid var(--b2f-line);background:var(--b2f-stone)}
  .b2f-sizecard__svg{border:1px solid var(--b2f-line)}
  .b2f-tablewrap{border:0}
  .b2f-sizetable,
  .b2f-sizetable:has(thead th:nth-child(3)){min-width:520px;font-size:15.5px}
  .b2f-sizetable caption{display:table-caption;padding:18px 16px 2px;font-size:13px;letter-spacing:.02em;text-align:left;caption-side:top;color:var(--b2f-muted)}
  .b2f-sizetable th,
  .b2f-sizetable td{padding:15px 16px}
  .b2f-sizetable thead th{padding-block:13px;font-size:12px;white-space:nowrap}
  .b2f-sizetable tr:last-child > *{border-bottom:1px solid var(--b2f-line)}
  .b2f-sizetable tbody tr:last-child > *{border-bottom:0}
  .b2f-sizetable tbody tr:hover > *{background:#FCFAF8}
  .b2f-sizetable tbody th,
  .b2f-sizetable thead th:first-child{position:static;box-shadow:none}
  /* Tabel 1 en 2: smalle kolommen links, een lege vulkolom neemt de rest. */
  .b2f-sizetable:not(.b2f-sizetable--grid) :is(th,td){text-align:left}
  .b2f-sizetable:not(.b2f-sizetable--grid) th:first-child{width:260px}
  .b2f-sizetable:not(.b2f-sizetable--grid) td:not(.b2f-filler),
  .b2f-sizetable:not(.b2f-sizetable--grid) thead th:not(:first-child){width:210px}
  .b2f-sizetable .b2f-filler{display:table-cell;width:auto}
  .b2f-unit{margin-left:7px;font-size:12.5px}
  .b2f-tablehint{display:none}
  .b2f-footnote{font-size:13.5px}
}
@media (min-width:1100px){
  .b2f-band.b2f-sizetables{gap:36px;padding-block:76px;background:var(--b2f-warm-white)}
  .b2f-sizecard + .b2f-sizecard{margin-top:-8px}
  .b2f-sizecard__intro{padding:38px 40px}
  .b2f-sizecard__title{font-size:24px}
  .b2f-sizecard__drawing{padding:30px}
}

/* ---------- Hulp nodig, midden in een artikel ---------- */

.b2f-inline-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  max-width:68ch;
  padding:24px 20px;
}
body .b2f-inline-cta > *{margin:0}
.b2f-inline-cta .b2f-kicker{font-size:11px;letter-spacing:.22em}
.b2f-inline-cta__title{font-size:20px;line-height:1.25;color:var(--b2f-warm-white)}
.b2f-inline-cta__text{font-size:15.5px;line-height:1.7;color:var(--b2f-muted-dark)}
body .b2f-inline-cta .wp-block-buttons{margin-top:6px;width:100%}
@media (min-width:768px){
  .b2f-inline-cta{gap:14px;padding:34px}
  .b2f-inline-cta__title{font-size:23px}
  body .b2f-inline-cta .wp-block-buttons{width:auto}
  body .b2f-inline-cta .wp-block-button__link{min-height:50px;padding:0 24px}
}

/* ---------- Ambassadeurs ---------- */

/* Fotoblokken: op mobiel onder elkaar met de foto over de volle breedte,
   vanaf 1100 px om en om links en rechts op warm-white en stone. */
.b2f-portraits{display:flex;flex-direction:column;gap:38px;padding:30px 0 34px;background:var(--b2f-warm-white);container-type:inline-size;--b2f-split-x:max(var(--b2f-gutter), calc((100cqw - var(--b2f-max)) / 2 + var(--b2f-gutter)))}
.b2f-portrait{display:flex;flex-direction:column;gap:14px}
.b2f-portrait__media{height:300px;overflow:hidden;background:var(--b2f-graphite)}
.b2f-portrait__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform var(--b2f-dur-photo) cubic-bezier(.22,.61,.36,1)}
.b2f-portrait__body{display:flex;flex-direction:column;gap:14px;padding-inline:var(--b2f-gutter)}
.b2f-portrait .b2f-kicker{font-size:11px;letter-spacing:.18em}
.b2f-portrait__name{font-size:var(--b2f-fs-section);font-weight:400;line-height:1.16;letter-spacing:.02em;color:var(--b2f-graphite)}
.b2f-portrait__text{max-width:64ch;font-size:15px;line-height:1.75;text-wrap:pretty;color:var(--b2f-muted)}
@media (min-width:768px){
  .b2f-portrait__media{height:420px}
  .b2f-portrait__body{max-width:760px}
}
@media (min-width:1100px){
  .b2f-portraits{gap:0;padding:0}
  .b2f-portrait{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;min-height:520px}
  .b2f-portrait:nth-child(even){background:var(--b2f-stone)}
  .b2f-portrait--rechts .b2f-portrait__media{order:2}
  /* Tekst links: op de zijlijn van de pagina, net als het logo. */
  .b2f-portrait--rechts .b2f-portrait__body{padding-left:var(--b2f-split-x);max-width:calc(512px + var(--b2f-split-x) + 64px)}
  .b2f-portrait__media{height:auto}
  .b2f-portrait__body{justify-content:center;gap:20px;max-width:640px;padding:48px 64px}
  .b2f-portrait .b2f-kicker{font-size:12px;letter-spacing:.2em}
  .b2f-portrait__name{font-size:34px;line-height:1.14}
  .b2f-portrait__text{font-size:var(--b2f-fs-body);line-height:1.78}
}

/* Citaatkaarten, voor wie (nog) geen portret heeft. */
.b2f-band.b2f-ambassadors-quotes{background:var(--b2f-stone)}
.b2f-quotecards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.b2f-quotecard{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px 20px 26px;
  border-top:2px solid var(--b2f-gold);
  background:var(--b2f-paper);
}
.b2f-quotecard__mark{color:var(--b2f-gold)}
.b2f-quotecard__text{flex-grow:1;font-size:15px;line-height:1.75;text-wrap:pretty;color:var(--b2f-charcoal)}
.b2f-quotecard__footer{display:flex;flex-direction:column;gap:5px;padding-top:15px;border-top:1px solid var(--b2f-line)}
.b2f-quotecard__name{font-size:18px;line-height:1.25;color:var(--b2f-graphite)}
.b2f-quotecard__label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--b2f-gold-deep)}
@media (min-width:768px){
  .b2f-quotecards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  /* Teken, citaat en naam delen de rijen van het raster: de lijn boven de
     naam staat in elke kaart op dezelfde hoogte. */
  .b2f-quotecard{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:16px}
}
.b2f-nobreak{white-space:nowrap}
@media (min-width:1100px){
  .b2f-band.b2f-ambassadors-quotes{background:var(--b2f-warm-white)}
  .b2f-quotecards{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .b2f-quotecard{gap:20px;row-gap:20px;padding:34px 32px 38px;background:var(--b2f-stone)}
  .b2f-quotecard__text{font-size:15.5px}
  .b2f-quotecard__footer{gap:6px;padding-top:18px}
  .b2f-quotecard__name{font-size:19px}
  .b2f-quotecard__label{font-size:12px}
}
/* Geen citaatkaarten: dan ook geen kop erboven. */
.b2f-ambassadors-quotes:not(:has(.b2f-quotecard)){display:none}

/* ---------- Patronen uit stap 3 en 4 ---------- */

/* Patroon b2f/cta-licht: Twijfel je over de maat? */
.b2f-cta-band{
  background:var(--b2f-stone);
}
body .b2f-cta-band__inner{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:var(--b2f-max);
  margin:0 auto;
  padding:var(--b2f-section-y) var(--b2f-gutter);
}
body .b2f-cta-band__inner > *,
body .b2f-cta-band__text > *{margin:0}
.b2f-cta-band .b2f-cta-band__kicker{font-size:var(--b2f-fs-label);letter-spacing:var(--b2f-ls-label);text-transform:uppercase;color:var(--b2f-gold-deep)}
.b2f-cta-band h2{font-size:var(--b2f-fs-section);font-weight:400;line-height:1.16;letter-spacing:.02em}
.b2f-cta-band .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px}
body .b2f-cta-band .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:10px 24px;
  border:1px solid var(--b2f-charcoal);
  border-radius:0;
  background:transparent;
  color:var(--b2f-charcoal);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
}
body .b2f-cta-band .wp-block-button:not(:first-child) .wp-block-button__link{border-color:var(--b2f-line);background:var(--b2f-paper)}
body .b2f-cta-band .wp-block-button__link:hover{border-color:var(--b2f-gold-deep);filter:none}
body .b2f-cta-band .wp-block-button__link::after{content:none}
@media (min-width:768px){
  body .b2f-cta-band .wp-block-button__link{min-height:52px;padding:10px 24px;white-space:nowrap}
}
@media (min-width:1100px){
  .b2f-cta-band__inner{flex-direction:row;justify-content:space-between;align-items:center;gap:48px}
  .b2f-cta-band__text{display:flex;flex-direction:column;gap:12px}
}

/* Patroon b2f/usp-balk: vier voordelen naast elkaar (hoofdstuk 3a.1, kaartenraster). */
body .b2f-usp{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px 32px;
  max-width:var(--b2f-max);
  margin:0 auto;
  padding:28px var(--b2f-gutter);
}
@media (min-width:768px){
  body .b2f-usp{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  body .b2f-usp{grid-template-columns:repeat(4,minmax(0,1fr))}
}
body .b2f-usp__item{
  position:relative;
  margin:0;
  padding-left:40px;
}
.b2f-usp__item::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:26px;
  height:26px;
  background:var(--b2f-gold-deep);
  -webkit-mask:var(--b2f-usp-icon) center / contain no-repeat;
  mask:var(--b2f-usp-icon) center / contain no-repeat;
}
body .b2f-usp__item p{margin:0}
.b2f-usp__item p:first-child{font-size:14.5px;font-weight:500;color:var(--b2f-charcoal)}
.b2f-usp__item p + p{margin-top:3px;font-size:13px;line-height:1.5;color:var(--b2f-muted)}
.b2f-usp__item.is-icon-parts{--b2f-usp-icon:var(--b2f-icon-parts)}
.b2f-usp__item.is-icon-size{--b2f-usp-icon:var(--b2f-icon-size)}
.b2f-usp__item.is-icon-pin{--b2f-usp-icon:var(--b2f-icon-pin)}
.b2f-usp__item.is-icon-return{--b2f-usp-icon:var(--b2f-icon-return)}

/* In de inhoud van een pagina: een haarlijn erboven, zoals op de borden. */
.b2f-page__content > .b2f-usp{border-top:1px solid var(--b2f-line)}
@media (min-width:1100px){
  body .b2f-usp{padding-block:44px}
}

/* Patroon b2f/hulp-kaart: het blok Hulp nodig? in de filterkolom. */
body .b2f-helpcard{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px;
  background:var(--b2f-stone);
}
body .b2f-helpcard > *{margin:0}
.b2f-helpcard p:first-child{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--b2f-gold-deep)}
.b2f-helpcard p{font-size:13.5px;line-height:1.6;color:var(--b2f-muted)}
.b2f-helpcard a{
  color:var(--b2f-charcoal);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:6px;
}

/* ---------- Regels met een vinkje (patroon b2f/vinkjes) ---------- */

body .b2f-checks{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.b2f-checks li{
  position:relative;
  padding-left:29px;
  font-size:14px;
  line-height:1.5;
  color:var(--b2f-muted);
}
.b2f-checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:17px;
  height:17px;
  background:var(--b2f-gold-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---------- Knop die bezig is (bord Toestanden) ---------- */
/* WooCommerce zet .loading op een knop terwijl hij werkt, en .processing op
   het afrekenformulier. Het label blijft staan maar onzichtbaar, zodat de knop
   zijn breedte houdt (anders springt de pagina). Eroverheen het icoon en het
   woord Bezig, vertaald uit het thema via --b2f-busy-label. */

:is(.button,.b2f-btn,.single_add_to_cart_button).loading,
form.checkout.processing #place_order{
  position:relative;
  /* !important: WooCommerce en de knopvarianten zetten hun tekstkleur met
     zwaardere selectors; het label moet hier echt onzichtbaar zijn. */
  color:transparent !important;
  pointer-events:none;
  cursor:progress;
}
:is(.button,.b2f-btn,.single_add_to_cart_button).loading > *,
form.checkout.processing #place_order > *{visibility:hidden}
:is(.button,.b2f-btn,.single_add_to_cart_button).loading::after,
form.checkout.processing #place_order::after{
  content:var(--b2f-busy-label, "");
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:auto;
  height:auto;
  padding-left:27px;
  background:var(--b2f-icon-spinner-dark) left center / 17px 17px no-repeat;
  color:var(--b2f-graphite);
  white-space:nowrap;
  -webkit-mask:none;
  mask:none;
}
.b2f-btn--line.loading::after,
.is-style-line .loading::after{color:var(--b2f-charcoal)}