/* knutselspullen.css — het blok "Dit heb je nodig" op de knutsel-, teken-,
   kleurplaat- en surprisepagina's (oktober 2026).
   De HTML schrijft data/bouw-knutselspullen.mjs, de keuze per pagina staat in
   data/knutselspullen.json.

   Het blok is een boodschappenbriefje: één vel papier met een rij spullen,
   elk op een eigen regel met een stippellijn eronder. Geen kaartjes in een
   kaart. Per regel: foto, het woord uit het lijstje van de pagina ("Schaar"),
   de productnaam (de enige link, hij spant de hele regel), prijs en winkel,
   en een groene knop die alleen voor het oog is.
   Eén kolom op een telefoon, twee zodra het vel 640 px breed is (container
   query: het blok staat soms los op de pagina, soms in een smalle kolom). */

.ks--los{padding:4px clamp(22px,5vw,70px) 58px;position:relative;z-index:1}
/* Zoals bij het "Verder in"-blok (site.css): de 70px onder .page-layout plus
   de ruimte van dit blok werd samen bijna 100px. Met 36-48px eronder komt het
   op ~55px, ook als er een printlogo of script tussen staat. */
:where(.page-layout,.content,.kleur-layout):is(:has(+ .ks--los),:has(+ :is(script,.merk-print) + .ks--los)){padding-bottom:clamp(36px,4vw,48px)}
:where(.page-layout,.content,.kleur-layout):is(:has(+ .ks--los),:has(+ :is(script,.merk-print) + .ks--los)) > :last-child:last-child,
:where(.page-layout,.content,.kleur-layout):is(:has(+ .ks--los),:has(+ :is(script,.merk-print) + .ks--los)) > :last-child > :last-child:last-child,
:where(.page-layout,.content,.kleur-layout):is(:has(+ .ks--los),:has(+ :is(script,.merk-print) + .ks--los)) > :last-child > :last-child > :last-child:last-child{margin-bottom:0}

/* In een kolom van de pagina zelf: alleen ruimte erboven. */
.ks:not(.ks--los){margin-top:46px}

.ks-blad{container:ks / inline-size;position:relative;max-width:1180px;box-sizing:border-box;
  padding:28px 28px 20px;border-radius:22px;border:2px solid rgba(39,52,47,.14);
  background:var(--paper-light,#fffaf0);box-shadow:var(--shadow-soft,0 10px 26px rgba(39,52,47,.08))}

.ks-tekening{position:absolute;top:-26px;right:18px;width:118px;height:auto;pointer-events:none}

.ks h2{margin:0 0 6px;padding-right:118px;font:800 clamp(25px,2.6vw,32px)/1.08 "Alegreya",Georgia,serif;color:var(--ink,#27342f)}
.ks-intro{margin:0 0 14px;max-width:62ch;font-size:16.5px;line-height:1.5;color:var(--muted,#637069)}

.ks-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:30px}
@container ks (min-width:640px){.ks-lijst{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ks-ding{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;
  margin:0;padding:12px 8px;border-bottom:2px dashed rgba(39,52,47,.15);border-radius:4px;
  transition:background-color .15s ease}
.ks-ding:hover{background:rgba(240,211,141,.24)}
.ks-ding:focus-within{background:rgba(240,211,141,.24)}

.ks-foto{width:72px;height:72px;border-radius:12px;background:#fff;border:1px solid rgba(39,52,47,.1);overflow:hidden}
.ks-foto img{display:block;width:100%;height:100%;margin:0;padding:5px;box-sizing:border-box;object-fit:contain;border-radius:0}

.ks-tekst{min-width:0}
.ks-nodig{display:block;margin-bottom:1px;font-size:14.5px;font-weight:800;line-height:1.25;color:var(--green,#315744)}
.ks-titel{margin:0;font:700 16px/1.3 "Source Sans 3",system-ui,sans-serif;color:var(--ink,#27342f);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ks-link{color:inherit;text-decoration:none}
.ks-link::after{content:"";position:absolute;inset:0;border-radius:6px;z-index:1}
.ks-link:focus-visible{outline:none}
.ks-link:focus-visible::after{outline:3px solid var(--gold,#d4a44c);outline-offset:2px}

.ks-voetje{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.ks-prijs{min-width:0;font-size:15px;line-height:1.3;color:var(--muted,#637069);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-prijs strong{font-size:16px;font-weight:800;color:var(--ink,#27342f);font-variant-numeric:tabular-nums}

/* De klik die we willen is de winkel: een volle groene knop (nooit rood). */
.ks-knop{flex:none;padding:7px 15px;border-radius:999px;background:var(--green,#315744);color:#fff6e1;
  font-size:15px;font-weight:800;line-height:1.2;box-shadow:0 3px 0 var(--green-dark,#203e32)}
.ks-knop::after{content:"\2009\203A"}
.ks-ding:hover .ks-knop{background:#27463a}

.ks-voet{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--muted,#637069)}

/* De verwijzing vanuit het lijstje op de pagina zelf ("Niet alles in huis?"). */
.ks-verwijs{margin:10px 0 0;font-size:16px;font-weight:700}
.ks-verwijs a{color:var(--green,#315744)}

@media(max-width:560px){
  .ks-blad{padding:24px 16px 16px;border-radius:18px}
  .ks-tekening{width:86px;top:-20px;right:10px}
  .ks h2{padding-right:78px}
  .ks-intro{font-size:16px}
  .ks-ding{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:11px 4px}
  .ks-foto{width:64px;height:64px}
}
@media(prefers-reduced-motion:reduce){.ks-ding{transition:none}}
@media print{.ks,.ks-verwijs{display:none !important}}