/* ==========================================================================
   Bridle2Fit · homepage (borden MainNL en MobileNL, stap 9)

   Alleen wat de bestaande componenten niet dekken. De secties zelf zijn
   .b2f-band, .b2f-hero, .b2f-split, .b2f-cta, .b2f-statement, .b2f-cards,
   .b2f-steps, .b2f-usp en de productkaart van de winkel; hier staan hun
   aanpassingen voor de homepage en de onderdelen die alleen hier voorkomen.

   Mobiel volgt het bord MobileNL, tablet en desktop hoofdstuk 3a. Geen vaste
   breedtes: het bord is 1440 breed, de pagina niet.
   ========================================================================== */

/* ---------- Homepage: ritme en koppen ---------- */
/* Uitzondering in 3a.1: het mobiele bord heeft 56 px boven en onder een
   sectie, tablet volgt de tabel (48), en vanaf 1100 px gelden de waarden van
   MainNL: 96 px, en 112 px op de volle banden met een eigen achtergrond
   (shop, Mix & Match, uitgelicht, waarom, hulp, ambassadeurs). In de twee
   splitsecties zit de ruimte in de tekstkolom. De h2 is op de homepage een
   maat groter (tabel in 3). */

@media (max-width:767px){
  .b2f-home{--b2f-section-y:56px}
}
@media (min-width:1100px){
  .b2f-home{--b2f-section-y:96px}
  .b2f-home > :is(.b2f-home-shop,.b2f-home-mix,.b2f-home-featured,.b2f-split--why,.b2f-home-guidance,.b2f-home-ambassadors){--b2f-section-y:112px}
  .b2f-home .b2f-split__body{padding-block:var(--b2f-section-y)}
}
.b2f-home .b2f-band__title{font-size:var(--b2f-fs-display);line-height:1.1;max-width:19em}
.b2f-home .b2f-band__title em,
.b2f-home .b2f-hero__title em{font-style:normal}
.b2f-home .b2f-band__intro{max-width:56ch}

/* Kop met de tekst links en een link rechts (Shop per onderdeel, Uitgelicht). */
.b2f-band__head--split > .wp-block-group{display:flex;flex-direction:column;gap:12px}
body .b2f-band__head--split > .wp-block-group > *{margin:0}
@media (min-width:1100px){
  .b2f-band__head--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}
  .b2f-band__head--split > .wp-block-group{gap:16px}
  .b2f-band__head--split > .wp-block-group:last-child:not(:first-child){flex-direction:row;align-items:flex-end;gap:36px;padding-bottom:6px}
  .b2f-band__head--split > .wp-block-group:last-child .b2f-band__intro{max-width:330px;font-size:15px;line-height:1.65}
  .b2f-band__head--split > .b2f-link{flex-shrink:0;padding-bottom:6px}
}
.b2f-home .b2f-band__head--split .b2f-link a,
.b2f-home .b2f-link a{white-space:nowrap}

/* Tekstlink naast een knop: gewone letters, een haarlijn eronder. */
.b2f-textlink a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13px;
  color:var(--b2f-muted);
  text-decoration:underline;
  text-decoration-color:var(--b2f-line);
  text-decoration-thickness:1px;
  text-underline-offset:6px;
}
.b2f-textlink a:hover{color:var(--b2f-charcoal);text-decoration-color:currentColor}
.b2f-dark .b2f-textlink a{color:var(--b2f-muted-dark);text-decoration-color:color-mix(in srgb, var(--b2f-muted-dark) 40%, transparent)}
.b2f-dark .b2f-textlink a:hover{color:var(--b2f-warm-white)}

/* Knop plus tekstlink op één rij vanaf tablet. */
.b2f-home-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:4px}
body .b2f-home-actions > *{margin:0}
@media (min-width:768px){
  .b2f-home-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px}
}

/* Tekst op donker, iets lichter dan muted-dark (bord: lead en alinea's). */
.b2f-home{--b2f-text-on-dark:color-mix(in srgb, var(--b2f-warm-white) 50%, var(--b2f-muted-dark))}

/* ---------- 1. Hero ---------- */
/* Mobiel en tablet: de foto bovenaan, de tekst eronder. Vanaf 1100 px de foto
   rechts en de tekst links, zoals .b2f-hero met foto, maar op de homepage maat. */

.b2f-home .b2f-band.b2f-hero.b2f-hero--home{
  --b2f-photo-h:480px;
  --b2f-photo-y:.3;
  justify-content:flex-start;
  gap:18px;
  min-height:0;
  padding:0 0 44px;
  /* Versie 2: één effen kleur. Het uitgeknipte paard staat er los op, zonder
     overloop van grijs naar zwart. */
  background:var(--b2f-graphite);
}
/* Het derde :not() houdt de specificiteit gelijk aan versie 1 (de regel moet
   winnen van .b2f-hero:has(...) .b2f-hero__title in patterns.css). */
.b2f-home .b2f-hero--home > :not(.b2f-hero__media):not(.b2f-hotspots):not(.b2f-hero__caption){padding-inline:var(--b2f-gutter)}
.b2f-home .b2f-hero--home .b2f-hero__media{position:relative;inset:auto;width:100%;height:var(--b2f-photo-h);margin-bottom:-14px}
.b2f-hero--home .b2f-hero__media img{object-position:50% calc(var(--b2f-photo-y) * 100%)}
/* Geen waas over de foto. Op mobiel en tablet snijdt het kader het paard
   onderaan af; alleen die snijrand loopt zacht op in de achtergrond. */
.b2f-hero--home .b2f-hero__media::after{content:none}
.b2f-hero--home .b2f-hero__media img{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
.b2f-hero--home .b2f-hero__title{max-width:none;font-size:var(--b2f-fs-hero-home);line-height:1.08}
.b2f-hero--home .b2f-hero__title em{color:var(--b2f-gold)}
.b2f-hero__lead{
  max-width:500px;
  font-size:var(--b2f-fs-lead);
  font-weight:300;
  line-height:1.6;
  color:var(--b2f-text-on-dark);
}
.b2f-hotspots__legend{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--b2f-muted-dark)}
.b2f-hotspots__legend a{color:inherit;text-decoration:none;white-space:nowrap}
.b2f-hotspots__legend a:hover{color:var(--b2f-gold)}

/* Knoppen: goud met pijl, lijn op donker zonder pijl. */
.b2f-hero--home .b2f-hero__actions{margin-top:4px}
.b2f-hero--home .is-style-line .wp-block-button__link{border-color:rgba(249,245,242,.5);color:var(--b2f-warm-white)}
.b2f-hero--home .is-style-line .wp-block-button__link:hover{border-color:var(--b2f-gold);background:rgba(249,245,242,.08)}
.b2f-hero--home .is-style-line .wp-block-button__link::after{content:none}

/* De tweede configurator als tekstlink onder de knoppen. */
body .b2f-hero--home .b2f-hero__more{margin:14px 0 0;font-size:14px}
.b2f-hero--home .b2f-hero__more .b2f-textlink{color:var(--b2f-gold)}
.b2f-hero--home .b2f-hero__more .b2f-textlink:hover{color:var(--b2f-warm-white)}

/* Twee feiten onder de knoppen. */
.b2f-hero__facts{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:14px;
  padding-top:20px;
  border-top:1px solid rgba(207,200,195,.22);
}
body .b2f-hero__facts > *,
body .b2f-hero__fact > *{margin:0}
/* Onder elkaar (onder 768 px): de cijfers in één kolom, zodat de tekst erachter
   bij 2016 en VPGC op dezelfde lijn begint. */
.b2f-hero__facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:14px 14px}
.b2f-hero__fact{display:contents}
.b2f-hero__fact-value{flex-shrink:0;font-size:21px;line-height:1.1;letter-spacing:.02em;color:var(--b2f-warm-white)}
/* Feit met een link (VPGC → vpgc.nl): dunne gouden lijn, zodat je ziet dat je kunt klikken. */
.b2f-hero__fact-value a{color:inherit;text-decoration:underline;text-decoration-color:var(--b2f-gold);text-decoration-thickness:1px;text-underline-offset:4px}
.b2f-hero__fact-value a:hover,.b2f-hero__fact-value a:focus-visible{color:var(--b2f-gold)}
.b2f-hero__fact-text{font-size:13px;line-height:1.5;color:var(--b2f-muted-dark)}

/* Markeringen op de foto. Ze staan in procenten van de foto zelf: op mobiel en
   tablet rekent de positie de uitsnede mee (foto even breed als het scherm,
   hoogte --b2f-photo-h, verschoven met --b2f-photo-y). */
.b2f-home .b2f-hotspots{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  height:var(--b2f-photo-h);
  padding:0;
  overflow:hidden;
  container-type:inline-size;
  pointer-events:none;
}
.b2f-hotspot{
  --img-h:calc(100cqw * 1400 / 918);
  position:absolute;
  left:calc(var(--x) * 100%);
  top:calc(var(--y) * var(--img-h) - (var(--img-h) - var(--b2f-photo-h)) * var(--b2f-photo-y));
  width:12px;
  height:12px;
  border:1.5px solid var(--b2f-gold);
  border-radius:var(--b2f-radius-round);
  background:rgba(0,0,0,.35) radial-gradient(circle,var(--b2f-gold) 0 1.5px,transparent 2px);
  transform:translate(-50%,-50%);
}
.b2f-hotspot{pointer-events:auto;cursor:pointer}
/* Groter klikvlak dan de stip zelf. */
.b2f-hotspot::before{content:"";position:absolute;inset:-14px}
.b2f-hotspot::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:1px solid var(--b2f-gold);
  border-radius:inherit;
  animation:b2f-halo 3.2s ease-out infinite;
}
@keyframes b2f-halo{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2.1);opacity:0}
  100%{transform:scale(2.1);opacity:0}
}
.b2f-hotspot__label{display:none}

@media (min-width:768px){
  .b2f-home .b2f-band.b2f-hero.b2f-hero--home{--b2f-photo-h:clamp(520px, 68vw, 640px);--b2f-photo-y:.15;padding-bottom:var(--b2f-section-y)}
  .b2f-hero__facts{display:flex;flex-direction:row;gap:40px;max-width:560px;margin-top:24px;padding-top:28px}
  .b2f-hero__fact{display:flex;gap:12px;align-items:flex-start;flex:1 1 0}
}

@media (min-width:1100px){
  .b2f-home .b2f-band.b2f-hero.b2f-hero--home{
    justify-content:center;
    gap:28px;
    min-height:clamp(720px, 59.7vw, 860px);
    padding:var(--b2f-section-y) var(--b2f-band-x);
  }
  /* Tekst links naast het paard: nooit breder dan de ruimte ernaast (het paard
     is bij 1100 px ongeveer 480 px breed). */
  .b2f-home .b2f-hero--home > :not(.b2f-hero__media):not(.b2f-hotspots):not(.b2f-hero__caption){max-width:min(620px, calc(100% - 520px));padding-inline:0}
  /* Het paard staat rechtsonder, hooguit 44% breed. De foto is rechts en
     onderaan afgesneden; die randen vallen precies op de rand van het scherm
     en de onderkant van de hero, dus je ziet ze niet. */
  .b2f-home .b2f-hero--home .b2f-hero__media,
  .b2f-home .b2f-hotspots{
    position:absolute;
    top:auto;
    bottom:0;
    left:auto;
    right:0;
    width:min(44%, 620px);
    height:auto;
    max-height:100%;
    margin:0;
    aspect-ratio:1180 / 1800;
  }
  .b2f-hero--home .b2f-hero__media img{object-position:50% 50%;-webkit-mask-image:none;mask-image:none}
  .b2f-hotspot{top:calc(var(--y) * 100%);width:14px;height:14px;background-size:auto}
  .b2f-hotspot__label{
    position:absolute;
    left:calc(100% + 10px);
    top:50%;
    display:block;
    padding:6px 10px;
    border:1px solid rgba(201,185,101,.35);
    background:rgba(23,22,27,.78);
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    white-space:nowrap;
    color:var(--b2f-warm-white);
    transform:translateY(-50%);
    transition:border-color var(--b2f-dur) var(--b2f-ease),background var(--b2f-dur) var(--b2f-ease);
  }
  .b2f-hotspot:hover .b2f-hotspot__label{border-color:var(--b2f-gold);background:rgba(23,22,27,.92)}
  /* Op desktop staan de namen bij de stippen; de regel blijft voor het
     toetsenbord en schermlezers, maar onzichtbaar. */
  .b2f-hotspots__legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .b2f-hotspots__legend:focus-within{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .b2f-hero__lead{font-size:19px}
  .b2f-hero__facts{margin-top:36px}
  .b2f-hero__fact-value{font-size:24.5px;line-height:1.12}
  .b2f-hero__fact-text{font-size:13.5px}
}

/* ---------- 2. Shop per onderdeel ---------- */

/* Tegels zoals de brand identity: een vierkante sfeerfoto met ronde hoeken en
   een donker label dat half over de onderrand valt. Daaronder klein het aantal
   en de laagste prijs. De foto is de categorieafbeelding uit WooCommerce. */
body .b2f-cattiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px;margin:0;padding:0;list-style:none}
.b2f-cattile{display:grid;grid-template-columns:minmax(0,1fr);height:100%;color:var(--b2f-charcoal)}
.b2f-cattile__media{grid-area:1 / 1;display:block;aspect-ratio:1 / 1;overflow:hidden;border-radius:var(--b2f-radius-tile);background:var(--b2f-graphite)}
.b2f-cattile__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--b2f-dur-photo) cubic-bezier(.22,.61,.36,1);
}
.b2f-cattile:hover .b2f-cattile__img{transform:scale(1.045)}
.b2f-cattile__caption{display:contents}
.b2f-cattile__name{
  grid-area:1 / 1;
  align-self:end;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  width:88%;
  min-height:44px;
  padding:7px 10px;
  border-radius:var(--b2f-radius-label);
  background:var(--b2f-slate);
  color:var(--b2f-warm-white);
  font-size:11.5px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
  transform:translateY(50%);
  transition:background-color .35s var(--b2f-ease);
}
.b2f-cattile:hover .b2f-cattile__name{background:var(--b2f-graphite)}
.b2f-cattile:focus-visible .b2f-cattile__name{outline:2px solid var(--b2f-gold);outline-offset:2px}
.b2f-cattile__meta{margin-top:34px;font-size:12px;text-align:center;color:var(--b2f-muted)}
@media (min-width:768px){
  .b2f-cattile__name{width:86%;min-height:48px;font-size:13px;letter-spacing:.16em}
}
@media (min-width:1100px){
  body .b2f-cattiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px}
  .b2f-cattile__name{width:84%;min-height:56px;font-size:15px;letter-spacing:.18em}
  .b2f-cattile__meta{margin-top:40px;font-size:13px}
}

/* Ook in de collectie. */
.b2f-alsolinks{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--b2f-line)}
body .b2f-alsolinks > *{margin:0}
.b2f-alsolinks__list{font-size:14px;line-height:1.9;color:var(--b2f-muted)}
.b2f-alsolinks__label{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--b2f-muted)}
.b2f-alsolinks__list a{color:var(--b2f-charcoal)}
.b2f-alsolinks__list a:hover{color:var(--b2f-gold-deep)}
.b2f-alsolinks__swarovski a{color:var(--b2f-gold-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap}
@media (min-width:1100px){
  .b2f-alsolinks{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:14px;padding-top:32px}
  .b2f-alsolinks__list{font-size:14.5px;line-height:1.6}
  .b2f-alsolinks__label{display:inline;margin-right:10px;font-size:11.5px}
  .b2f-alsolinks__swarovski{margin-left:auto}
}

/* ---------- 3. Mix & Match ---------- */

.b2f-home-mix{gap:26px}
.b2f-mixmatch__text{display:flex;flex-direction:column;gap:12px}
body .b2f-mixmatch__text > *{margin:0}
.b2f-mixmatch__text .b2f-checks{margin-top:4px}
.b2f-mixmatch__text .b2f-checks li{font-size:15px;color:var(--b2f-charcoal)}

.b2f-mixmatch{display:flex;flex-direction:column;gap:26px}
.b2f-mixmatch__stage{position:relative;height:420px;overflow:hidden;background:var(--b2f-night)}
.b2f-mixmatch__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--b2f-pos-m);animation:b2f-fade .5s var(--b2f-ease)}
@keyframes b2f-fade{from{opacity:0}to{opacity:1}}
.b2f-mixmatch__bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:18px;
  background:linear-gradient(0deg,rgba(23,22,27,.92),rgba(23,22,27,.45) 55%,rgba(23,22,27,0));
}
body .b2f-mixmatch__bar p{margin:0}
.b2f-mixmatch__label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--b2f-gold)}
.b2f-mixmatch__combo{margin-top:4px;font-size:21px;line-height:1.25;letter-spacing:.02em;color:var(--b2f-warm-white)}
.b2f-mixmatch__cta{display:none}


@media (min-width:768px){
  .b2f-mixmatch__stage{height:520px}
}
@media (min-width:1100px){
  .b2f-band.b2f-home-mix{display:grid;grid-template-columns:380px minmax(0,1fr);align-items:center;gap:64px}
  .b2f-mixmatch__text{gap:24px}
  .b2f-mixmatch__text .b2f-band__intro{font-size:16px;line-height:1.7}
  .b2f-mixmatch{gap:28px}
  .b2f-mixmatch__stage{height:600px}
  .b2f-mixmatch__photo{object-position:var(--b2f-pos)}
  .b2f-mixmatch__bar{padding:26px 28px}
  .b2f-mixmatch__label{font-size:11px}
  .b2f-mixmatch__combo{font-size:25px;line-height:1.2}
  .b2f-mixmatch__cta{display:inline-flex}
  .b2f-mixmatch__cta-m{display:none}
}

/* ---------- 4. Klaar om die van jou samen te stellen? ---------- */
/* .b2f-cta met een foto over de hele band, zoals de foto in .b2f-hero. */

.b2f-band.b2f-cta--photo{position:relative;display:block;overflow:hidden;padding-top:200px;padding-bottom:52px}
body .b2f-cta--photo .b2f-cta__media{position:absolute;inset:0;margin:0}
.b2f-cta__media img{width:100%;height:100%;object-fit:cover;object-position:66% 30%}
.b2f-cta__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(23,22,27,.35) 0%,rgba(23,22,27,.88) 42%,rgba(23,22,27,.96) 100%);
}
.b2f-cta--photo .b2f-cta__body{position:relative;z-index:1;max-width:744px;gap:18px}
.b2f-cta--photo .b2f-band__intro{max-width:560px;color:var(--b2f-text-on-dark)}
@media (min-width:768px){
  .b2f-band.b2f-cta--photo{padding-top:var(--b2f-section-y);padding-bottom:var(--b2f-section-y)}
  .b2f-cta__media::after{background:linear-gradient(90deg,rgba(23,22,27,.94) 0%,rgba(23,22,27,.86) 38%,rgba(23,22,27,.42) 68%,rgba(23,22,27,.25) 100%)}
  .b2f-cta__media img{object-position:72% 38%}
}
@media (min-width:1100px){
  .b2f-band.b2f-cta--photo{display:flex;align-items:center;min-height:560px}
  .b2f-cta--photo .b2f-cta__body{gap:24px}
  .b2f-cta--photo .b2f-band__intro{font-size:17px;line-height:1.65}
}

/* ---------- 5. Uitgelicht ---------- */
/* De productkaart van de winkel, met de maten van het bord. */

.b2f-featured ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
.b2f-featured .b2f-card__media{aspect-ratio:4 / 5}
.b2f-featured .b2f-card__media .b2f-product-img{padding:6px}
.b2f-featured .b2f-card__title{font-size:22px;line-height:1.1}
.b2f-featured .b2f-card__sizes{display:none}
@media (max-width:767.98px){
  /* Mobiel bord: geen kader om de kaart, wel het label, geen tekst en knop. */
  .b2f-featured .b2f-card:not(.b2f-card--compact){border:0;background:none}
  .b2f-featured .b2f-card:not(.b2f-card--compact) .b2f-card__media{aspect-ratio:4 / 5;height:auto}
  .b2f-featured .b2f-card:not(.b2f-card--compact) .b2f-card__media .b2f-product-img{padding:6px}
  .b2f-featured .b2f-card:not(.b2f-card--compact) .b2f-card__body{gap:6px;margin-top:14px;padding:0}
  .b2f-featured .b2f-card:not(.b2f-card--compact) .b2f-card__title{font-size:22px;line-height:1.1;letter-spacing:.02em}
  .b2f-featured .b2f-card__label{display:block;font-size:10.5px;letter-spacing:.18em}
  .b2f-featured .b2f-card__teaser{display:none}
  .b2f-featured .b2f-card__body > .b2f-card__foot{padding-top:6px;border-top:1px solid var(--b2f-line)}
  .b2f-featured .b2f-card__price{font-size:14px}
}
@media (min-width:1100px){
  .b2f-featured ul.products{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .b2f-featured .b2f-card__title{font-size:26px;line-height:1.08}
  .b2f-featured .b2f-card__teaser{font-size:14px;line-height:1.6}
  .b2f-featured .b2f-swatch--sm{width:14px;height:14px}
}

/* ---------- 6. Swarovski frontriemen ---------- */

/* De titel: twee zinnen, elk op één regel. De letter schaalt mee met de
   ruimte, zodat "Gemaakt om op te vallen." nooit afbreekt. */
.b2f-home .b2f-split--swarovski .b2f-band__title{font-size:min(30px, 7vw)}
.b2f-split--swarovski .b2f-oneline{display:block;white-space:nowrap}
/* Gelijke regels: geen losse "46 cm." onderaan. */
.b2f-split--swarovski .b2f-split__body p{text-wrap:balance}
.b2f-split--swarovski .b2f-split__media{height:300px}
.b2f-split--swarovski .b2f-split__media img{object-position:50% 50%}
.b2f-stones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.b2f-stone{
  --s:28px;
  width:var(--s);
  height:var(--s);
  border-radius:var(--b2f-radius-round);
  background:url("../img/home/kristallen.webp") no-repeat calc(var(--i) * var(--s) * -1) 0 / calc(var(--s) * 8) var(--s);
  box-shadow:0 1px 3px rgba(38,37,42,.16);
}
.b2f-stones__more{font-size:12.5px;color:var(--b2f-muted)}
@media (min-width:768px){
  .b2f-split--swarovski .b2f-split__media{height:380px}
}
@media (min-width:1100px){
  .b2f-band.b2f-split--swarovski{min-height:620px}
  .b2f-home .b2f-split--swarovski .b2f-band__title{font-size:clamp(28px, 3.2vw, 42px)}
  .b2f-split--swarovski .b2f-split__media{height:auto}
  .b2f-split--swarovski .b2f-split__media img{object-position:55% 50%}
  .b2f-stones{gap:10px}
  .b2f-stone{--s:30px}
  .b2f-stones__more{margin-left:6px;white-space:nowrap}
}

/* ---------- 7. De gedachte erachter ---------- */

.b2f-band.b2f-statement--home{gap:18px;padding-inline:max(28px, var(--b2f-band-x))}
.b2f-statement--home .b2f-kicker{font-size:11px;letter-spacing:.26em}
.b2f-statement--home .b2f-statement__lead{max-width:30ch;font-size:21px;line-height:1.42;color:var(--b2f-charcoal)}
.b2f-statement--home .b2f-statement__text{max-width:36ch;margin-top:0;font-size:14px;line-height:1.7;text-align:center}
@media (min-width:768px){
  .b2f-statement--home .b2f-statement__lead{max-width:44ch;font-size:24px}
  .b2f-statement--home .b2f-statement__text{max-width:720px;font-size:15px}
}
@media (min-width:1100px){
  .b2f-band.b2f-statement--home{gap:22px}
  .b2f-statement--home .b2f-statement__lead{max-width:900px;font-size:28px;letter-spacing:.015em}
  .b2f-statement--home .b2f-statement__text{font-size:16px}
}

/* ---------- 8. Waarom pasvorm telt ---------- */

.b2f-band.b2f-split--why{position:relative;overflow:hidden}
/* Het schild als watermerk, één keer op de pagina (bord). */
.b2f-split--why::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-160px;
  z-index:0;
  width:520px;
  aspect-ratio:185 / 270;
  background:url("../img/schild.svg") no-repeat center / contain;
  opacity:.05;
  filter:grayscale(1) brightness(2.2);
  pointer-events:none;
}
.b2f-split--why > *{position:relative;z-index:1}
.b2f-split--why .b2f-split__media{position:relative;height:280px}
.b2f-split--why .b2f-split__media img{object-position:50% 30%}
.b2f-split--why .b2f-split__body{gap:26px}
.b2f-split--why .b2f-band__intro{max-width:600px;color:var(--b2f-text-on-dark)}

/* Bijschrift als label op een foto. */
.b2f-phototag figcaption,
.b2f-ambassador__media figcaption{
  position:absolute;
  left:16px;
  top:16px;
  margin:0;
  padding:5px 9px;
  border:1px solid rgba(201,185,101,.4);
  background:rgba(23,22,27,.55);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--b2f-gold);
}

/* Genummerde punten op donker, twee per rij. */
.b2f-steps--dark{gap:22px}
.b2f-steps--dark .b2f-step{gap:7px;padding-top:16px;border-top-color:rgba(207,200,195,.25)}
.b2f-steps--dark .b2f-step::before{color:var(--b2f-gold)}
.b2f-steps--dark .b2f-step__title{font-size:16px;font-weight:500;color:var(--b2f-warm-white)}
.b2f-steps--dark .b2f-step__text{font-size:14px;line-height:1.6;color:var(--b2f-muted-dark)}

/* Ontwikkeld met het VPGC, met een kleine foto. */
.b2f-endorse{display:flex;align-items:center;gap:16px;padding-top:22px;border-top:1px solid rgba(207,200,195,.25)}
body .b2f-endorse > *{margin:0}
.b2f-endorse__img{flex-shrink:0;width:72px;height:72px}
/* Uitgeknipt paardenhoofd op het donker, zonder witte rand (versie 2). */
.b2f-endorse__img img{width:100%;height:100%;object-fit:contain}
.b2f-endorse p{font-size:14px;line-height:1.6;color:var(--b2f-text-on-dark)}

@media (min-width:768px){
  .b2f-split--why .b2f-split__media{height:380px}
  .b2f-steps--dark{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 44px}
}
@media (min-width:1100px){
  .b2f-band.b2f-split--why{grid-template-columns:min(600px, 45%) minmax(0,1fr)}
  .b2f-split--why::after{right:-210px;bottom:-300px;width:1040px}
  .b2f-split--why .b2f-split__media{height:auto}
  .b2f-split--why .b2f-split__body{gap:36px;max-width:760px;padding-inline:80px var(--b2f-band-x)}
  .b2f-phototag figcaption{left:40px;top:40px;padding:6px 10px;font-size:11px}
  .b2f-steps--dark .b2f-step{gap:9px;padding-top:18px}
  .b2f-steps--dark .b2f-step__title{font-size:17px}
  .b2f-steps--dark .b2f-step__text{font-size:14.5px}
  .b2f-endorse{gap:22px;padding-top:24px}
  .b2f-endorse__img{width:88px;height:88px}
  .b2f-endorse p{max-width:520px;font-size:14.5px}
}

/* ---------- 9. Hulp bij je keuze en veelgestelde vragen ---------- */

.b2f-band.b2f-home-guidance{gap:26px}
.b2f-guidance__main{display:flex;flex-direction:column;gap:26px}
body .b2f-guidance__main > *{margin:0}

/* Kaarten die in hun geheel een link zijn. */
.b2f-cards--links > .b2f-card{gap:10px;padding:22px}
.b2f-cards--links > .b2f-card[class*="is-icon-"]::before{width:26px;height:26px}
.b2f-cards--links .b2f-card__title{font-size:19px;line-height:1.15;letter-spacing:.02em}
.b2f-cards--links .b2f-card__text{font-size:14px;line-height:1.6}
.b2f-card__cta{padding-top:4px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.b2f-card__cta a{color:var(--b2f-charcoal)}
/* De link onderaan de kaart, bij alle kaarten op dezelfde hoogte. Met body
   ervoor, anders wint de standaardmarge van WordPress. */
body .b2f-cards--links .b2f-card__cta{margin-top:auto}
.b2f-card__cta a::after{content:"";position:absolute;inset:0}
.b2f-cards--links > .b2f-card:hover .b2f-card__cta a{color:var(--b2f-gold-deep)}
.b2f-cards--links > .b2f-card:has(a:focus-visible){outline:2px solid var(--b2f-focus);outline-offset:2px}
.b2f-card__cta a:focus-visible{outline:none}

/* Veelgestelde vragen: de details-blokken van de editor. */
.b2f-faq{display:flex;flex-direction:column;margin-top:12px}
body .b2f-faq > *{margin:0}
.b2f-faq__title{padding-bottom:12px;border-bottom:1px solid var(--b2f-charcoal);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--b2f-muted)}
.b2f-faq details{border-bottom:1px solid var(--b2f-line)}
.b2f-faq summary{
  position:relative;
  display:block;
  min-height:44px;
  padding:18px 32px 18px 0;
  font-size:15px;
  line-height:1.45;
  color:var(--b2f-charcoal);
  cursor:pointer;
  list-style:none;
}
.b2f-faq summary::-webkit-details-marker{display:none}
.b2f-faq summary::after{content:"+";position:absolute;right:0;top:50%;font-size:20px;line-height:1;color:var(--b2f-gold-deep);transform:translateY(-50%)}
.b2f-faq details[open] summary::after{content:"−"}
.b2f-faq details > :not(summary){margin:0 0 18px;font-size:14.5px;line-height:1.7;color:var(--b2f-muted)}
/* Nog geen antwoord ingevuld: dan is de vraag een gewone regel, geen uitklapper. */
.b2f-faq details:not(:has(> :not(summary):not(:empty))) summary{cursor:default;pointer-events:none}
.b2f-faq details:not(:has(> :not(summary):not(:empty))) summary::after{content:none}

@media (min-width:768px){
  .b2f-cards--links > .b2f-card{padding:26px}
}
@media (min-width:1100px){
  /* Kop en uitleg links; de kaarten links en de vragen rechts beginnen op
     dezelfde hoogte. De koptekst "Veelgestelde vragen" staat er net boven. */
  .b2f-band.b2f-home-guidance{display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:start;gap:0 80px}
  .b2f-guidance__main,.b2f-faq{display:contents}
  .b2f-guidance__main > .b2f-band__head{grid-area:1 / 1}
  .b2f-guidance__main > .b2f-band__intro{grid-area:2 / 1;margin-top:24px}
  .b2f-faq__title{grid-area:3 / 2;align-self:end;margin-top:24px}
  .b2f-guidance__main > .b2f-cards{grid-area:4 / 1}
  .b2f-faq__list{grid-area:4 / 2}
  .b2f-cards--links > .b2f-card{gap:14px;min-height:250px;padding:28px}
  .b2f-cards--links > .b2f-card[class*="is-icon-"]::before{width:30px;height:30px}
  .b2f-cards--links .b2f-card__title{font-size:21.5px;line-height:1.1}
  .b2f-card__cta{font-size:12.5px}
  .b2f-faq{margin-top:0}
  .b2f-faq__title{padding-bottom:16px;font-size:12.5px}
  .b2f-faq summary{padding-block:20px;font-size:16px}
}

/* ---------- 10. Ambassadeurs ---------- */
/* Mobiel: de foto over de hele breedte bovenaan, daaronder tekst en citaten. */

.b2f-band.b2f-home-ambassadors{gap:22px;padding:0 0 52px}
.b2f-ambassador{display:flex;flex-direction:column;gap:22px}
body .b2f-ambassador > *{margin:0}
.b2f-ambassador__media{position:relative;height:300px;overflow:hidden;background:var(--b2f-graphite)}
.b2f-ambassador__media img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.b2f-ambassador__media figcaption{
  top:auto;
  bottom:16px;
  padding:8px 12px;
  border:0;
  background:rgba(23,22,27,.88);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:none;
  color:var(--b2f-warm-white);
}
.b2f-ambassador__text{display:flex;flex-direction:column;gap:22px;padding:22px var(--b2f-gutter) 0}
body .b2f-ambassador__text > *{margin:0}
.b2f-homequotes{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-inline:var(--b2f-gutter)}
.b2f-homequote{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--b2f-line);background:var(--b2f-warm-white)}
body .b2f-homequote > *{margin:0}
.b2f-homequote::before{content:"";width:24px;height:1px;background:var(--b2f-gold-deep)}
.b2f-homequote__text{font-size:17px;line-height:1.4;letter-spacing:.02em;color:var(--b2f-charcoal)}
.b2f-homequote__by{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;color:var(--b2f-charcoal)}
/* Naam onderaan, in alle kaarten op dezelfde hoogte. */
body .b2f-homequote > .b2f-homequote__by{margin-top:auto}
.b2f-homequote__by strong{font-weight:600}
.b2f-homequote__by span{font-size:12px;color:var(--b2f-muted)}

@media (min-width:768px){
  .b2f-band.b2f-home-ambassadors{padding:var(--b2f-section-y) var(--b2f-band-x)}
  .b2f-ambassador__media{height:380px}
  .b2f-ambassador__text{padding:0}
  .b2f-homequotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0}
}
@media (min-width:1100px){
  .b2f-band.b2f-home-ambassadors{gap:52px}
  .b2f-ambassador{flex-direction:row;align-items:center;gap:72px}
  .b2f-ambassador__media{flex:0 1 700px;height:460px}
  .b2f-ambassador__media figcaption{left:20px;bottom:20px;padding:9px 14px;font-size:12.5px}
  .b2f-ambassador__text{flex:1 1 0}
  .b2f-homequotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .b2f-homequote{gap:16px;padding:26px 28px 24px}
  .b2f-homequote::before{width:26px}
  .b2f-homequote__text{font-size:18.5px}
  .b2f-homequote__by{font-size:13.5px}
  .b2f-homequote__by span{font-size:12.5px}
}

/* ---------- 11. Voordelenbalk ---------- */
/* Mobiel bord: twee per rij, icoon boven de titel, zonder tweede regel. */

@media (max-width:767px){
  body .b2f-usp.b2f-usp--home{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;padding-block:36px}
  body .b2f-usp--home .b2f-usp__item{padding:32px 0 0}
  .b2f-usp--home .b2f-usp__item::before{width:24px;height:24px;top:0}
  .b2f-usp--home .b2f-usp__item p + p{display:none}
}
@media (min-width:1100px){
  body .b2f-usp--home .b2f-usp__item{padding-left:44px}
  .b2f-usp--home .b2f-usp__item::before{width:28px;height:28px}
  .b2f-usp--home .b2f-usp__item p:first-child{font-size:15px}
  .b2f-usp--home .b2f-usp__item p + p{font-size:13.5px}
}
.b2f-home .b2f-usp--home{border-top:1px solid var(--b2f-line)}

/* ---------- Sticky balk onderaan ---------- */
/* De balk van de winkel, hier donker met twee knoppen. */

@media (max-width:1099.98px){
  .b2f-has-buybar .b2f-buybar--home{gap:10px;padding-inline:16px;border-top-color:var(--b2f-line-dark);background:var(--b2f-night)}
  .b2f-buybar--home .b2f-btn{flex:1 1 0;max-width:none;padding-inline:14px}
}