/* The Trace - The Collection (/designs/) in dezelfde opzet als de nieuwe winkel, variant A (keuze Martijn 06-10-2026).
   Zelfde raster, fotomaat en letter als de winkel in F1: 16 px rand, 8 px tussen de kaarten, rechte hoeken, naam en
   prijs in 14 px, plus de verhaalregel per ontwerp klein en grijs (max twee regels) op de plek van de kleurblokjes.
   Alleen opmaak: de kaarten zelf (gemaakt door Landingspaginas/_bouw/overzichtspagina.mjs) blijven ongewijzigd, want
   de Halloween-schakelaar knipt op 19-10 de zeven Halloween-kaarten uit die HTML. Geladen door inc/tt-shopbalk.php,
   alleen op die pagina en alleen als de filterbalk aan staat.
   De pagina rekt zich uit tot 100vw (margin calc(-50vw + 50%)), maar de omhulling van het thema is smaller (op 1440
   gemeten 1425, er gaat een schuifbalk af), dus hij begint 7 px links buiten beeld. --tt-col-l en --tt-col-r (gezet
   door het scriptje tt-col-sb onderaan de pagina) zijn die werkelijke overloop, zodat de rand exact 16 px is. */

body.tt-col-pagina #tt-designs section{padding-top:24px}
/* !important omdat inc/tt-landing-breedte.php op pagina's met de meta _tt_landing (op live ook /designs/, op staging
   niet) een maximale breedte van 1340 px met !important zet; zonder dit stond de Collection op live op een rand van 66. */
@media (min-width:769px){
  body.tt-col-pagina #tt-designs .wrap{max-width:none!important;padding-left:calc(16px + var(--tt-col-l, 0px));padding-right:calc(16px + var(--tt-col-r, 0px))}
}
@media (max-width:768.98px){
  body.tt-col-pagina #tt-designs .wrap{padding-left:calc(10px + var(--tt-col-l, 0px));padding-right:calc(10px + var(--tt-col-r, 0px))}
}
body.tt-col-pagina #tt-designs .raster{gap:22px 8px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:769px) and (max-width:1024px){
  body.tt-col-pagina #tt-designs .raster{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768.98px){
  body.tt-col-pagina #tt-designs .raster{gap:18px 6px;grid-template-columns:repeat(2,minmax(0,1fr))}
}
body.tt-col-pagina #tt-designs .kaart{background:none;border:0}
body.tt-col-pagina #tt-designs .beeld{border-radius:0}
body.tt-col-pagina #tt-designs .body{padding:10px 0 0;gap:3px}
body.tt-col-pagina #tt-designs .naam{order:1;font-family:"Poppins",Arial,Helvetica,sans-serif;font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:#f2f2f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.tt-col-pagina #tt-designs .meta{order:2;border-top:0;padding-top:0;margin-top:0;font-family:"Poppins",Arial,Helvetica,sans-serif;font-size:14px;letter-spacing:0;text-transform:none;color:#f2f2f2}
body.tt-col-pagina #tt-designs .kaart:hover .meta{color:#f2f2f2}
body.tt-col-pagina #tt-designs .zin{order:3;font-size:13px;color:#8c8c8c;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
@media (max-width:768.98px){
  body.tt-col-pagina #tt-designs .naam,body.tt-col-pagina #tt-designs .meta{font-size:13px}
  body.tt-col-pagina #tt-designs .zin{font-size:12px}
}
/* De sorteerknoppen zoals de categorieknoppen in de winkel: wit als hij aan staat (goud is voor prijs en koopknoppen), 44 px hoog. */
body.tt-col-pagina #tt-designs .chip{min-height:44px;background:transparent;border-color:rgba(255,255,255,.22);color:#e8e8e8}
body.tt-col-pagina #tt-designs .chip:hover{border-color:#f2f2f2;color:#fff}
body.tt-col-pagina #tt-designs .chip.aan{background:#f2f2f2;border-color:#f2f2f2;color:#0d0d0d}