/* ==========================================================================
   pb-fokkers.css
   Patty Bakker — PAGINA-SPECIFIEK: "Voor fokkers" (voor-fokkers.html).
   Laad NA pb-common.css. Alle regels zijn onder .pb-main gescoped.
   Desktop-first: de basis = desktop; de mobiele/tablet-afwijkingen staan
   onderaan in @media-blokken.

   pb-common.css wordt al op de pagina geladen en levert alle gedeelde
   primitives: .section (+ marges/breedte), .page-intro (+ h1/p), .eyebrow,
   .h2, .label(.green) en .section-head. Die worden hier NIET herhaald of
   overschreven. Dit bestand bevat uitsluitend classes die pb-common niet kent.
   ========================================================================== */

/* ---------- Hero (page-intro variant) ----------
   .page-intro (+ h1/p), .eyebrow, .h2, .section, .section-head en .label komen
   volledig uit pb-common.css en worden hier NIET overschreven. Alleen de zachte
   verloop-achtergrond van de hero is pagina-eigen. */
.pb-main .breeder-hero.pb-soft-hero{
  background:linear-gradient(180deg,#fbf6f1,#fffaf5);
  border-bottom:1px solid var(--line);
}
.pb-main .intro-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:14px;
}

/* ---------- Knoppen (.hero-btn) ---------- */
.pb-main .hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border-radius:10px;
  font-family:Manrope,system-ui,sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}
.pb-main .hero-btn svg{display:none}
.pb-main .hero-btn.primary{
  background:var(--accent);
  color:#fff;
  border:0;
  box-shadow:0 8px 16px rgba(111,72,49,.18);
}
.pb-main .hero-btn.primary:hover{background:#b96a47}
.pb-main .hero-btn.ghost{
  background:transparent;
  color:var(--brown);
  border:1px solid var(--line);
}
.pb-main .hero-btn.ghost:hover{background:var(--cream)}

/* ---------- Sectie 2: breeder ---------- */
.pb-main .breeder-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:24px;
}
.pb-main .breeder-lead{           /* de intro-alinea in de linkerkolom */
  color:var(--dark);
  font-size:16px;
  line-height:1.5;
  margin:16px 0;
}
.pb-main .pb-button-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:20px;
}
.pb-main .breeder-card{
  background:#fffaf5;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}
.pb-main .breeder-card .breeder-photo,
.pb-main .breeder-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:14px;
  background:var(--cream2);      /* zachte vlak als er (nog) geen foto is */
}
.pb-main .breeder-card h3{
  font-family:Fraunces,serif;
  color:var(--brown);
  font-size:26px;
  margin:8px 0;
}
.pb-main .breeder-card p{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  margin:0;
}

/* ---------- Flow-secties (feature + related) ----------
   .section-head-marges komen uit pb-common. */
.pb-main .section.pb-flow-section{
  background:#fffaf5;
  padding-top:72px;
  padding-bottom:72px;
}

.pb-main .pb-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.pb-main .pb-feature-grid article{
  background:#fffaf5;
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px;
}
.pb-main .pb-feature-grid h3{
  font-family:Fraunces,serif;
  color:var(--brown);
  font-size:22px;
  line-height:1.1;
  margin:0 0 8px;
}
.pb-main .pb-feature-grid p{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  margin:0;
}

.pb-main .pb-related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.pb-main .pb-related-grid a{
  display:grid;
  gap:6px;
  background:#fffaf5;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  color:var(--brown);
  text-decoration:none;
}
.pb-main .pb-related-grid span{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:999px;
  background:var(--cream);
  color:var(--accent);
}
.pb-main .pb-related-grid b{font-family:Fraunces,serif;font-size:20px;line-height:1.1}
.pb-main .pb-related-grid small{color:var(--muted);font-size:13px;line-height:1.45}

/* ============================ RESPONSIVE ============================ */
/* Grids naar één kolom (prototype schakelt om op 760px) */
@media (max-width:759px){
  .pb-main .breeder-layout{grid-template-columns:1fr}
  .pb-main .pb-feature-grid{grid-template-columns:1fr}
  .pb-main .pb-related-grid{grid-template-columns:1fr}
}
/* Knoppen iets hoger op mobiel (prototype <768px) */
@media (max-width:767px){
  .pb-main .hero-btn{min-height:46px}
}
/* Compactere flow-secties op kleine schermen (prototype <=640px) */
@media (max-width:640px){
  .pb-main .section.pb-flow-section{padding-top:52px;padding-bottom:52px}
}
/* Volle-breedte, gestapelde knoppen op telefoons (prototype <=560px) */
@media (max-width:560px){
  .pb-main .hero-btn{width:100%}
  .pb-main .pb-button-row{width:100%}
}

/* Specials cards — photo with Special badge + name + breed overlaid.
   Scoped to .pb-specials-grid so your other breeder-card stays untouched. */
.pb-main .pb-specials-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }

.pb-main .pb-specials-grid .breeder-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 7px;
  aspect-ratio: 1 / 1;
  padding: 14px;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  background: #e7c0a6;
  box-shadow: 0 10px 24px rgba(77,51,34,.14);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pb-main .pb-specials-grid .breeder-card:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(77,51,34,.22); }

/* Photo fills the card (behind everything) */
.pb-main .pb-specials-grid .breeder-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.pb-main .pb-specials-grid .breeder-card:hover .breeder-photo { transform: scale(1.06); }

/* Readability gradient */
.pb-main .pb-specials-grid .breeder-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(38,27,20,0) 38%, rgba(38,27,20,.32) 62%, rgba(38,27,20,.82));
}

/* All text sits above the gradient */
.pb-main .pb-specials-grid .breeder-card .label,
.pb-main .pb-specials-grid .breeder-card h3,
.pb-main .pb-specials-grid .breeder-card p { position: relative; z-index: 2; margin: 0; }

/* "Special" badge */
.pb-main .pb-specials-grid .breeder-card .label {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 999px; background: #c97a55; color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 6px 14px rgba(38,27,20,.22);
}

/* Name */
.pb-main .pb-specials-grid .breeder-card h3 {
  font-family: Fraunces, serif; font-weight: 700; font-size: 22px; line-height: 1;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* Breed */
.pb-main .pb-specials-grid .breeder-card p {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

@media (max-width: 900px){ .pb-main .pb-specials-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .pb-main .pb-specials-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   VOOR-FOKKERS, HERBOUWDE VERSIE (pb-fk2-…)
   --------------------------------------------------------------------------
   /voor-fokkers/ is in Bricks opnieuw opgebouwd met een compleet nieuw
   klassenschema — let op die "fk2", versie 2 — en de bijbehorende opmaak
   bestond nergens meer: niet in dit thema, niet in een Bricks-inline-blok en
   niet in de pagina-instellingen. Van de 39 klassen op de pagina was er 2
   gedekt.

   Dit blok staat er BIJ en vervangt niets. De regels hierboven werden nog
   gebruikt door /specials-voor-fokkers/, dat dit zelfde bestand kreeg en leunt
   op .breeder-hero, .breeder-layout, .breeder-card, .breeder-photo,
   .pb-feature-grid en nog een tiental andere.

   LET OP: die pagina is vervallen — de site gebruikt /voor-fokkers/. Zodra
   hij echt weg is kunnen de .breeder-* en .pb-feature-grid-regels hierboven
   mee. Ze staan nergens anders: van de klassen in dat blok komen alleen
   .hero-btn, .intro-actions, .pb-button-row, .pb-related-grid,
   .pb-specials-grid en .section nog voor op /voor-fokkers/ — die moeten dus
   blijven staan.

   Zelfde taal als de rest van de site: --pb-edge als zijmarge, 1140px
   binnenmaat, Fraunces-koppen met negatieve letterafstand, accentkleurige
   bovenkopjes, secties om en om in --paper en #f6eee7.

   LET OP de hero-foto: .pb-fk2-hero-photo is een lege div (hoogte 0, geen
   achtergrond). In het oorspronkelijke ontwerp zat die foto als
   background-image in de CSS. Stel hem in Bricks in op de div zelf
   (Stijl → Achtergrond → Afbeelding); hieronder krijgt hij alleen verhouding,
   uitsnede en ronding.
   ========================================================================== */

/* ---- Secties en koppen -------------------------------------------------- */

.pb-main .pb-fk2-hero,
.pb-main .pb-fk2-section{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:var(--pb-edge);
  padding-right:var(--pb-edge);
  color:var(--brown, #75543f);
  background:var(--paper, #fffaf5);
}

.pb-main .pb-fk2-hero{
  display:grid;
  grid-template-columns:minmax(320px, 1fr) minmax(380px, .95fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
  padding-top:clamp(48px, 6vw, 82px);
  padding-bottom:clamp(56px, 7vw, 92px);
}

.pb-main .pb-fk2-section{
  padding-top:clamp(54px, 7vw, 86px);
  padding-bottom:clamp(58px, 7.5vw, 94px);
}
.pb-main .pb-fk2-section.pb-fk2-soft{background:#f6eee7}

.pb-main .pb-fk2-wrap{
  display:block;
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
}

.pb-main .pb-fk2-eyebrow{
  display:block;
  margin:0 0 15px;
  color:var(--accent, #cf7b53);
  font-family:Manrope, system-ui, sans-serif;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}
/* .light staat op de donkere kaart en het donkere afsluitblok. */
.pb-main .pb-fk2-eyebrow.light{color:rgba(255, 255, 255, .72)}

.pb-main .pb-fk2-hero h1,
.pb-main .pb-fk2-section h2{
  margin:0;
  color:var(--brown, #75543f);
  font-family:Fraunces, Georgia, serif;
  font-weight:700;
  letter-spacing:-.035em;
}
.pb-main .pb-fk2-hero h1{line-height:1;max-width:640px}
.pb-main .pb-fk2-section h2{font-size:clamp(29px, 3.5vw, 42px);line-height:1.06}

.pb-main .pb-fk2-heading{max-width:720px;margin-bottom:32px}
.pb-main .pb-fk2-lead,
.pb-main .pb-fk2-intro,
.pb-main .pb-fk2-heading > p{
  max-width:600px;
  margin:18px 0 0;
  color:var(--muted, #88786e);
  font-size:16px;
  line-height:1.75;
}

.pb-main .pb-fk2-hero-copy{min-width:0}

.pb-main .pb-fk2-hero-photo{
  aspect-ratio:4 / 3;
  border-radius:16px;
  background-color:#ece0d6;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:var(--shadow2);
}

/* ---- Knoppen ------------------------------------------------------------ */

.pb-main .pb-fk2-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

.pb-main .pb-fk2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* 46px is de ondergrens waarbij mistikken op een telefoon zeldzaam wordt. */
  min-height:46px;
  padding:0 20px;
  border-radius:var(--btn-radius, 10px);
  font-family:Manrope, system-ui, sans-serif;
  font-size:13.5px;
  font-weight:850;
  line-height:1;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, color .18s ease;
}
.pb-main .pb-fk2-btn.primary{
  background:var(--accent, #cf7b53);
  color:#fff;
  border:0;
  box-shadow:0 8px 16px rgba(111, 72, 49, .18);
}
/* Tweede knop rustiger; anders vragen ze allebei even hard om aandacht. */
.pb-main .pb-fk2-btn.ghost{
  background:transparent;
  color:var(--brown, #75543f);
  border:1px solid var(--line, #dfcfc1);
}
.pb-main .pb-fk2-btn.ghost:hover{border-color:var(--accent, #cf7b53);color:var(--accent, #cf7b53)}
/* .light en .outline staan op het donkere afsluitblok. */
.pb-main .pb-fk2-btn.light{background:#fff;color:var(--brown, #75543f);border:0}
.pb-main .pb-fk2-btn.outline{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255, 255, 255, .35);
}
.pb-main .pb-fk2-btn.outline:hover{border-color:#fff}
.pb-main .pb-fk2-btn:hover{transform:translateY(-1px)}

/* ---- Wat Patty kan betekenen (vier genummerde vlakken) ------------------ */

.pb-main .pb-fk2-values{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

/* Het kader en het oranje bolletje staan in pb-stappen.css - hier stond
   "01"…"04" als los oranje tekstje en op de stappen wél een bolletje. */

.pb-main .pb-fk2-value p,
.pb-main .pb-fk2-step p{
  margin:10px 0 0;
  color:var(--muted, #88786e);
  font-size:13.5px;
  line-height:1.7;
}

/* ---- Dekbegeleiding: tekst naast een donkere kaart --------------------- */

.pb-main .pb-fk2-split{
  display:grid;
  grid-template-columns:minmax(320px, 1.1fr) minmax(300px, .9fr);
  gap:clamp(28px, 4.5vw, 60px);
  align-items:start;
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
}

.pb-main .pb-fk2-dek-copy{min-width:0}
.pb-main .pb-fk2-dek-copy > p{
  max-width:56ch;
  margin:16px 0 0;
  color:var(--muted, #88786e);
  font-size:15.5px;
  line-height:1.75;
}

.pb-main .pb-fk2-checks{display:grid;gap:11px;margin-top:22px}
.pb-main .pb-fk2-checks p{
  position:relative;
  margin:0;
  padding-left:30px;
  color:var(--brown, #75543f);
  font-size:14.5px;
  line-height:1.6;
}
/* Vinkje als masker, zodat het de accentkleur volgt en scherp blijft. */
.pb-main .pb-fk2-checks p::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:19px;
  height:19px;
  border-radius:999px;
  background:var(--accent, #cf7b53);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat,
              linear-gradient(#000, #000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat,
       linear-gradient(#000, #000);
  mask-composite:exclude;
}

.pb-main .pb-fk2-dek-card{
  padding:clamp(24px, 3vw, 34px);
  border-radius:16px;
  background:var(--brown, #75543f);
  color:#fff;
}
.pb-main .pb-fk2-dek-card h3{
  margin:0;
  color:#fff;
  font-family:Fraunces, Georgia, serif;
  font-size:24px;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.02em;
}
.pb-main .pb-fk2-dek-card > p{
  margin:12px 0 0;
  color:rgba(255, 255, 255, .8);
  font-size:14.5px;
  line-height:1.7;
}

/* Kleine opsomming als losse regels met een scheidingslijn ertussen. */
.pb-main .pb-fk2-mini{margin-top:20px;border-top:1px solid rgba(255, 255, 255, .18)}
.pb-main .pb-fk2-mini p{
  margin:0;
  padding:11px 0;
  border-bottom:1px solid rgba(255, 255, 255, .18);
  color:rgba(255, 255, 255, .9);
  font-size:13.5px;
  font-weight:700;
  line-height:1.4;
}

/* ---- Pups voor fokkers ------------------------------------------------- */

.pb-main .pb-fk2-pups-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}
.pb-main .pb-fk2-pups-head .pb-fk2-heading{margin-bottom:0}

.pb-main .pb-fk2-textlink{
  flex:0 0 auto;
  color:var(--brown, #75543f);
  font-family:Manrope, system-ui, sans-serif;
  font-size:13px;
  font-weight:850;
  text-decoration:none;
  border-bottom:2px solid var(--accent, #cf7b53);
  padding-bottom:2px;
  white-space:nowrap;
}
.pb-main .pb-fk2-textlink:hover{color:var(--accent, #cf7b53)}

/* auto-FILL, niet auto-fit. auto-fit vouwt lege kolommen dicht, dus bij twee
   pups rekten die twee kaarten uit tot 562px per stuk - twee enorme vlakken
   naast elkaar. Met auto-fill blijven de kolommen staan en houdt een kaart
   dezelfde maat als op elke andere pagina, ook als er maar twee zijn. */
.pb-main .pb-fk2-pup-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
  margin-top:30px;
  align-items:stretch;
}

/* Deze pups worden alleen aan fokkers aangeboden; dat mag je zien. Een donkere
   kaart tussen de lichte pagina leest als "dit is iets aparts" zonder dat er
   een woord bij hoeft.

   Bruin en niet bijna-zwart: op de detailpagina van zo'n special staat
   dezelfde hond in een bruin paneel (.special-profile in pb-specials.css).
   Overzicht en detail horen dezelfde kaart te zijn, dus zijn de waarden
   daarvan overgenomen: var(--brown), var(--r-lg) en var(--shadow). */
.pb-main .pb-fk2-pup{
  position:relative;          /* anker voor de badge */
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border:0;
  border-radius:var(--r-lg);
  background:var(--brown);
  color:#fff;
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease;
}

.pb-main .pb-fk2-pup-image{
  display:block;
  width:100%;
  /* Was height:250px. De aangeleverde foto's lopen van 481x361 (liggend) tot
     359x633 (staand); een vaste hoogte met `cover` sneed die staande foto's
     bijna helemaal weg. Een staande verhouding werkt voor beide, en
     `object-position:top` houdt de kop in beeld — bij honden is dat waar je
     naar kijkt. */
  aspect-ratio:4 / 5;
  height:auto;
  object-fit:cover;
  object-position:center top;
}

/* Het label was accentoranje - dezelfde pil als "Patty tip" op een
   producttegel. Perzik op het donker maakt er een onderscheidend label van
   in plaats van een gewoon labeltje. */
.pb-main .pb-fk2-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  padding:6px 12px;
  border-radius:999px;
  background:var(--accent, #c97a55);
  color:#fff;
  font-family:Manrope, system-ui, sans-serif;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 4px 12px rgba(38, 27, 20, .22);
}

.pb-main .pb-fk2-pup-copy{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:18px 20px 20px;
}
.pb-main .pb-fk2-pup-copy h3{
  margin:0;
  color:#fff;
  font-family:Fraunces, Georgia, serif;
  font-size:22px;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
}
.pb-main .pb-fk2-pup-copy p{
  margin:8px 0 0;
  color:#f4e6dc;
  font-size:13.5px;
  line-height:1.65;
}
/* Deze pups hebben (nog) geen beschrijving; een lege alinea liet een gat vallen. */
.pb-main .pb-fk2-pup-copy p:empty{display:none}

.pb-main .pb-fk2-cardlink{
  margin-top:auto;
  padding-top:14px;
  color:#f1c7aa;
  font-family:Manrope, system-ui, sans-serif;
  font-size:12.5px;
  font-weight:850;
}

@media (hover:hover){
  .pb-main .pb-fk2-pup:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 44px rgba(38, 27, 20, .26);
  }
  .pb-main .pb-fk2-pup:hover .pb-fk2-cardlink{color:#fff}
}

/* ---- Zo werkt samenwerken --------------------------------------------- */

.pb-main .pb-fk2-steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.pb-main .pb-fk2-step{
  padding:24px;
  border:1px solid var(--line, #dfcfc1);
  border-radius:16px;
  background:var(--paper, #fffaf5);
}

.pb-main .pb-fk2-step h3{margin-top:22px}

/* ---- Afsluitend blok --------------------------------------------------- */

.pb-main .pb-fk2-cta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(24px, 4vw, 56px);
  align-items:center;
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
  padding:clamp(28px, 4vw, 46px);
  border-radius:16px;
  background:var(--brown, #75543f);
  color:#fff;
}
.pb-main .pb-fk2-cta h2{color:#fff}
.pb-main .pb-fk2-cta-copy > p{
  max-width:52ch;
  margin:14px 0 0;
  color:rgba(255, 255, 255, .8);
  font-size:15px;
  line-height:1.7;
}
.pb-main .pb-fk2-cta .pb-fk2-buttons{margin-top:0}

/* ---- Schermbreedtes --------------------------------------------------- */

@media (max-width:1024px){
  .pb-main .pb-fk2-hero{grid-template-columns:1fr;gap:32px}
  .pb-main .pb-fk2-values{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pb-main .pb-fk2-split{grid-template-columns:1fr;gap:28px}
  .pb-main .pb-fk2-steps{grid-template-columns:1fr}
  .pb-main .pb-fk2-cta{grid-template-columns:1fr}
}

@media (max-width:767px){
  .pb-main .pb-fk2-section h2{font-size:clamp(25px, 7.2vw, 33px)}
  .pb-main .pb-fk2-values{grid-template-columns:1fr}
  .pb-main .pb-fk2-value,
  .pb-main .pb-fk2-step{padding:20px}
  .pb-main .pb-fk2-hero-photo{aspect-ratio:16 / 11;border-radius:16px}
  .pb-main .pb-fk2-pup-image{aspect-ratio:4 / 5}
  .pb-main .pb-fk2-pups-head{flex-direction:column;align-items:flex-start}
  /* Twee knoppen naast elkaar zijn op een telefoon allebei te smal. */
  .pb-main .pb-fk2-buttons{flex-direction:column}
  .pb-main .pb-fk2-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .pb-main .pb-fk2-btn,
  .pb-main .pb-fk2-pup{transition:none}
}

/* ==========================================================================
   MOBIEL - pupkaarten twee naast elkaar
   --------------------------------------------------------------------------
   Volle breedte gaf een kaart van 354x540 met een foto van 443px hoog: één
   pup vult dan het hele scherm en je ziet niet dat er meer staan. Twee naast
   elkaar is dezelfde maat als de producttegels op een categoriepagina.
   ========================================================================== */

@media (max-width:767px){
  .pb-main .pb-fk2-pup-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .pb-main .pb-fk2-pup-copy{padding:12px 12px 14px}
  .pb-main .pb-fk2-pup-copy h3{font-size:17px}
  .pb-main .pb-fk2-pup-copy p{font-size:12.5px;line-height:1.55}
  .pb-main .pb-fk2-cardlink{padding-top:10px;font-size:11.5px}
  .pb-main .pb-fk2-badge{top:10px;left:10px;padding:5px 9px;font-size:9.5px}
}

/* ==========================================================================
   Formulier voor fokkers  ([pb_fokker_formulier])
   --------------------------------------------------------------------------
   Staat in de stylesheet van deze pagina en niet in een eigen bestand: het
   formulier hoort bij dit verhaal en wordt nergens anders gebruikt. De maten en
   kleuren volgen .pb-fk2-* hierboven, zodat het geen vreemd element wordt.
   ========================================================================== */

.pb-main .pb-fk-formulier{
  max-width: 760px;
}

.pb-main .pb-fk-rij{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.pb-main .pb-fk-veld{
  margin-bottom: 16px;
}

.pb-main .pb-fk-veld label{
  display: block;
  margin-bottom: 6px;
  font: 800 11px/1.2 Manrope, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #7d6d63);
}

.pb-main .pb-fk-veld input,
.pb-main .pb-fk-veld select,
.pb-main .pb-fk-veld textarea{
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--line, #e1d1c4);
  border-radius: var(--r-md, 10px);
  background: #fff;
  /* 16px voorkomt dat iOS inzoomt zodra je een veld aantikt. */
  font: 500 16px/1.4 Manrope, system-ui, sans-serif;
  color: var(--dark, #29211c);
}

.pb-main .pb-fk-veld textarea{
  min-height: 110px;
  resize: vertical;
}

.pb-main .pb-fk-veld input:focus,
.pb-main .pb-fk-veld select:focus,
.pb-main .pb-fk-veld textarea:focus{
  border-color: var(--accent, #c97a55);
  box-shadow: 0 0 0 3px rgba(201, 122, 85, .22);
  outline: 0;
}

.pb-main .pb-fk-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 4px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-md, 10px);
  /* Niet var(--button): die is op deze site door Bricks een lengte in plaats
     van een kleur, waardoor de declaratie stil wegvalt. Zie de projectnotitie
     bij de afrekenknop. */
  background: var(--accent, #c97a55);
  color: #fff;
  font: 800 15px/1 Manrope, system-ui, sans-serif;
  cursor: pointer;
}
.pb-main .pb-fk-btn:hover{background: #b96a47}

.pb-main .pb-fk-klein{
  margin: 12px 0 0;
  font: 500 13px/1.5 Manrope, system-ui, sans-serif;
  color: var(--muted, #7d6d63);
}

/* De honeypot. visibility:hidden en niet display:none, zodat een bot hem in de
   DOM vindt maar een mens hem niet ziet; hij staat al buiten de tabvolgorde. */
.pb-main .pb-fk-hp{
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

/* Meldingen na het verzenden. */
.pb-main .pb-fk-melding{
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-lg, 14px);
  font: 700 15px/1.5 Manrope, system-ui, sans-serif;
}
.pb-main .pb-fk-melding.is-goed{
  border-color: rgba(102, 115, 91, .38);
  background: #eef1e9;
  color: #46523c;
}
.pb-main .pb-fk-melding.is-fout{
  border-color: rgba(201, 122, 85, .45);
  background: #fdf0e9;
  color: #8a4a2c;
}

@media (max-width: 600px){
  .pb-main .pb-fk-rij{grid-template-columns: minmax(0, 1fr)}
  .pb-main .pb-fk-btn{width: 100%}
}

/* --------------------------------------------------------------------------
   Hetzelfde formulier op het BRUINE CTA-blok
   --------------------------------------------------------------------------
   De shortcode staat in .pb-fk2-cta, en dat blok is bruin (#6c4d38) met witte
   tekst. De labels en de kleine regel eronder stonden daar op var(--muted)
   (#7d6d63): bruingrijs op bruin, dus vrijwel onleesbaar — nagemeten, dat is
   het verschil tussen rgb(125,109,99) en rgb(108,77,56).

   Dus geen aparte klasse die iemand moet onthouden, maar een variant op de
   plek waar het blok al aan te herkennen is. Zet je de shortcode later in een
   lichte sectie, dan geldt de opmaak hierboven weer en hoeft er niets om.

   Dezelfde aanpak als het donkere formulierblok op /aanmelden/ (zie
   styles/pb-aanmelden.css): lichte labels, witte velden zonder zichtbare rand,
   accentkleur bij focus.
   -------------------------------------------------------------------------- */

/* .pb-fk2-cta is een grid van `1fr auto`: tekst links, knoppen rechts. Een
   formulier in die tweede kolom krijgt daarmee alleen de breedte die het
   toevallig nodig heeft, en dat is op een breed scherm een smalle strook naast
   een lap tekst. Houdt de cel een formulier vast, dan mag hij de hele breedte
   nemen en komt het formulier onder de tekst te staan.

   `:has()` doet het werk: er is geen aparte class op het blok als er een
   formulier in zit, en de shortcode kan overal staan. Browsers zonder :has()
   (Firefox voor 121) laten de oude, smallere kolom staan - onhandig, niet stuk. */
.pb-main .pb-fk2-cta:has(.pb-fk-formulier){
  /* Boven uitlijnen: met een formulier ernaast is verticaal centreren zinloos
     en duwt het de tekst naar het midden van een hoge kolom. */
  align-items: start;
}

.pb-main .pb-fk2-cta .pb-fk2-buttons:has(.pb-fk-formulier){
  grid-column: 1 / -1;
}

.pb-main .pb-fk2-cta .pb-fk-formulier{
  /* Het staat in .pb-fk2-buttons, en dat is een flex-rij voor twee knoppen.
     Zonder dit wordt het formulier zo breed als zijn inhoud toevallig uitkomt. */
  width: 100%;
  max-width: 620px;
}

.pb-main .pb-fk2-cta .pb-fk-veld label{
  color: #e7d9cd;
}

/* Het sterretje bij een verplicht veld mag opvallen zonder hard te worden. */
.pb-main .pb-fk2-cta .pb-fk-veld label span{
  color: #f0b49a;
}

.pb-main .pb-fk2-cta .pb-fk-veld input,
.pb-main .pb-fk2-cta .pb-fk-veld select,
.pb-main .pb-fk2-cta .pb-fk-veld textarea{
  /* Een rand van var(--line) op bruin leest als een streep om het veld heen.
     Wit op bruin bakent zichzelf al af. */
  border-color: transparent;
}

.pb-main .pb-fk2-cta .pb-fk-veld input::placeholder,
.pb-main .pb-fk2-cta .pb-fk-veld textarea::placeholder{
  color: #9a8778;
}

.pb-main .pb-fk2-cta .pb-fk-klein{
  color: rgba(255, 255, 255, .72);
}

/* De knop is al de accentkleur en staat daarmee goed op bruin; alleen de
   schaduw eronder heeft op een donkere ondergrond meer nodig om los te komen. */
.pb-main .pb-fk2-cta .pb-fk-btn{
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}