:root{
  --pi-gap:16px;
  --pi-card-border-width:1px;
  --pi-card-border-color:rgba(0,0,0,.08);
  --pi-card-radius:14px;
  --pi-card-bg:#fff;
  --pi-card-shadow:0 2px 8px rgba(0,0,0,.05);
  --pi-body-padding:14px;

  /* Text */
  --pi-title-size:18px;
  --pi-title-weight:600;
  --pi-title-color:var(--pi-filter-btn-text-active, #111111);
  --pi-text-size:14px;
  --pi-text-color:#222222;
  --pi-client-color:rgba(0,0,0,.65);
  --pi-excerpt-color:rgba(0,0,0,.85);

  /* Buttons */
  --pi-btn-radius:10px;
  --pi-btn-border-width:1px;
  --pi-btn-border-color:rgba(0,0,0,.12);
  --pi-btn-padding:8px 10px;
  --pi-btn-bg:transparent;
  --pi-btn-text:#111111;

  /* Action buttons (per item) – keep separate from category filter */
  --pi-actions-gap:10px;

  /* Overlay */
  --pi-overlay-bg:rgba(0,0,0,.25);
  --pi-overlay-text:#fff;

  /* Content alignment */
  --pi-content-align-items:flex-start;
  --pi-content-justify:flex-start;
  --pi-content-text-align:left;
}
.pi-grid{display:grid;gap:var(--pi-gap)}
.pi-cols-1{grid-template-columns:1fr}
.pi-cols-2{grid-template-columns:repeat(2,1fr)}
.pi-cols-3{grid-template-columns:repeat(3,1fr)}
.pi-cols-4{grid-template-columns:repeat(4,1fr)}
.pi-cols-5{grid-template-columns:repeat(5,1fr)}
.pi-cols-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){.pi-cols-3,.pi-cols-4,.pi-cols-5,.pi-cols-6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pi-grid{grid-template-columns:1fr!important}}
.pi-card{border:var(--pi-card-border-width) solid var(--pi-card-border-color);border-radius:var(--pi-card-radius);overflow:hidden;background:var(--pi-card-bg);box-shadow:var(--pi-card-shadow);display:flex;flex-direction:column;will-change:transform,opacity}
.pi-thumb img{width:100%;height:auto;display:block}
.pi-grid .pi-body{padding:var(--pi-body-padding);display:flex;flex-direction:column;justify-content:var(--pi-content-justify);align-items:var(--pi-content-align-items);text-align:var(--pi-content-text-align);flex:1;font-size:var(--pi-text-size);color:var(--pi-text-color) !important}
.pi-grid .pi-title{margin:0 0 6px 0;font-size:var(--pi-title-size);line-height:1.25;font-weight:var(--pi-title-weight)}
.pi-grid .pi-title a{color:var(--pi-title-color) !important;text-decoration:none}
.pi-grid .pi-client{font-size:13px;opacity:1;margin-bottom:10px;color:var(--pi-client-color) !important}
.pi-grid .pi-excerpt{font-size:var(--pi-text-size);opacity:1;margin-bottom:12px;color:var(--pi-excerpt-color) !important}
.pi-actions{display:flex;gap:var(--pi-actions-gap,10px);flex-wrap:wrap;justify-content:inherit;align-items:inherit}
.pi-grid .pi-btn{display:inline-block;padding:var(--pi-btn-padding);border-radius:var(--pi-btn-radius);border:var(--pi-btn-border-width) solid var(--pi-btn-border-color) !important;background:var(--pi-btn-bg) !important;color:var(--pi-btn-text) !important;text-decoration:none;font-size:13px}
.pi-btn-secondary{opacity:.9}

/* Overlay mode: content over the image (handig bij ronde cards) */
.pi-mode-overlay .pi-card{position:relative}
.pi-mode-overlay .pi-thumb{position:absolute;inset:0;display:block}
.pi-mode-overlay .pi-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pi-mode-overlay .pi-body{position:absolute;inset:0;background:var(--pi-overlay-bg);color:var(--pi-overlay-text)}
.pi-mode-overlay .pi-title a{color:var(--pi-overlay-text) !important}
.pi-mode-overlay .pi-client,.pi-mode-overlay .pi-excerpt{color:var(--pi-overlay-text) !important}
.pi-mode-overlay .pi-btn{color:var(--pi-overlay-text) !important;border-color:var(--pi-overlay-text) !important;background:transparent !important}



/* === Hover zoom === */
.pi-thumb img{transition:transform .35s ease; transform-origin:center center; will-change:transform;}
.pi-card:hover .pi-thumb img{transform:scale(var(--pi-hover-scale,1.05));}

/* Tijdens filteren: geen hover/zoom, voorkomt "veert" gevoel */
.pi-is-filtering .pi-thumb img{transition:none !important; transform:none !important;}

/* === Shape: Circle (title + button inside a perfect circle) === */
.pi-grid.pi-shape-circle .pi-card{
  position:relative;
  display:block;            /* override flex to avoid height growth */
  border-radius:50%;
  overflow:hidden;
}

/* Force square */
.pi-grid.pi-shape-circle .pi-card::before{
  content:"";
  display:block;
  padding-top:100%;
}

/* Layer children */
.pi-grid.pi-shape-circle .pi-card > *{
  position:absolute;
  left:0;
  right:0;
}

/* Image top */
.pi-grid.pi-shape-circle .pi-thumb{
  top:0;
  height:var(--pi-circle-image-height,62%);
  width:100%;
  overflow:hidden;
  display:block;
}
.pi-grid.pi-shape-circle .pi-thumb img{
  width:100%;
  height:100% !important;
  object-fit:cover;
  display:block;
}

/* Content bottom */
.pi-grid.pi-shape-circle .pi-body{
  top:var(--pi-circle-image-height,62%);
  bottom:0;
  padding:14px;
  background:var(--pi-circle-content-bg,transparent);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:var(--pi-circle-gap,10px);
}
.pi-grid.pi-shape-circle .pi-title{margin:0; max-width:92%;}
.pi-grid.pi-shape-circle .pi-actions{justify-content:center;}


/* === Categorie filter === */
.pi-filter{
  display:flex;
  flex-wrap:wrap;
  gap:var(--pi-filter-gap,10px);
  margin:0 0 calc(var(--pi-gap) * 1.2) 0;
  align-items:center;
  justify-content:var(--pi-filter-justify, flex-start);
}
.pi-filter-btn{
  appearance:none;
  border:var(--pi-filter-btn-border-width,1px) solid var(--pi-filter-btn-border, rgba(0,0,0,.18));
  background:var(--pi-filter-btn-bg, rgba(255,255,255,.72));
  color:var(--pi-filter-btn-text, rgba(0,0,0,.82));
  padding:var(--pi-filter-btn-padding, 8px 12px);
  border-radius:var(--pi-filter-btn-radius, 999px);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.pi-filter-btn:hover{transform:translateY(-1px); background:var(--pi-filter-btn-bg-hover, rgba(255,255,255,.86)); color:var(--pi-filter-btn-text-hover, var(--pi-filter-btn-text, rgba(0,0,0,.82)));}
.pi-filter-btn.is-active{
  background:var(--pi-filter-btn-bg-active, #ffffff);
  border-color:var(--pi-filter-btn-border-active, rgba(0,0,0,.28));
  color:var(--pi-filter-btn-text-active, #111111);
}
@media (max-width:560px){
  .pi-filter{gap:8px;}
  .pi-filter-btn{padding:8px 10px;font-size:13px;}
}


/* Filter anim helpers */
.pi-card.pi-filter-hide{opacity:0;}