.pp-wrap { max-width: 720px; margin: 0 auto; padding: 18px 16px 40px; }

/* ---- Koppen ---------------------------------------------------------------- */
.pp-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--accent); margin: 0 0 6px; }
.pp-h1 { font-family: Fraunces, serif; font-weight: 700; font-size: 30px;
  line-height: 1.1; color: var(--brown); margin: 0 0 10px; }
.pp-h2 { font-family: Fraunces, serif; font-weight: 700; font-size: 22px;
  color: var(--brown); margin: 0 0 4px; }
.pp-lead { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.pp-topbar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; }

/* ---- Kaart / sectieblok --------------------------------------------------- */
.pp-card { background: var(--paper, #fff); border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px); padding: 18px; box-shadow: var(--shadow2, 0 8px 24px rgba(77,51,34,.06)); }
.pp-section { background: var(--paper, #fff); border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px); padding: 18px; margin-bottom: 16px; }
.pp-section + .pp-section { margin-top: 0; }
.pp-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pp-section-head .pp-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cream2, #f3e7dc); color: var(--brown); }
.pp-section-head .pp-ico svg { width: 20px; height: 20px; }

/* ---- Login (code-invoer) -------------------------------------------------- */
.pp-login { min-height: 50vh; display: grid; place-items: center; padding: 24px 0; }
.pp-login .pp-card { width: 100%; max-width: 420px; text-align: center; }
.pp-login .pp-h1 { font-size: 26px; }
.pp-codewrap { margin: 16px 0 6px; }
.pp-code { width: 100%; text-align: center; font-family: Fraunces, serif; font-weight: 700;
  font-size: 24px; letter-spacing: .18em; text-transform: uppercase; color: var(--brown);
  padding: 14px 12px; border: 1.5px solid var(--line); border-radius: var(--r-md, 10px);
  background: var(--cream, #fbf6f1); }
.pp-code:focus { outline: none; border-color: var(--accent); }
.pp-login .pp-btn { width: 100%; justify-content: center; margin-top: 12px; }
.pp-login-sub { margin-top: 14px; font-size: 13px; color: var(--muted); }
.pp-login-sub a { color: var(--accent); font-weight: 700; }

/* ---- Zoekbalk (Patty-weergave) ------------------------------------------- */
.pp-search { display: flex; align-items: center; gap: 8px; margin: 0 0 18px;
  background: var(--paper, #fff); border: 1px solid var(--line); border-radius: var(--r-pill, 999px);
  padding: 6px 6px 6px 14px; }
.pp-search svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.pp-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit;
  color: var(--brown); padding: 8px 0; }
.pp-search input:focus { outline: none; }
.pp-search .pp-btn { flex: 0 0 auto; }

/* ---- Hondenoverzicht ------------------------------------------------------ */
.pp-dogs { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pp-dog { display: flex; gap: 14px; align-items: center; text-decoration: none;
  background: var(--paper, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 14px);
  padding: 12px; transition: box-shadow .2s ease, transform .2s ease; }
.pp-dog:hover { box-shadow: 0 12px 28px rgba(77,51,34,.12); transform: translateY(-2px); }
.pp-dog-thumb { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 12px; object-fit: cover;
  background: #e7c0a6; }
.pp-dog-body { flex: 1 1 auto; min-width: 0; }
.pp-dog-name { font-family: Fraunces, serif; font-weight: 700; font-size: 19px; color: var(--brown); margin: 0; }
.pp-dog-meta { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.pp-dog-arrow { color: var(--accent); flex: 0 0 auto; }
.pp-dog-arrow svg { width: 22px; height: 22px; }

/* ---- Badges / chips ------------------------------------------------------- */
.pp-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brown); background: var(--cream2, #f3e7dc);
  border-radius: var(--r-pill, 999px); padding: 3px 9px; }
.pp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  border-radius: var(--r-pill, 999px); padding: 4px 10px; background: #e9f3ea; color: #2f7a44; }
.pp-badge.warn { background: #fbece2; color: #b25a2c; }
.pp-chip { display: inline-block; font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--cream, #fbf6f1); border: 1px dashed var(--line); border-radius: var(--r-pill, 999px);
  padding: 3px 10px; }
.pp-chip.set { color: var(--brown); border-style: solid; border-color: #d8c4b2; background: #fff; }

/* ---- Hub: donkerbruin overzicht per hond + actie-knoppen ------------------ */
.pp-hub { background: #7b5842; color: #fff; border-radius: var(--r-lg, 14px);
  padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow2, 0 8px 24px rgba(77,51,34,.10)); }
.pp-hub-hero { display: grid; grid-template-columns: 1fr 96px; gap: 14px; align-items: center; }
.pp-hub-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: #e7c9b4; margin: 0 0 4px; }
.pp-hub-name { font-family: Fraunces, serif; font-weight: 700; font-size: 28px; line-height: 1.05;
  color: #fff; margin: 0; }
.pp-hub-sub { color: #f3e3d8; font-size: 14px; margin: 4px 0 0; }
.pp-hub-img { width: 96px; height: 116px; object-fit: cover; border-radius: var(--r-md, 10px);
  background: #e7c0a6; }
.pp-hub-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md, 10px); overflow: hidden; }
.pp-hub-meta > div { background: #7b5842; padding: 11px 12px; }
.pp-hub-meta small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: #e7c9b4; margin-bottom: 3px; }
.pp-hub-meta strong { display: block; font-size: 14px; color: #fff; font-weight: 700; }
.pp-hub-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pp-hub-action { display: flex; flex-direction: column; gap: 4px; justify-content: center;
  background: #fffaf5; color: var(--brown); border: 0; border-radius: var(--r-md, 10px);
  min-height: 84px; padding: 12px 14px; cursor: pointer; font: inherit; text-align: left; }
.pp-hub-action:hover { background: #fff; }
.pp-hub-action svg { width: 22px; height: 22px; color: var(--accent); }
.pp-hub-action strong { font-size: 14px; font-weight: 800; color: var(--brown); }
.pp-hub-action span { font-size: 11px; color: var(--muted); }
.pp-hub-action.wide { grid-column: 1 / -1; }

/* ---- Views (hub ↔ formulier) --------------------------------------------- */
.pp-view { display: none; }
.pp-view.active { display: block; }
.pp-back { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  font-weight: 800; color: var(--brown); background: transparent; border: 1.5px solid var(--line);
  border-radius: var(--r-pill, 999px); padding: 9px 16px; margin-bottom: 16px; }
.pp-back:hover { background: var(--cream, #fbf6f1); }
.pp-back svg { width: 16px; height: 16px; }

/* ---- Formulier ------------------------------------------------------------ */
.pp-form { display: block; }
.pp-field { display: block; margin-bottom: 14px; }
.pp-field > span { display: block; font-size: 13px; font-weight: 700; color: var(--brown); margin-bottom: 6px; }
.pp-req { color: var(--accent); }
.pp-input, .pp-textarea, .pp-select, .pp-file {
  width: 100%; font: inherit; color: var(--dark, #3a2c22); background: var(--cream, #fbf6f1);
  border: 1.5px solid var(--line); border-radius: var(--r-md, 10px); padding: 11px 12px; }
.pp-textarea { min-height: 90px; resize: vertical; }
.pp-input:focus, .pp-textarea:focus, .pp-select:focus { outline: none; border-color: var(--accent); background: #fff; }
.pp-input[readonly] { background: #f1ebe4; color: var(--muted); }
.pp-file { padding: 9px 12px; background: #fff; }
.pp-invalid { border-color: #d6562f !important; background: #fdf0eb !important; }
.pp-hint { font-size: 12px; color: var(--muted); margin: 5px 0 0; }
.pp-row { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.pp-unit { position: relative; }
.pp-unit .pp-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 700; font-size: 13px; pointer-events: none; }

/* radio/ja-nee */
.pp-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-choice label { flex: 1 1 auto; text-align: center; border: 1.5px solid var(--line);
  border-radius: var(--r-md, 10px); padding: 10px; font-weight: 700; color: var(--brown);
  background: var(--cream, #fbf6f1); cursor: pointer; }
.pp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pp-choice input:checked + span { display: block; }
.pp-choice label:has(input:checked) { border-color: var(--accent); background: #fff;
  box-shadow: inset 0 0 0 1px var(--accent); }

/* conditioneel veld */
.pp-cond { display: none; }
.pp-cond.show { display: block; }

/* ---- Knoppen -------------------------------------------------------------- */
.pp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pp-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-weight: 800; color: #fff; background: var(--accent); border: 0;
  border-radius: var(--r-pill, 999px); padding: 12px 18px; text-decoration: none; }
.pp-btn:hover { background: #b96a47; }
.pp-btn svg { width: 16px; height: 16px; }
.pp-btn.ghost { background: transparent; color: var(--brown); border: 1.5px solid var(--line); }
.pp-btn.ghost:hover { background: var(--cream, #fbf6f1); }
.pp-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--accent); }

/* ---- Controleren / akkoord / succes --------------------------------------- */
.pp-review[hidden], .pp-success[hidden], .pp-form[hidden] { display: none; }
.pp-review { border: 1px solid var(--line); border-radius: var(--r-lg, 14px);
  background: var(--cream, #fbf6f1); padding: 16px; }
.pp-review h3 { font-family: Fraunces, serif; color: var(--brown); margin: 0 0 12px; font-size: 18px; }
.pp-review-list { display: grid; gap: 0; margin-bottom: 14px; }
.pp-review-row { display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pp-review-row:last-child { border-bottom: 0; }
.pp-review-row span { color: var(--muted); }
.pp-review-row b { color: var(--brown); text-align: right; }
.pp-akkoord { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 14px;
  font-size: 14px; color: var(--brown); }
.pp-akkoord input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--accent); }
.pp-success { border: 1px solid #cfe6d3; background: #eff7f0; border-radius: var(--r-lg, 14px);
  padding: 22px; text-align: center; }
.pp-success .pp-check { width: 48px; height: 48px; border-radius: 50%; background: #2f7a44;
  color: #fff; display: grid; place-items: center; margin: 0 auto 12px; }
.pp-success .pp-check svg { width: 26px; height: 26px; }
.pp-success h3 { font-family: Fraunces, serif; color: var(--brown); margin: 0 0 6px; }
.pp-success p { color: var(--muted); margin: 0; font-size: 14px; }
.pp-note { font-size: 13px; color: var(--muted); background: var(--cream2, #f3e7dc);
  border-radius: var(--r-md, 10px); padding: 10px 12px; margin: 0 0 14px; }
.pp-note b { color: var(--brown); }

/* ---- Historie + gewichtsgrafiek ------------------------------------------- */
.pp-hist { display: grid; gap: 0; }
.pp-hist-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pp-hist-row:last-child { border-bottom: 0; }
.pp-hist-date { color: var(--muted); font-weight: 700; white-space: nowrap; }
.pp-hist-main { color: var(--brown); }
.pp-hist-val { font-weight: 800; color: var(--brown); white-space: nowrap; }
.pp-graph { width: 100%; height: 150px; margin: 4px 0 14px; }
.pp-graph .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.pp-graph .dot { fill: var(--accent); }
.pp-graph .grid { stroke: var(--line); stroke-width: 1; }
.pp-graph .lbl { fill: var(--muted); font-size: 10px; font-family: Manrope, sans-serif; }

/* ---- Dekking-tijdlijn ----------------------------------------------------- */
.pp-timeline { position: relative; margin: 0; padding: 0 0 0 26px; }
.pp-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line); }
.pp-phase { position: relative; margin-bottom: 16px; }
.pp-phase::before { content: ""; position: absolute; left: -26px; top: 4px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.pp-phase.done::before { background: var(--accent); border-color: var(--accent); }
.pp-phase.active::before { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201,122,85,.18); }
.pp-phase-card { background: var(--paper,#fff); border: 1px solid var(--line);
  border-radius: var(--r-md, 12px); padding: 14px; }
.pp-phase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pp-phase-title { font-weight: 800; color: var(--brown); font-size: 15px; margin: 0; }
.pp-phase-body { margin-top: 10px; }
.pp-phase .pp-field { margin-bottom: 10px; }

/* progesteron-metingen */
.pp-meas { width: 100%; border-collapse: collapse; margin: 4px 0 6px; font-size: 14px; }
.pp-meas th, .pp-meas td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.pp-meas th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pp-meas td.val { font-weight: 800; color: var(--brown); }

/* historie van eerdere cycli (accordion) */
.pp-cycle { border: 1px solid var(--line); border-radius: var(--r-md, 12px); margin-bottom: 10px; overflow: hidden; }
.pp-cycle-head { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: var(--cream, #fbf6f1); border: 0; cursor: pointer; padding: 13px 14px;
  font: inherit; font-weight: 700; color: var(--brown); text-align: left; }
.pp-cycle-head .chev { transition: transform .2s ease; color: var(--muted); }
.pp-cycle.open .pp-cycle-head .chev { transform: rotate(90deg); }
.pp-cycle-body { display: none; padding: 14px; border-top: 1px solid var(--line); }
.pp-cycle.open .pp-cycle-body { display: block; }

.pp-img-prev { display: block; width: 100%; max-height: 220px; object-fit: cover;
  border-radius: var(--r-md, 10px); border: 1px solid var(--line); margin: 4px 0 0; }

/* ==========================================================================
   Desktop-laag
   ========================================================================== */
@media (min-width: 768px) {
  .pp-wrap { max-width: 960px; padding: 28px 24px 56px; }
  /* Overzicht/Patty-weergave volgt de site-breedte (zoals de homepage). */
  .pp-wrap.pp-wide { max-width: 1240px; }
  .pp-h1 { font-size: 38px; }
  .pp-dogs { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .pp-row { grid-template-columns: 1fr 1fr; }
  .pp-row.three { grid-template-columns: 1fr 1fr 1fr; }
  .pp-login { min-height: 60vh; }
  .pp-login .pp-card { padding: 30px; }
  .pp-hub { padding: 24px; }
  .pp-hub-hero { grid-template-columns: 1fr 124px; }
  .pp-hub-img { width: 124px; height: 150px; }
  .pp-hub-name { font-size: 34px; }
  .pp-hub-meta { grid-template-columns: repeat(4, 1fr); }
  .pp-hub-actions { grid-template-columns: repeat(3, 1fr); }
  .pp-hub-action.wide { grid-column: auto; }
}

@media (min-width: 1025px) {
  .pp-wrap { max-width: 1040px; }
  .pp-wrap.pp-wide { max-width: 1240px; }
  .pp-dogs { grid-template-columns: repeat(3, 1fr); }
  .pp-wrap.pp-wide .pp-dogs { grid-template-columns: repeat(4, 1fr); }
  .pp-h1 { font-size: 42px; }
}

.pp-wrap, .pp-wrap * { box-sizing: border-box; }
.pp-wrap [class*="brxe-"] { display: block; }            /* neutraliseer Bricks flex-defaults */
.pp-wrap a { text-decoration: none; color: inherit; }
.pp-wrap img { display: block; max-width: 100%; }
.pp-wrap button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }

/* Container — width:100% zodat hij niet krimpt als flex-child van de sectie */
.pp-wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 22px 16px 48px; }

/* ---- Hero-header ---------------------------------------------------------- */
.pp-wrap .pp-hero { position: relative; overflow: hidden; border-radius: 16px;
  color: #fff; margin-bottom: 26px;
   }
.pp-wrap .pp-hero::after { content: ""; position: absolute; right: -80px; top: -90px; width: 260px;
  height: 260px; border-radius: 50%;
  pointer-events: none; }
/* Kop links, Uitloggen RECHTS */
.pp-wrap .pp-hero-top { position: relative; z-index: 1; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pp-wrap .pp-hero-head { min-width: 0; }
.pp-wrap .pp-hero-top .pp-btn.ghost { flex: 0 0 auto; margin-left: auto; align-self: flex-start; }
.pp-wrap .pp-hero .pp-search { position: relative; z-index: 1; }

.pp-wrap .pp-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: #eac9b2; margin: 0 0 9px; }

.pp-wrap .pp-h1 { font-family: Fraunces, serif; font-weight: 700; font-size: 31px; line-height: 1.02;
  letter-spacing: -.02em; color: var(--brown); margin: 0; }

/* ---- Zoekbalk — witte pill op de hero ------------------------------------ */
.pp-wrap .pp-search { display: flex; align-items: center; gap: 10px; margin: 0; background: #fff;
  border: 1px solid var(--brown); border-radius: var(--r-pill); padding: 6px 6px 6px 18px;
  transition: box-shadow .18s ease; }
.pp-wrap .pp-search svg { width: 19px; height: 19px; color: var(--muted); flex: 0 0 auto; }
.pp-wrap .pp-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit;
  font-weight: 500; color: var(--brown); padding: 11px 0; }
.pp-wrap .pp-search input::placeholder { color: var(--muted); }
.pp-wrap .pp-search input:focus { outline: none; }
.pp-wrap .pp-search .pp-btn { flex: 0 0 auto; padding: 11px 20px; }

/* ---- Knoppen (Uitloggen ghost + Zoeken) ----------------------------------- */
.pp-wrap .pp-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  font-weight: 800; color: #fff; background: var(--accent); border: 0; border-radius: var(--r-pill);
  padding: 12px 18px; text-decoration: none; box-shadow: 0 8px 16px rgba(111, 72, 49, .18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.pp-wrap .pp-btn:hover { background: #b96a47; transform: translateY(-1px); box-shadow: 0 10px 20px rgba(111, 72, 49, .24); }
.pp-wrap .pp-btn svg { width: 16px; height: 16px; }
/* Uitloggen zit op de donkere hero → lichte glas-variant */
.pp-wrap .pp-hero .pp-btn.ghost { background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .38); box-shadow: none; }
.pp-wrap .pp-hero .pp-btn.ghost:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .65);
  transform: translateY(-1px); }
.pp-wrap .pp-btn.ghost { background: #fff; color: var(--brown); border: 1px solid var(--line); box-shadow: none; }
.pp-wrap .pp-btn.ghost:hover { background: var(--cream); border-color: #d8c4b2; transform: translateY(-1px); }
.pp-wrap .pp-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--accent); box-shadow: none; transform: none; }

/* ---- Hondenoverzicht — VASTE kolommen (breedte los van resultaataantal) --- */
.pp-wrap .pp-dogs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; }

/* Beeldvullende kaart. Kaart = <div> (GEEN <a>): de klik zit op de naam-link
   die via ::after de hele kaart overdekt. Zo GEEN geneste <a> met de rol-term
   ({post_terms_rol} → <a> naar /rol/..) die de kaart anders opsplitste. */
.pp-wrap .pp-dog { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 12px;
  overflow: hidden; background: #e7c0a6; box-shadow: 0 10px 24px rgba(77, 51, 34, .14);
  transition: transform .25s ease, box-shadow .25s ease; }
.pp-wrap .pp-dog:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(77, 51, 34, .22); }

.pp-wrap .pp-dog-media { position: absolute; inset: 0; }
.pp-wrap .pp-dog-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.pp-wrap .pp-dog:hover .pp-dog-thumb { transform: scale(1.06); }
.pp-wrap .pp-dog-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(38, 27, 20, 0) 38%, rgba(38, 27, 20, .32) 62%, rgba(38, 27, 20, .82)); }

/* Onderin overlay: rol-badge + naam + gewicht */
.pp-wrap .pp-dog-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 14px 15px; }

/* Rol als badge (à la .dog-tag). {post_terms_rol} rendert een <a> → plat + niet klikbaar. */
.pp-wrap .pp-dog-meta { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 10px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.15;
  box-shadow: 0 6px 14px rgba(38, 27, 20, .22); }
.pp-wrap .pp-dog-meta a { color: inherit; text-decoration: none; pointer-events: none; cursor: inherit; }
.pp-wrap .pp-dog-meta:empty { display: none; }

/* Naam = klikbare link over de hele kaart (::after) */
.pp-wrap .pp-dog-name { font-family: Fraunces, serif; font-weight: 700; font-size: 22px; line-height: 1;
  letter-spacing: -.02em; color: #fff; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.pp-wrap .pp-dog-name a { color: inherit; text-decoration: none; }
.pp-wrap .pp-dog-name a::after { content: ""; position: absolute; inset: 0; z-index: 3; }

/* Gewicht-chip — lichte glas-pill op de foto */
.pp-wrap .pp-chip { display: inline-block; font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-pill); padding: 3px 10px; backdrop-filter: blur(3px); }
.pp-wrap .pp-chip.set { color: #fff; }
.pp-wrap .pp-chip.set:empty { display: none; }   /* leeg gewicht → geen lege pill */

/* Geen-resultaten melding (client-side filter) — los onder het grid */
.pp-wrap .pp-empty { margin: 20px 2px 0; color: var(--muted); font-size: 15px; font-weight: 700; }
.pp-wrap .pp-empty[hidden] { display: none; }

/* ==========================================================================
   Desktop-laag
   ========================================================================== */
@media (min-width: 768px) {
  .pp-wrap { max-width: 960px; padding: 28px 24px 56px; }
  .pp-wrap.pp-wide { max-width: 1240px; }
	.pp-wrap .pp-hero { padding: 34px 0px; }
  .pp-wrap .pp-hero-top { margin-bottom: 24px; }
  .pp-wrap .pp-hero .pp-h1 { font-size: 40px; }
  .pp-wrap .pp-hero .pp-search { max-width: 640px; }
  .pp-wrap .pp-dogs { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pp-wrap .pp-dog-name { font-size: 24px; }
}
@media (min-width: 1025px) {
  .pp-wrap { max-width: 1040px; }
  .pp-wrap.pp-wide { max-width: 1240px; }
  .pp-wrap .pp-hero .pp-h1 { font-size: 46px; }
  .pp-wrap .pp-dogs { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* ==========================================================================
   /beschikbare-pups/ — [pb_beschikbare_pups]
   ==========================================================================
   De tegels zelf hebben hier GEEN eigen regels nodig: die komen uit de
   .pp-wrap-laag hierboven, dezelfde als op /verkochte-pups/. Wat hier staat is
   alleen de hero-tekst en het uitlegblok eronder.

   De eerdere .pb-bp-leeg-regels zijn vervallen: de "geen pups"-tekst staat nu
   in de hero (zelfde plek als de intro), zodat de pagina er in beide gevallen
   hetzelfde uitziet in plaats van in te klappen tot één losse alinea.
   ========================================================================== */

/* De eyebrow is in de .pp-wrap-laag lichtroze (#eac9b2) omdat hij daar op een
   donkere hero staat. Hier staat hij op wit en is dan vrijwel onleesbaar. */
.pp-wrap .pb-bp-hero .pp-eyebrow,
.pp-wrap .pb-bp-uitleg .pp-eyebrow { color: var(--accent); }

.pp-wrap .pb-bp-hero .pp-lead { max-width: 62ch; margin: 12px 0 0; }

.pp-wrap .pb-bp-uitleg { margin-top: 26px; }
.pp-wrap .pb-bp-uitleg .pp-h2 { font-family: Fraunces, serif; font-weight: 700;
  font-size: 22px; line-height: 1.1; letter-spacing: -.01em; color: var(--brown); margin: 0; }

/* Stappen. list-style uit: het nummer is een eigen bolletje, want een
   standaard cijfer laat zich niet netjes naast een blok van twee regels zetten. */
.pp-wrap .pb-bp-stappen { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px; }
.pp-wrap .pb-bp-stappen li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.pp-wrap .pb-bp-nr { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cream2, #f3e7dc);
  color: var(--brown); font-weight: 900; font-size: 13px; line-height: 1; margin-top: 1px; }
.pp-wrap .pb-bp-stappen strong { display: block; color: var(--brown);
  font-size: 15px; line-height: 1.3; }
.pp-wrap .pb-bp-stappen p { margin: 3px 0 0; color: var(--muted);
  font-size: 14px; line-height: 1.55; }

.pp-wrap .pb-bp-uitleg .pp-note { margin: 16px 0 0; }
.pp-wrap .pb-bp-cta { margin: 16px 0 0; }

@media (min-width: 768px) {
  .pp-wrap .pb-bp-stappen { grid-template-columns: 1fr 1fr; gap: 16px 26px; }
  .pp-wrap .pb-bp-uitleg { padding: 24px; }
}

/* ==========================================================================
   Hero: lichte achtergrond, dus donkere tekst
   ==========================================================================
   Hierboven staat bij de knop: "Uitloggen zit op de donkere hero → lichte
   glas-variant". Dat klopte toen .pp-hero nog een bruine achtergrond had. Die
   is eruit gehaald, maar de kleuren die erbij hoorden staan er nog: witte tekst
   en een doorschijnend witte knop. Op het crème vlak dat er nu staat is dat
   allebei onzichtbaar.

   Gevolg op /mijn-honden/: de uitlogknop was er wel maar niet te zien, en het
   kopje "GASTGEZIN-PORTAAL" stond in een bleek perzikkleurtje op crème. De h1
   bleef leesbaar omdat die zijn eigen bruine kleur meekrijgt, en juist daardoor
   zag het eruit alsof de pagina halverwege ophield.

   Deze regels zetten de hero op donkere tekst. Komt die bruine achtergrond ooit
   terug, haal dit blok dan weg en het oude ontwerp klopt weer in één keer.
   ========================================================================== */

.pp-wrap .pp-hero { color: var(--brown); }

.pp-wrap .pp-hero .pp-eyebrow { color: var(--accent); }

.pp-wrap .pp-hero .pp-btn.ghost,
.pp-wrap .pp-hero-top .pp-btn.ghost {
  background: #fff;
  color: var(--brown);
  border: 1px solid var(--line);
}
.pp-wrap .pp-hero .pp-btn.ghost:hover,
.pp-wrap .pp-hero-top .pp-btn.ghost:hover {
  background: var(--cream);
  border-color: #d8c4b2;
}

/* ==========================================================================
   Zoekbalk alleen als er iets te zoeken valt
   ==========================================================================
   De zoekbalk is gemaakt voor Patty: zij ziet alle honden en moet er eentje
   kunnen opzoeken. Een gastgezin heeft er meestal één, en dan staat er een
   zoekveld boven een lijst van één regel. Dat leest als "er hoort hier meer te
   staan", precies het tegenovergestelde van wat je wilt.

   Vanaf vier honden verschijnt hij vanzelf. Kent een browser :has() niet, dan
   klopt deze regel als geheel niet en wordt hij overgeslagen: de zoekbalk staat
   er dan gewoon, zoals voorheen. Dat is de veilige kant om op te vallen.
   ========================================================================== */

.pp-wrap:not(:has(.pp-dogs > .pp-dog:nth-of-type(4))) .pp-search { display: none; }