/* Thuispaneel Category Grid - luxe panelen look (110×280) */
.tp-savoy-grid{
  display:grid;
  grid-template-columns: repeat(var(--tp-cols,4), minmax(200px,1fr));
  gap:28px;
  margin: 24px 0;
}
@media(max-width:1200px){ .tp-savoy-grid{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:640px){  .tp-savoy-grid{ grid-template-columns:repeat(2,1fr);} }

.tp-card{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  border-radius:18px; background:#fff;
  border:1px solid rgba(214,172,131,.28);
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  transition:.28s ease;
}
.tp-card:hover{
  transform:translateY(-6px);
  border-color:rgba(214,172,131,.48);
  box-shadow:0 22px 54px rgba(0,0,0,.22);
}

/* Echte 110:280 verhouding met moderne browsers */
.tp-media{ aspect-ratio: 11 / 28; width:100%; overflow:hidden; background:#f5f5f5; display:block; }
.tp-media img{
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  object-fit:cover !important; object-position:center center !important;
  display:block !important;
  transition:transform .5s ease;
}
.tp-card:hover .tp-media img{ transform:scale(1.06); }

/* Overlay met titel + count onderin */
.tp-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
}
.tp-title{ margin:0; color:#fff; font-weight:700; font-size:1.08rem; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.tp-count{ color:rgba(255,255,255,.9); font-size:.92rem; margin-top:.2rem; }

/* Luxe pijl-chip rechts onder */
.tp-arrow{
  position:absolute; right:12px; bottom:12px; color:#fff; padding:6px 10px; border-radius:999px;
  background:linear-gradient(135deg,#D6AC83 0%, rgba(214,172,131,.75) 100%);
  box-shadow:0 6px 18px rgba(214,172,131,.35);
  opacity:0; transform:translateX(-8px); transition:.22s ease;
}
.tp-card:hover .tp-arrow{ opacity:1; transform:translateX(0); }

/* Toetsenbord focus */
.tp-card:focus-visible{ outline:2px solid #D6AC83; outline-offset:3px; border-radius:18px; }