/* ═══════════════════════════════════════════════════════════════
   MorphiToys, nieuwe opbouw: basis (tokens en gedeelde componenten)
   Laadt alleen in de nieuwe opbouw (body.nw), na css/style.css.
   Alle klassen beginnen met nw-. Oude klassen worden hier niet
   herstyled; wat een oude view in de nieuwe kop en voet nodig heeft,
   staat onderaan onder body.nw.
   Huisstijl zoals de schets in de cockpit (tab "Toys vernieuwen"):
   navy, oranje, geel, cyaan; Quicksand voor koppen, DM Sans voor tekst.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Merk */
    --nw-navy:        #182352;
    --nw-navy-diep:   #101A40;
    --nw-oranje:      #F5901E;   /* vlak/accent; als tekst: --nw-oranje-inkt */
    --nw-oranje-inkt: #C2410C;   /* oranje tekst op wit (5,2:1) */
    --nw-geel:        #FFC020;   /* tekst erop altijd donker */
    --nw-cyaan:       #12AEE0;
    --nw-inkt:        #14204A;
    --nw-inkt-zacht:  #4A5578;
    --nw-canvas:      #F6F8FD;
    --nw-canvas-2:    #ECF1FA;
    --nw-rand:        #E3E8F4;
    --nw-rand-sterk:  #CFD8EC;
    --nw-wit:         #FFFFFF;

    /* Werelden (zelfde waarden als werelden() in core/opbouw.php).
       kleur = vlak en accent, tint = lichte achtergrond, inkt = tekst op wit
       of tint (AA) en ook een donker vlak voor witte tekst,
       op = tekst of icoon OP de kleur (AA; bij rijden-draaien alleen grote tekst). */
    --nw-flexi-fidget-kleur: #F5901E;     --nw-flexi-fidget-tint: #FFE7D0;     --nw-flexi-fidget-inkt: #9A3412;     --nw-flexi-fidget-op: #14204A;
    --nw-spellen-kleur: #182352;          --nw-spellen-tint: #E3E9F8;          --nw-spellen-inkt: #182352;          --nw-spellen-op: #FFFFFF;
    --nw-puzzels-kleur: #FFC020;          --nw-puzzels-tint: #FFF1CC;          --nw-puzzels-inkt: #7A5200;          --nw-puzzels-op: #3B2A00;
    --nw-bouwen-knikkeren-kleur: #12AEE0; --nw-bouwen-knikkeren-tint: #D4F1FA; --nw-bouwen-knikkeren-inkt: #075E7A; --nw-bouwen-knikkeren-op: #14204A;
    --nw-rijden-draaien-kleur: #4A7BD8;   --nw-rijden-draaien-tint: #E1EAFB;   --nw-rijden-draaien-inkt: #1E4494;   --nw-rijden-draaien-op: #FFFFFF;
    --nw-fantasie-kleur: #1E9E5A;         --nw-fantasie-tint: #E6F7EE;         --nw-fantasie-inkt: #11643A;         --nw-fantasie-op: #14204A;

    /* Standaard (geen wereld): navy. .nw-w-<slug> overschrijft deze vier. */
    --w-kleur: var(--nw-navy);
    --w-tint:  #E3E9F8;
    --w-inkt:  var(--nw-navy);
    --w-op:    #FFFFFF;

    /* Maat en ritme */
    --nw-breed:  1240px;
    --nw-rand-x: clamp(16px, 4vw, 40px);
    --nw-r-s: 12px;  --nw-r-m: 18px;  --nw-r-l: 24px;
    --nw-schaduw-s: 0 4px 14px rgba(20, 32, 74, .07);
    --nw-schaduw-m: 0 16px 36px rgba(20, 32, 74, .11);
    --nw-schaduw-l: 0 24px 48px rgba(20, 32, 74, .16);
    --nw-kop-hoogte: 76px;
    --nw-kop-font: 'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
    --nw-tekst-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nw-vloei: cubic-bezier(.22, .9, .36, 1);
}
@media (max-width: 959px) { :root { --nw-kop-hoogte: 64px; } }

.nw-w-flexi-fidget     { --w-kleur: var(--nw-flexi-fidget-kleur);     --w-tint: var(--nw-flexi-fidget-tint);     --w-inkt: var(--nw-flexi-fidget-inkt);     --w-op: var(--nw-flexi-fidget-op); }
.nw-w-spellen          { --w-kleur: var(--nw-spellen-kleur);          --w-tint: var(--nw-spellen-tint);          --w-inkt: var(--nw-spellen-inkt);          --w-op: var(--nw-spellen-op); }
.nw-w-puzzels          { --w-kleur: var(--nw-puzzels-kleur);          --w-tint: var(--nw-puzzels-tint);          --w-inkt: var(--nw-puzzels-inkt);          --w-op: var(--nw-puzzels-op); }
.nw-w-bouwen-knikkeren { --w-kleur: var(--nw-bouwen-knikkeren-kleur); --w-tint: var(--nw-bouwen-knikkeren-tint); --w-inkt: var(--nw-bouwen-knikkeren-inkt); --w-op: var(--nw-bouwen-knikkeren-op); }
.nw-w-rijden-draaien   { --w-kleur: var(--nw-rijden-draaien-kleur);   --w-tint: var(--nw-rijden-draaien-tint);   --w-inkt: var(--nw-rijden-draaien-inkt);   --w-op: var(--nw-rijden-draaien-op); }
.nw-w-fantasie         { --w-kleur: var(--nw-fantasie-kleur);         --w-tint: var(--nw-fantasie-tint);         --w-inkt: var(--nw-fantasie-inkt);         --w-op: var(--nw-fantasie-op); }

/* ── Pagina ──────────────────────────────────────────────────── */
body.nw { background: var(--nw-canvas); color: var(--nw-inkt); }
body.nw > main { min-width: 0; }
.nw-icoon { flex: none; display: inline-block; vertical-align: -.2em; }

/* Binnenmaat: gebruik in elke band. */
.nw-binnen { max-width: var(--nw-breed); margin-inline: auto; padding-inline: var(--nw-rand-x); }

/* ── Secties ─────────────────────────────────────────────────────
   <section class="nw-sectie [nw-sectie--wit|--navy|--tint|--krap]"><div class="nw-binnen">…</div></section> */
.nw-sectie { padding-block: clamp(44px, 6vw, 76px); }
.nw-sectie--krap { padding-block: clamp(28px, 4vw, 44px); }
.nw-sectie--wit  { background: var(--nw-wit); }
.nw-sectie--tint { background: var(--w-tint); }
.nw-sectie--navy { background: var(--nw-navy); color: #E7ECFA; }
.nw-sectie--navy h1, .nw-sectie--navy h2, .nw-sectie--navy h3 { color: #fff; }
.nw-sectie--navy :focus-visible { outline-color: var(--nw-geel); }

/* Kop boven een sectie: titel (met <em> in oranje) en uitleg links, een .nw-link rechts. */
.nw-sectiekop { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 28px;
    flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 28px); }
.nw-sectiekop > div { max-width: 62ch; }
.nw-sectiekop h2 { font-family: var(--nw-kop-font); font-weight: 700; font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.3rem);
    line-height: 1.1; letter-spacing: -.01em; margin: 0; }
.nw-sectiekop h2 em { font-style: normal; color: var(--nw-oranje-inkt); }
.nw-sectie--navy .nw-sectiekop h2 em { color: var(--nw-geel); }
.nw-sectiekop p { color: var(--nw-inkt-zacht); margin: 8px 0 0; font-size: 1.02rem; line-height: 1.6; }
.nw-sectie--navy .nw-sectiekop p { color: #C9D3F2; }

/* Tekstlink met pijl ("Alles bekijken"). */
.nw-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
    font-family: var(--nw-kop-font); font-weight: 700; font-size: .98rem; color: var(--nw-inkt);
    text-decoration: none; background: linear-gradient(var(--nw-geel), var(--nw-geel)) left calc(100% - 9px) / 100% 3px no-repeat; }
.nw-link .nw-icoon { transition: transform .2s var(--nw-vloei); }
.nw-link:hover { color: var(--nw-navy); }
.nw-link:hover .nw-icoon { transform: translateX(3px); }
.nw-sectie--navy .nw-link { color: #fff; }

/* ── Knoppen ─────────────────────────────────────────────────────
   <a class="nw-knop nw-knop--oranje">Tekst <?= nw_icoon('pijl', 18) ?></a>
   Varianten: --oranje (hoofdactie), --navy, --wit (op een donker of gekleurd vlak),
   --rand (omlijnd), --licht (omlijnd op donker), --wereld (vlak in de wereldkleur);
   maten: --klein, --blok (volle breedte). */
.nw-knop { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
    font-family: var(--nw-kop-font); font-weight: 700; font-size: 1rem; line-height: 1.1;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform .2s var(--nw-vloei), box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
.nw-knop:hover { transform: translateY(-2px); }
.nw-knop:active { transform: translateY(0); }
.nw-knop .nw-icoon { transition: transform .2s var(--nw-vloei); }
.nw-knop:hover .nw-icoon:last-child { transform: translateX(2px); }
/* Wit op oranje haalt AA pas vanaf dit donkerder oranje (4,5 tot 5,7:1). */
.nw-knop--oranje { background: linear-gradient(180deg, #CF4A0D, #B93C0B); color: #fff; box-shadow: 0 10px 24px rgba(207, 74, 13, .32); }
.nw-knop--oranje:hover { background: linear-gradient(180deg, #C2410C, #A8350A); color: #fff; box-shadow: 0 14px 30px rgba(207, 74, 13, .38); }
.nw-knop--navy { background: var(--nw-navy); color: #fff; }
.nw-knop--navy:hover { background: var(--nw-navy-diep); color: #fff; box-shadow: var(--nw-schaduw-m); }
.nw-knop--wit { background: #fff; color: var(--nw-navy); box-shadow: var(--nw-schaduw-s); }
.nw-knop--wit:hover { color: var(--nw-navy); box-shadow: var(--nw-schaduw-m); }
.nw-knop--rand { background: transparent; color: var(--nw-inkt); border-color: var(--nw-inkt); }
.nw-knop--rand:hover { background: var(--nw-inkt); color: #fff; }
.nw-knop--licht { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.nw-knop--licht:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.nw-knop--wereld { background: var(--w-kleur); color: var(--w-op); }
.nw-knop--wereld:hover { color: var(--w-op); box-shadow: var(--nw-schaduw-m); }
.nw-knop--klein { min-height: 44px; padding: 9px 16px; font-size: .94rem; }
.nw-knop--blok { display: flex; width: 100%; }
.nw-knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── Pillen (filters, leeftijd, budget) en chips (labels) ──────────
   Pil = klikbaar: <a class="nw-pil"> of <button class="nw-pil" aria-pressed>.
   Actief: .is-aan, aria-current of aria-pressed="true".
   Chip = alleen een label: <span class="nw-chip">. */
.nw-pillen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nw-pil { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
    padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--nw-rand-sterk); background: var(--nw-wit);
    font-family: var(--nw-kop-font); font-weight: 700; font-size: .92rem; line-height: 1.1; color: var(--nw-inkt);
    text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.nw-pil:hover { border-color: var(--nw-navy); color: var(--nw-navy); }
.nw-pil.is-aan, .nw-pil[aria-current], .nw-pil[aria-pressed="true"] { background: var(--nw-navy); border-color: var(--nw-navy); color: #fff; }
.nw-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
    font-size: .84rem; font-weight: 500; line-height: 1.3; background: var(--w-tint); color: var(--w-inkt); }
.nw-chip--licht { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #fff; }
.nw-chip--licht .nw-icoon { color: var(--nw-geel); }

/* Icoon in een gekleurd vierkant (wereldkleur). --klein 32px, --licht op canvas. */
.nw-icoontegel { width: 42px; height: 42px; flex: none; border-radius: 12px; display: inline-grid; place-items: center;
    background: var(--w-kleur); color: var(--w-op); }
.nw-icoontegel--klein { width: 32px; height: 32px; border-radius: 9px; }
.nw-icoontegel--licht { background: var(--nw-canvas-2); color: var(--nw-navy); }

/* ── Prijs, leeftijd en waarschuwing ──────────────────────────── */
.nw-prijs { font-family: var(--nw-kop-font); font-weight: 700; color: var(--nw-inkt); font-variant-numeric: tabular-nums; }
.nw-prijs s { color: var(--nw-inkt-zacht); font-weight: 600; margin-right: 6px; }

.nw-leeftijd { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 8px;
    background: var(--nw-navy); color: #fff; font-family: var(--nw-kop-font); font-weight: 700; font-size: .78rem; line-height: 1.3; }

.nw-waarschuwing { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 14px;
    border-radius: var(--nw-r-s); background: #FFF6DB; border: 1px solid #F5D37A; color: #3B2A00;
    font-size: .9rem; line-height: 1.5; }
.nw-waarschuwing .nw-icoon { color: #7A5200; margin-top: 1px; }

/* ── Kruimelpad (nw_kruimels()) ───────────────────────────────── */
.nw-kruimels ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px;
    font-size: .9rem; color: var(--nw-inkt-zacht); }
.nw-kruimels li { display: inline-flex; align-items: center; }
.nw-kruimels li + li::before { content: '›'; margin: 0 8px; color: var(--nw-rand-sterk); font-weight: 700; }
/* Doel van 44 bij 44. De negatieve marge houdt de regel even hoog als voorheen (36px); de
   row-gap van 8px hierboven zorgt dat de doelen van twee regels elkaar dan niet overlappen. */
.nw-kruimels a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
    margin-block: -4px; color: var(--nw-inkt-zacht); text-decoration: none; }
.nw-kruimels a:hover { color: var(--nw-navy); text-decoration: underline; text-underline-offset: 3px; }
.nw-kruimels [aria-current] { color: var(--nw-inkt); font-weight: 600; }

/* ── Productraster en productkaart (views/nieuw/_productkaart.php) ──
   <div class="nw-raster [nw-raster--4|--3] [nw-raster--een-wereld]">…kaarten…</div> */
.nw-raster { display: grid; gap: clamp(12px, 1.8vw, 22px);
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
/* --4 heeft altijd 2 of 4 kolommen: de lijsten tellen 4, 8 of 12 kaarten, en in 3 kolommen
   bleef er een gat in de laatste rij. Vier kolommen vanaf 900px (kaarten van ruim 190px). */
@media (min-width: 641px) {
    .nw-raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .nw-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .nw-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .nw-raster, .nw-raster--3, .nw-raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nw-raster--een-wereld .nw-kaart-wereld { display: none; }

.nw-kaart { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
    padding: 8px 8px 14px; border-radius: 20px; background: var(--nw-wit); border: 1px solid var(--nw-rand);
    color: var(--nw-inkt); text-decoration: none; box-shadow: var(--nw-schaduw-s);
    transition: transform .25s var(--nw-vloei), box-shadow .25s, border-color .2s; }
.nw-kaart:hover { transform: translateY(-3px); box-shadow: var(--nw-schaduw-m); border-color: var(--w-kleur); color: var(--nw-inkt); }
.nw-kaart:focus-visible { outline: 3px solid var(--nw-navy); outline-offset: 3px; border-radius: 20px; }
/* 4:3 en cover: de productfoto's hebben een eigen lichte achtergrond en zijn meest
   liggend (diertjes 1525 x 1075); zo vult de foto het vak zonder witte randen. */
.nw-kaart-foto { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--nw-canvas); }
.nw-kaart-foto picture { display: contents; }
.nw-kaart-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
    transform: scale(var(--nw-foto-schaal, 1)); transition: transform .45s var(--nw-vloei); }
/* Staande foto (de borden, 3:4 en smaller): cover zou de stukken afsnijden. Dus heel
   in beeld en vergroot rond het midden, waar het bord staat. Links en rechts van de foto
   blijft een strook over; het verloop volgt de studioachtergrond van de bordfoto's (links
   #FAFAFA, rechts #F6F6F6), zodat de rand van de foto niet als een lichtere band opvalt. */
.nw-kaart-foto--staand { background: linear-gradient(90deg, #FAFAFA, #F6F6F6); --nw-foto-schaal: 1.55; }
.nw-kaart-foto--staand img { object-fit: contain; transform-origin: 50% 45%; }
.nw-kaart:hover .nw-kaart-foto img { transform: scale(calc(var(--nw-foto-schaal, 1) * 1.05)); }
/* Dunne streep in de wereldkleur onder de foto. */
.nw-kaart-foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--w-kleur); }
.nw-kaart-leeg { position: absolute; inset: 0; display: grid; place-items: center; background: var(--w-tint); color: var(--w-inkt); }
.nw-kaart-foto .nw-leeftijd { position: absolute; top: 8px; left: 8px; }
.nw-kaart-actie { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 999px;
    background: var(--nw-oranje-inkt); color: #fff; font-family: var(--nw-kop-font); font-weight: 700; font-size: .76rem; line-height: 1.35; }
.nw-kaart-tekst { display: flex; flex-direction: column; gap: 3px; padding: 0 6px; min-width: 0; }
.nw-kaart-wereld { font-size: .76rem; font-weight: 700; letter-spacing: .02em; color: var(--w-inkt);
    display: inline-flex; align-items: center; gap: 6px; }
.nw-kaart-wereld::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--w-kleur); flex: none; }
.nw-kaart-naam { font-family: var(--nw-kop-font); font-weight: 700; font-size: 1.02rem; line-height: 1.25; margin: 0;
    color: var(--nw-inkt); overflow-wrap: anywhere; }
.nw-kaart-prijs { font-size: 1rem; margin-top: 2px; }
@media (max-width: 640px) {
    .nw-kaart { padding: 6px 6px 12px; border-radius: 16px; gap: 8px; }
    .nw-kaart-foto { border-radius: 11px; }
    .nw-kaart-tekst { padding: 0 4px; }
    .nw-kaart-naam { font-size: .95rem; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .nw-knop, .nw-knop:hover, .nw-kaart, .nw-kaart:hover { transform: none; transition: none; }
    .nw-kaart-foto img, .nw-kaart:hover .nw-kaart-foto img { transform: scale(var(--nw-foto-schaal, 1)); transition: none; }
}

/* ── Oude views binnen de nieuwe kop en voet ─────────────────────
   Faq, winkelwagen, afrekenen, contact en de spelregelpagina's houden hun
   eigen stijl. Hun sticky zijbalken rekenden op de oude kop van ~96px. */
body.nw .cart-zijbalk, body.nw .bestel-overzicht-binnen { top: calc(var(--nw-kop-hoogte) + 20px); }
body.nw [id] { scroll-margin-top: calc(var(--nw-kop-hoogte) + 16px); }

/* Controle 28-9: de 404 schoof met een negatieve marge onder de oude doorzichtige kop;
   in de nieuwe opbouw liep hij over de topbalk heen. */
body.nw .content-404 { margin-top: 0; }
/* Contrast AA voor oude knoppen en labels in de nieuwe kop (wit op #F5901E was 2,4:1). */
body.nw .btn-primair { background: linear-gradient(180deg, #CF4A0D, #B93C0B); text-shadow: none; color: #fff; }
body.nw .btn-primair:hover, body.nw .btn-primair:focus-visible { background: linear-gradient(180deg, #C2410C, #A8350A); }
body.nw .btn-coral { background: #B93C0B; color: #fff; }
body.nw .btn-coral:hover, body.nw .btn-coral:focus-visible { background: #A8350A; }
body.nw .kruimels [aria-current] { color: var(--nw-inkt-zacht); }
body.nw .eyebrow.is-grape { color: var(--nw-navy-diep); background: #DCE3F5; }

/* Productfoto's met tekst in het beeld (bundels, mystery packs): heel tonen, leeftijd onderaan. */
.nw-kaart-foto--tekst { background: #FFFFFF; }
.nw-kaart-foto--tekst img { object-fit: contain; object-position: 50% 50%; }
.nw-kaart-foto--tekst .nw-leeftijd { top: auto; bottom: 12px; }