/* ═══════════════════════════════════════════════════════════════
   MorphiToys, nieuwe opbouw: productpagina (views/nieuw/product.php).
   Bouwt voort op de oude css/paginas/product.css, die NA dit bestand
   laadt. Waar dit bestand een oude regel overschrijft, staat er daarom
   body.nw .nw-product voor (hogere specificiteit), nooit globaal.
   ═══════════════════════════════════════════════════════════════ */

/* ── Wereldkleur in de kop: streep bovenin en een tint die wegloopt ── */
.nw-product { border-top: 5px solid var(--w-kleur);
    background: linear-gradient(180deg, var(--w-tint) 0, var(--nw-canvas) min(520px, 70vh)) no-repeat; }
/* Zelfde zijmarge als de kop en de andere nieuwe pagina's (was --pad-x). */
body.nw .nw-product .product-detail { padding-top: clamp(16px, 2.4vw, 28px); padding-inline: var(--nw-rand-x); }
body.nw .nw-product .nw-kruimels { position: relative; z-index: 1; margin-bottom: clamp(16px, 2.4vw, 26px); }
body.nw .nw-product .nw-kruimels a:hover { color: var(--nw-inkt); }

/* Koopvak blijft onder de nieuwe (lagere) kop hangen in plaats van onder de oude. */
body.nw .nw-product .product-info { top: calc(var(--nw-kop-hoogte) + 20px); }

/* Sticker op de foto en het label boven de titel in de wereldkleur. */
body.nw .nw-product .galerij-sticker .nw-icoon { color: var(--w-kleur); }
.nw-product-label { align-self: flex-start; font-family: var(--nw-kop-font); font-weight: 700; font-size: .86rem; }
.nw-product-label .nw-icoon, .nw-product-label .icoon { color: var(--w-inkt); }

/* ── Prijs met leeftijdsbadge ernaast ────────────────────────── */
.nw-prijsrij { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.nw-leeftijd--groot { padding: 5px 11px; border-radius: 10px; font-size: .95rem; }
/* Betaalregel onder de knop: --ink-faint haalde op wit maar 3:1. */
body.nw .nw-product .koop-gerust { color: var(--nw-inkt-zacht); }
body.nw .nw-product .koop-gerust .nw-icoon { color: #0A6f7c; }

/* ── Koopknoppen (in winkelwagen, bundel, lightbox, review) ──────
   Wit op het oude oranje verloop van .btn-primair haalde 2,3 tot 2,8:1.
   Zelfde donkere oranje als .nw-knop--oranje (4,5 tot 5,7:1). De bundel-
   lightbox verhuist bij het laden naar body, dus buiten .nw-product. */
body.nw .nw-product .btn-primair, body.nw .bundel-lightbox .btn-primair {
    background: linear-gradient(180deg, #CF4A0D, #B93C0B); text-shadow: none; box-shadow: 0 10px 24px rgba(207, 74, 13, .32); }
body.nw .nw-product .btn-primair:hover, body.nw .bundel-lightbox .btn-primair:hover {
    background: linear-gradient(180deg, #C2410C, #A8350A); box-shadow: 0 14px 30px rgba(207, 74, 13, .38); }
/* Toegevoegd (main.js zet .gelukt): groen blijft, maar donkerder dan --ok (wit 5,4:1 in plaats van 3,5:1). */
body.nw .nw-product .koop-knop.gelukt, body.nw .nw-product .koop-knop.gelukt:hover {
    background: #157A45; box-shadow: 0 16px 34px rgba(21, 122, 69, .3); }

/* Bundelkeuze: het script zet hidden op de teller, de minknop en "Leegmaken", maar
   display:grid/inline-flex uit de oude stijl won het van het hidden-attribuut. */
body.nw .nw-product .bundel-badge[hidden], body.nw .nw-product .bundel-stappers button[hidden],
body.nw .nw-product .bundel-leeg[hidden] { display: none; }

/* Staande foto (de borden): het vak vullen in plaats van een smalle strook in een vierkant. */
body.nw .nw-product .nw-galerij--staand #hoofdfoto { object-fit: cover; object-position: 50% 46%; border-radius: var(--nw-r-m); }
body.nw .nw-product .nw-galerij--staand .thumbs button img { object-fit: cover; border-radius: 8px; }

/* Wettelijke waarschuwing onder het koopformulier. */
.nw-product-waarschuwing { margin-top: 18px; }

/* ── Zo speel je het (borden) ────────────────────────────────── */
.nw-speluitleg { position: relative; z-index: 1; margin-top: clamp(40px, 6vw, 72px);
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 22px clamp(28px, 4vw, 56px); align-items: center;
    padding: clamp(24px, 3.6vw, 44px); border-radius: var(--nw-r-l); background: var(--nw-navy); color: #E7ECFA;
    box-shadow: var(--nw-schaduw-m); }
.nw-speluitleg :focus-visible { outline-color: var(--nw-geel); }
.nw-speluitleg-icoon { width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 192, 32, .16); color: var(--nw-geel); }
.nw-speluitleg h2 { margin: 14px 0 0; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 700; }
.nw-speluitleg p { margin: 10px 0 0; color: #C9D3F2; line-height: 1.6; max-width: 42ch; }
.nw-speluitleg-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nw-speluitleg-links a { display: flex; align-items: center; gap: 13px; min-height: 68px; padding: 12px 16px; border-radius: 16px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); color: #fff; text-decoration: none;
    transition: background-color .15s, border-color .15s; }
.nw-speluitleg-links a:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); color: #fff; }
.nw-speluitleg-boek { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px;
    background: rgba(255, 192, 32, .16); color: var(--nw-geel); }
.nw-speluitleg-naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nw-speluitleg-naam strong { font-family: var(--nw-kop-font); font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.nw-speluitleg-naam span { font-size: .87rem; line-height: 1.4; color: #C9D3F2; }
.nw-speluitleg-pijl { margin-left: auto; color: #C9D3F2; transition: transform .2s var(--nw-vloei); }
.nw-speluitleg-links a:hover .nw-speluitleg-pijl { transform: translateX(3px); color: #fff; }

/* ── Past erbij ──────────────────────────────────────────────── */
.nw-past-erbij { border-top: 1px solid var(--nw-rand); }

/* ═══ Responsief ═════════════════════════════════════════════ */
@media (max-width: 900px) {
    .nw-speluitleg { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .nw-speluitleg-pijl, .nw-speluitleg-links a:hover .nw-speluitleg-pijl { transition: none; transform: none; }
}