.pb-main .dogs-wrap{height:356px;overflow-x:visible;overflow-y:visible;position:relative;padding-top:0;margin-bottom:8px;padding-left:18px;padding-right:18px}

.pb-main .dog-stack{height:auto;position:static;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;gap:0;padding-top:56px;padding-right:calc(50% - 120px);padding-bottom:100px;padding-left:calc(50% - 120px);scroll-snap-type:x mandatory;scrollbar-width:none}

.pb-main .dog-card{position:relative;top:auto;width:244px;height:344px;background:#ddd;border:0;border-radius:var(--r-lg, 16px);box-shadow:0 12px 24px rgba(77,51,34,.14);overflow-x:hidden;overflow-y:hidden;left:auto;right:auto;flex:0 0 210px;margin-top:0;margin-right:-28px;margin-bottom:0;margin-left:-28px;opacity:1;scroll-snap-align:center;cursor:pointer;transform-origin:center center;transition:transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;will-change:transform;flex-basis:244px}

.pb-main .dog-card img{height:100%;width:100%;object-fit:cover;background:#e7c0a6;padding:0}

.pb-main .dog-card.center{left:auto;top:auto;width:244px;height:344px;transform:translateX(-50%) scale(1.05);z-index:3;box-shadow:0 14px 30px rgba(77, 51, 34, .16);border-radius:var(--r-lg, 16px);position:relative;right:auto;flex:0 0 210px;margin-top:0;margin-right:-28px;margin-bottom:0;margin-left:-28px;opacity:1;scroll-snap-align:center;cursor:pointer;transform-origin:center center;transition:transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;will-change:transform;flex-basis:244px}

.pb-main .dog-card.center img{height:100%;object-fit:cover;padding-top:8px;padding-right:8px;padding-bottom:0;padding-left:8px;background:#e7c0a6;width:100%;padding:0}

.pb-main .dog-card.left{left:auto;transform:rotate(-4deg);opacity:1;position:relative;top:auto;right:auto;flex:0 0 210px;width:244px;height:344px;margin-top:0;margin-right:-28px;margin-bottom:0;margin-left:-28px;scroll-snap-align:center;cursor:pointer;border-radius:var(--r-lg, 16px);transform-origin:center center;transition:transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;box-shadow:0 14px 30px rgba(77, 51, 34, .16);will-change:transform;flex-basis:244px}

.pb-main .dog-card.right{right:auto;transform:rotate(4deg);opacity:1;position:relative;top:auto;left:auto;flex:0 0 210px;width:244px;height:344px;margin-top:0;margin-right:-28px;margin-bottom:0;margin-left:-28px;scroll-snap-align:center;cursor:pointer;border-radius:var(--r-lg, 16px);transform-origin:center center;transition:transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;box-shadow:0 14px 30px rgba(77, 51, 34, .16);will-change:transform;flex-basis:244px}

.pb-main .dog-info{padding-top:0;padding-right:11px;padding-bottom:12px;padding-left:11px;background:transparent;border-top:0;position:absolute;left:0;right:0;bottom:0;z-index:3;border:0}

.pb-main .dog-name{font-family:Fraunces,serif;color:#fff;font-size:22px;line-height:.98;margin-top:0;margin-right:0;margin-bottom:5px;margin-left:0;font-weight:700;letter-spacing:-.02em;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.32);position:relative;z-index:4;max-width:120px}

.pb-main .center .dog-name{font-size:23px}

.pb-main .dog-meta{font-size:10px;line-height:1.2;color:#8b7668;font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:none}

.pb-main .dog-actions{display:flex;justify-content:center;gap:10px;align-items:center;margin-top:4px}

.pb-main .arrow-btn{width:38px;height:38px;border:1px solid var(--line);background:#fff;color:var(--brown);display:grid;place-items:center;border-radius:999px;box-shadow:0 6px 12px rgba(77,51,34,.06)}

.pb-main .dog-actions .cta{margin-top:0;background:linear-gradient(135deg,var(--accent),#a96649);color:#fff;box-shadow:0 8px 15px rgba(201,122,85,.18);padding-top:9px;padding-right:12px;padding-bottom:9px;padding-left:12px;position:relative;overflow-x:hidden;overflow-y:hidden;isolation:isolate}

.pb-main .slider-controls .arrow-btn{width:36px;height:36px}

.pb-main .dog-card .cta{font-size:11px;padding-top:7px;padding-right:9px;padding-bottom:7px;padding-left:9px}

.pb-main .section > .text-rich{padding-left:0;padding-right:0;margin-left:0;margin-right:0}

.pb-main .section > .color-grid{padding-left:0;padding-right:0;margin-left:0;margin-right:0}

.pb-main .dog-tags{position:absolute;left:11px;top:auto;z-index:5;display:flex;gap:0;flex-wrap:nowrap;right:10px;align-items:center;bottom:calc(12px + 2.05em)}

.pb-main .dog-tag{display:inline-flex;align-items:center;height:24px;padding-top:0;padding-right:8px;padding-bottom:0;padding-left:8px;border-radius:var(--r);background:var(--accent);color:#fff;font-size:9px;font-weight:900;letter-spacing:.05em;box-shadow:0 5px 12px rgba(38,27,20,.18);text-transform:uppercase;line-height:1;border:0;white-space:nowrap}

.pb-main .dog-tag.dark{background:rgba(108,77,56,.92);color:#fff}

.pb-main .dog-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.58));z-index:2;pointer-events:none}

.pb-main .arrow-btn .icon{width:14px;height:14px;stroke-width:1.55}

.pb-main .dog-card.center .dog-name{font-size:26px;max-width:none}

.pb-main .dog-tags .dog-tag + .dog-tag{display:none}

.pb-main .dog-card.center .dog-tags{bottom:calc(14px + 1.9em);top:auto;left:14px;right:auto}

.pb-main .dog-tag{display:inline-flex;align-items:center;height:22px;padding-top:0;padding-right:7px;padding-bottom:0;padding-left:7px;border-radius:var(--r);background:var(--accent);color:#fff;border:0;font-size:9px;line-height:22px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 5px 12px rgba(38,27,20,.18)}

.pb-main .dogs-wrap{height:auto;overflow-x:visible;overflow-y:visible;padding-top:0;position:relative;isolation:isolate}

.pb-main .dog-card.is-hidden{visibility:hidden;pointer-events:none}

.pb-main .dog-stack::-webkit-scrollbar{display:none}

.pb-main .dog-card .dog-tags{top:auto;bottom:calc(14px + 1.9em);left:14px;right:auto}

.pb-main .dog-card .dog-name{max-width:none}

.pb-main .dog-card.is-active{box-shadow:0 28px 52px rgba(77, 51, 34, .32)}

@media (min-width:768px) and (max-width:1024px){
  .pb-main .dog-card{width:210px;height:300px;margin-right:-24px;margin-left:-24px;flex-basis:auto}
  .pb-main .dog-card.center{width:210px;height:300px;margin-right:-24px;margin-left:-24px;flex-basis:auto}
  .pb-main .dog-card.left{width:210px;height:300px;margin-right:-24px;margin-left:-24px;flex-basis:auto}
  .pb-main .dog-card.right{width:210px;height:300px;margin-right:-24px;margin-left:-24px;flex-basis:auto}
}

@media (max-width:767px){
  .pb-main .dog-stack{padding-top:44px;padding-right:calc(50% - 64px);padding-bottom:64px;padding-left:calc(50% - 64px)}
  .pb-main .dog-card{width:128px;height:182px;border-radius:var(--r-lg);flex:0 0 128px;margin-right:-20px;margin-left:-20px;flex-basis:auto}
  .pb-main .dog-card.center{width:128px;height:182px;border-radius:var(--r-lg);flex:0 0 128px;margin-right:-20px;margin-left:-20px;flex-basis:auto}
  .pb-main .dog-card.left{flex:0 0 128px;width:128px;height:182px;margin-right:-20px;margin-left:-20px;border-radius:var(--r-lg);flex-basis:auto}
  .pb-main .dog-card.right{flex:0 0 128px;width:128px;height:182px;margin-right:-20px;margin-left:-20px;border-radius:var(--r-lg);flex-basis:auto}
  .pb-main .dog-actions .cta{background:var(--accent);box-shadow:0 8px 16px rgba(111, 72, 49, .18);padding-top:0;padding-right:18px;padding-bottom:0;padding-left:18px;position:static;overflow-x:visible;overflow-y:visible;height:44px;border-radius:var(--r-md);border:0;font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .pb-main .dog-card.center .dog-tags{bottom:calc(12px + 1.9em);left:12px}
  .pb-main .dogs-wrap{padding:0}
  .pb-main .dog-card .dog-tags{bottom:calc(12px + 1.9em);left:12px}
  .pb-main .dog-card.is-active{box-shadow:0 22px 42px rgba(77, 51, 34, .30)}
  .pb-main .dog-actions .cta svg{width:16px;height:16px}
  .pb-main .dog-actions .arrow-btn{width:38px;height:38px}
}

.pb-main .photo-strip{display:flex;gap:8px;overflow-x:auto;padding-top:0;padding-right:18px;padding-bottom:8px;padding-left:18px;scroll-snap-type:x mandatory}

.pb-main .photo-strip img{min-width:58%;height:155px;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow2);scroll-snap-align:start}

.pb-main .photo-strip img:first-child{margin-left:0}

.pb-main .spec-table{width:auto;border-collapse:collapse;background:transparent;margin-top:10px;margin-right:18px;margin-bottom:18px;margin-left:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.pb-main .spec-table tr{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-bottom:1px solid var(--line);padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0}

.pb-main .spec-table tr:last-child{border-bottom:0}

.pb-main .spec-table th{display:block;text-align:left;color:#987b65;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}

.pb-main .spec-table td{display:block;text-align:right;color:var(--brown);font-size:13px;font-weight:850}

.pb-main .text-rich{max-width:760px}

.pb-main .text-rich p{font-size:14px;line-height:1.62;color:#67584f;padding:0;text-align:left;margin-top:0;margin-right:0;margin-bottom:12px;margin-left:0}

.pb-main .types-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;padding-top:0;padding-right:20px;padding-bottom:0;padding-left:20px}

.pb-main .type-row{background:#fff8f1;border:1px solid var(--line);box-shadow:var(--shadow2);border-radius:var(--r);padding-top:12px;padding-right:14px;padding-bottom:12px;padding-left:14px}

.pb-main .type-row h3{font-family:Manrope,system-ui,sans-serif;font-size:17px;font-weight:850;color:var(--brown);letter-spacing:.01em;margin-top:0;margin-right:0;margin-bottom:6px;margin-left:0}

.pb-main .type-row p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}

.pb-main .color-grid{display:flex;flex-wrap:wrap;gap:7px}

.pb-main .color-pill{flex:0 0 auto;display:inline-flex;background:#eaded4;border:1px solid #dbc7b7;color:var(--brown);font-size:11px;font-weight:850;border-radius:var(--r);margin-left:0;padding-top:6px;padding-right:8px;padding-bottom:6px;padding-left:8px}

@media (max-width:767px){
  .pb-main .text-rich{max-width:none}
  .pb-main .types-list{grid-template-columns:1fr;gap:8px}
}

/* ---- Desktop: foto-strip hoger (was 155px, oogde samengedrukt op brede schermen) ---- */

@media (min-width:1025px){
  .pb-main .photo-strip img{height:420px}
}

/* ---- Desktop: kenmerken-tabel over de volle breedte, zelfde stijl als hond-detailpagina
   (elke <tr> wordt een kolom i.p.v. een gestapelde rij; tbody wordt "transparant"
   zodat de tr's directe grid-items van de tabel worden). ---- */

@media (min-width:1025px){
  .pb-main .spec-table{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;width:auto;overflow:hidden;margin:10px 18px 18px}
  .pb-main .spec-table tbody{display:contents}
  .pb-main .spec-table tr{display:flex;flex-direction:column;gap:12px;align-items:flex-start;border-width:1px 0;border-color:var(--line);border-style:solid;padding:18px 20px}
  .pb-main .spec-table th{display:block;text-align:left;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .pb-main .spec-table td{display:block;text-align:left;font-family:Fraunces, serif;color:var(--brown);font-size:18px;font-weight:850;line-height:1.2}
}

/* ==========================================================================
   MOBIEL — "In het kort" stond dubbel ingesprongen
   De sectie eromheen geeft al 18px links en rechts; de tabel deed daar nog
   eens 18px eigen marge overheen. Samen 36px aan elke kant, waardoor er van
   375px maar 303px inhoud overbleef.
   ========================================================================== */

@media (max-width:1024px){
  .pb-main .spec-table{margin-left:0;margin-right:0}
}

/* ==========================================================================
   OMKATTEN NAAR DE HUISSTIJL VAN DE FOKKERS- EN GASTGEZINPAGINA
   --------------------------------------------------------------------------
   Deze pagina viel uit de toon: hij gebruikt nog de oude generieke opbouw
   (.section + .section-head + .eyebrow + .h2) met kleine koppen en tegels met
   ronding 3px, terwijl /voor-fokkers/ en /gastgezin-worden/ full-bleed secties
   hebben met --pb-edge, grote Fraunces-koppen en secties die om en om van
   achtergrond wisselen.

   BEWUST GEEN HERBOUW IN BRICKS. De helft van deze pagina bestaat uit
   query-loops: de carrousel met 32 hondenkaarten, vijf producten bij Must
   Haves en de updates. Die zijn met een JSON-plakactie niet na te bouwen —
   ik ken hun queryconfiguratie niet, en plakken zou werkende loops door lege
   vervangen. Alleen de opmaak omkatten raakt de inhoud niet en levert
   hetzelfde resultaat.

   Dit blok staat onderaan en wint dus van de regels hierboven.
   ========================================================================== */

/* ---- 1. Secties: full-bleed met dezelfde randmarge als fokkers ---------- */

/* --pb-edge is `max(32px, calc((100% - 1240px) / 2 + 32px))` en is bedoeld voor
   elementen die de VOLLE breedte pakken: daar maakt het de zijmarge. Maar
   .section is uit pb-common al `width:min(1240px,100%)` met `margin:0 auto`.
   Zet je die padding daar bovenop, dan telt de inspringing dubbel — en erger:
   ze groeit mee met het scherm. Bij 1440px is dat 132px extra aan elke kant,
   bij 2000px al 412px, waardoor de inhoud in een smalle kolom in het midden
   eindigt.

   Ik had dit eerder al weggehaald en toen ten onrechte teruggezet, omdat de
   spec-tabel ook ingesprongen stond. Maar die stond natuurlijk ingesprongen —
   hij zit ín de gepadde sectie. Dat was geen conventie maar hetzelfde
   probleem.

   De oplossing is de sectie wél full-bleed maken, zoals op fokkers en
   gastgezin-worden: breedte-beperking eraf, dan is --pb-edge de enige
   inspringing. De inhoudsblokken erbinnen blijven op min(1140px,100%). */

.pb-main .page-intro,
.pb-main .section{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:var(--pb-edge);
  padding-right:var(--pb-edge);
}

.pb-main .page-intro{
  padding-top:clamp(44px, 5.5vw, 76px);
  padding-bottom:clamp(28px, 3.5vw, 44px);
}

.pb-main .section{
  padding-top:clamp(46px, 6vw, 74px);
  padding-bottom:clamp(46px, 6vw, 74px);
}

/* Om en om een zachte achtergrond, zodat de pagina ritme krijgt. De .flush-
   secties (fotostrook, Must Haves) laat ik met rust: die lopen bewust door. */

.pb-main .section.tight,
.pb-main .section:has(> .types-list),
.pb-main .section:has(> .color-grid){background:#f6eee7}

.pb-main .section > .section-head,
.pb-main .section > .text-rich,
.pb-main .section > .spec-table,
.pb-main .section > .types-list,
.pb-main .section > .color-grid,
.pb-main .section > div{
  width:min(1140px, 100%);
  max-width:1140px;
  margin-left:auto;
  margin-right:auto;
}

/* ---- 2. Koppen op de maat van fokkers ---------------------------------- */

.pb-main .page-intro .eyebrow,
.pb-main .section .eyebrow{
  color:var(--accent);
  font-family:Manrope, system-ui, sans-serif;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.pb-main .page-intro h1{
  font-family:Fraunces, Georgia, serif;
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
  color:var(--brown);
  margin:0;
  max-width:640px;
}

.pb-main .page-intro > p{
  max-width:600px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}

.pb-main .section .h2{
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(29px, 3.5vw, 42px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.035em;
  color:var(--brown);
  margin:0;
}

.pb-main .section > .section-head{margin-bottom:26px}

/* ---- 3. "In het kort": vier kaarten in plaats van een tabel ------------
   De tabel werd op desktop al met display:grid tot vier kolommen omgebouwd,
   maar zonder kaartvorm. Nu echte kaarten, ook op tablet — alleen op de
   telefoon blijft het een lijst, want vier kolommen passen daar niet.
   ---------------------------------------------------------------------- */

@media (min-width:768px){
  .pb-main .spec-table{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:14px;
    margin:0;
    border:0;
    overflow:visible;
  }
  .pb-main .spec-table tbody{display:contents}
  .pb-main .spec-table tr{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
    padding:22px;
    border:1px solid var(--line);
    border-radius:var(--img-radius-lg, 18px);
    background:var(--paper, #fffaf5);
  }
  .pb-main .spec-table th{
    color:var(--accent);
    font-family:Manrope, system-ui, sans-serif;
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
  .pb-main .spec-table td{
    font-family:Fraunces, Georgia, serif;
    font-size:24px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.02em;
    color:var(--brown);
  }
}

/* ---- 4. Ras-tekst leesbaar houden ------------------------------------- */

.pb-main .text-rich{max-width:68ch}

.pb-main .text-rich p{
  font-size:15.5px;
  line-height:1.75;
  color:var(--muted);
  margin:0 0 14px;
}

.pb-main .text-rich p:last-child{margin-bottom:0}

/* ---- 5. "Twee soorten" als volwaardige kaarten ------------------------ */

.pb-main .types-list{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
  padding:0;
}

.pb-main .type-row{
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--img-radius-lg, 18px);
  background:var(--paper, #fffaf5);
  box-shadow:none;
}

.pb-main .type-row h3{
  font-family:Fraunces, Georgia, serif;
  font-size:22px;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--brown);
  margin:0 0 8px;
}

.pb-main .type-row p{font-size:14.5px;line-height:1.7;color:var(--muted)}

/* ---- 6. Kleuren: pillen in plaats van blokjes ------------------------- */

.pb-main .color-grid{gap:8px;margin-top:20px}

.pb-main .color-pill{
  padding:8px 14px;
  border-radius:var(--r-pill, 999px);
  background:var(--paper, #fffaf5);
  border:1px solid var(--line);
  color:var(--brown);
  font-family:Manrope, system-ui, sans-serif;
  font-size:12.5px;
  font-weight:850;
}

/* ---- 7. Mobiel -------------------------------------------------------- */

@media (max-width:767px){
  .pb-main .section .h2{font-size:clamp(25px, 7.2vw, 33px)}
  .pb-main .section > .section-head{margin-bottom:18px}
  .pb-main .types-list{grid-template-columns:1fr;gap:10px}
  .pb-main .type-row{padding:18px}
  .pb-main .type-row h3{font-size:20px}
  .pb-main .text-rich p{font-size:15px}
}

/* ==========================================================================
   COMPACTER + ÉÉN FOTO RECHTS IN DE HERO
   --------------------------------------------------------------------------
   Twee dingen uit de vorige ronde bijgesteld:

   1. De intro stond over de volle breedte met de foto's als losse strook
      eronder, terwijl fokkers, gastgezin-worden en verwachte nestjes allemaal
      tekst links met één foto rechts hebben. Dat trek ik hier gelijk.

      Dat kan niet met een omhulsel — de intro en de fotostrook zijn twee
      losse secties in Bricks, en de inhoud van een Bricks-pagina zit in de
      database. Daarom maak ik .pb-main hier een raster en zet ik die twee
      secties naast elkaar; al het andere blijft over de volle breedte staan.
      Alleen op deze pagina, want dit bestand laadt alleen hier.

   2. De pagina had te veel lucht. Sectiepadding, koppadding en de
      kenmerk-kaarten zijn allemaal een slag compacter.
   ========================================================================== */

/* ---- 1. Hero: tekst links, één foto rechts ---------------------------
   pb-ras-hero.js verplaatst de fotostrook in de intro-sectie en wikkelt de
   tekst in .pb-ras-copy. Daarna is dit een gewone hero met twee kolommen,
   net als op fokkers en gastgezin-worden.

   WAAROM NIET MET CSS ALLEEN. Ik heb het eerst geprobeerd door .pb-main een
   raster te maken en die twee secties naast elkaar te zetten. Dat liep op twee
   dingen stuk:

     - `:has()` neemt de specificiteit van zijn zwaarste argument over. De
       regel `.pb-main:has(> .section.flush .photo-strip) > *` woog daardoor
       vier klassen en versloeg `.pb-main > .page-intro` (twee klassen). De
       intro bleef dus de volle breedte spannen terwijl de foto in kolom 2
       stond — precies over de tekst heen.
     - De secties hebben zelf een max-width van 1240px met auto-marges. In een
       raster leverde dat witte stroken op aan de zijkant.

   Met de foto ín de intro-sectie is het één zelfstandig blok en spelen die
   twee dingen geen rol meer.
   -------------------------------------------------------------------------- */

.pb-main .page-intro:has(.photo-strip){
  display:grid;
  grid-template-columns:minmax(320px, 1fr) minmax(360px, 1fr);
  gap:clamp(28px, 4vw, 60px);
  align-items:center;
}

.pb-main .pb-ras-copy{min-width:0}

.pb-main .page-intro:has(.photo-strip) .photo-strip{
  display:block;
  overflow:visible;
  padding:0;
  margin:0;
}

.pb-main .page-intro:has(.photo-strip) .photo-strip img{
  width:100%;
  min-width:0;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow2);
}

/* Eén beeld: rustiger en gelijk aan de andere pagina's. De rest blijft in de
   HTML staan, dus terugzetten is één regel. */

.pb-main .page-intro:has(.photo-strip) .photo-strip img:not(:first-child){display:none}

@media (max-width:1024px){
  .pb-main .page-intro:has(.photo-strip){grid-template-columns:1fr;gap:24px}
  .pb-main .page-intro:has(.photo-strip) .photo-strip img{aspect-ratio:16 / 11;border-radius:var(--r-lg)}
}

/* ---- 2. Compacter -------------------------------------------------- */

.pb-main .page-intro{
  padding-top:clamp(38px, 4.5vw, 62px);
  padding-bottom:clamp(20px, 2.5vw, 32px);
}

.pb-main .section{
  padding-top:clamp(34px, 4vw, 54px);
  padding-bottom:clamp(34px, 4vw, 54px);
}

.pb-main .section > .section-head{margin-bottom:18px}

.pb-main .section .h2{font-size:clamp(26px, 3vw, 36px)}

.pb-main .page-intro > p{margin-top:14px;font-size:15.5px}

/* De kenmerk-kaarten waren te royaal: 22px padding en een waarde van 24px
   maakten van vier korte feiten een blok van bijna 200px hoog. */

@media (min-width:768px){
  .pb-main .spec-table{gap:10px}
  .pb-main .spec-table tr{padding:14px 16px;gap:6px;border-radius:var(--img-radius, 14px)}
  .pb-main .spec-table th{font-size:10px;letter-spacing:.12em}
  .pb-main .spec-table td{font-size:19px;line-height:1.15}
}

/* Ras-tekst, varianten en kleuren ook een slag dichter op elkaar. */

.pb-main .text-rich p{font-size:15px;line-height:1.7;margin-bottom:12px}

.pb-main .types-list{gap:10px}

.pb-main .type-row{padding:18px}

.pb-main .type-row h3{font-size:20px;margin-bottom:6px}

.pb-main .type-row p{font-size:14px;line-height:1.6}

.pb-main .color-grid{margin-top:16px}

.pb-main .color-pill{padding:7px 12px;font-size:12px}

/* ==========================================================================
   MARGES EN AFGERONDE HOEKEN GELIJK TREKKEN
   --------------------------------------------------------------------------
   Vier dingen die op deze pagina uit de pas liepen met de rest van de site.

   1) De kenmerken-tabel stond wel op de goede plek (links 32px, net als de
      secties), maar de rijen erin waren 390px breed in een blok van 470px.
      Oorzaak: de <table> staat op display:block, maar de <tbody> was nog een
      table-row-group. Die maakt zijn eigen tabel-opmaakcontext en krimpt naar
      de inhoud. In de twee bredere weergaves stond `display:contents` al op de
      tbody; op mobiel ontbrak hij.

   2) De productstrook heeft geen sectiemarge maar zijn eigen padding van 18px,
      terwijl de rest van de pagina op --pb-edge (32px) begint. De kaarten
      staken daardoor 14px verder naar links uit dan alles erboven.

   3) De productkaart had drie losse, hard-gecodeerde hoeken (kaart 14px, foto
      10px, knop 12px) die nergens anders op de site voorkomen. Nu op de
      tokens, zodat ze meebewegen met de homepage.

   4) Op mobiel stond de winkelmandknop absoluut in de hoek, met 50px lege
      ruimte rechts van de prijs om hem te ontwijken. Zelfde raster-oplossing
      als op de homepage: prijs en knop naast elkaar op één regel, kaart van
      170 naar 200px.
   ========================================================================== */

.pb-main .spec-table tbody{display:contents}

/* ---- 5. Hero op dezelfde kolom als de secties -------------------------
   --pb-edge rekent met een raster van 1240px: een full-bleed element houdt
   daardoor altijd 1176px inhoud over. De blokken bínnen een .section zijn
   hierboven op min(1140px,100%) gezet. Die 36px verschil zag je terug in de
   hero: op 1440px begon de titel op 132 terwijl elke kop eronder op 150 stond.

   De hero heeft een eigen achtergrondkleur en moet dus wél de volle breedte
   houden, daarom niet de breedte beperken maar de padding meeschalen tot de
   inhoud op 1140px uitkomt. Onder ±1204px is --pb-edge (32px) nog de grootste
   en verandert er niets. */

.pb-main .page-intro{
  padding-left:max(var(--pb-edge), calc((100% - 1140px) / 2));
  padding-right:max(var(--pb-edge), calc((100% - 1140px) / 2));
}