/* ── Zij-mandje (sept 2026) ── */
.njm-overlay{position:fixed;inset:0;background:rgba(17,29,51,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:9998}
.njm-overlay.open{opacity:1;pointer-events:auto}
#nj-mandje{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:#F7F3EC;box-shadow:-12px 0 40px rgba(26,41,71,.18);transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:9999;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#251508}
#nj-mandje.open{transform:none}
body.njm-open{overflow:hidden}
#nj-mandje.njm-bezig .njm-lijst,#nj-mandje.njm-bezig .njm-voet{opacity:.55;pointer-events:none}
.njm-kop{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px;border-bottom:1px solid #E2D5C3}
.njm-kop h2{font-family:'Lora',Georgia,serif;font-size:1.45rem;font-weight:600;color:#1A2947;margin:0}
.njm-aantal{font-size:.9rem;color:#7A6150;margin-left:auto;margin-right:14px}
.njm-sluit{background:none;border:0;width:36px;height:36px;border-radius:50%;font-size:1.5rem;line-height:1;color:#1A2947;cursor:pointer;display:flex;align-items:center;justify-content:center}
.njm-sluit:hover{background:#EDE6D8}
.njm-lijst{flex:1;overflow-y:auto;padding:6px 22px}
.njm-item{display:grid;grid-template-columns:72px 1fr 28px;gap:14px;padding:16px 0;border-bottom:1px solid #E2D5C3;align-items:start}
.njm-thumb{display:block;width:72px;height:72px;border:1px solid #E2D5C3;border-radius:10px;background:#fff;overflow:hidden}
.njm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.njm-naam{font-weight:700;color:#1A2947;text-decoration:none;font-size:.97rem;line-height:1.3;display:block}
.njm-naam:hover{color:#8F5A1E}
.njm-vari{font-size:.8rem;color:#7A6150;margin-top:3px}
.njm-regel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.njm-prijs{font-weight:700;color:#1A2947;white-space:nowrap}
.njm-x{background:none;border:0;color:#8A7A64;font-size:1.3rem;line-height:1;cursor:pointer;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.njm-x:hover{background:#EDE6D8;color:#8F5A1E}
#nj-mandje .nj-qty{display:inline-flex;align-items:center;border:1px solid #E2D5C3;border-radius:999px;background:#fff;overflow:hidden;height:38px}
#nj-mandje .nj-qty button{background:transparent;border:0;color:#1A2947;width:34px;height:38px;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
#nj-mandje .nj-qty button:hover{background:#F7F1E4}
#nj-mandje .nj-qty input{width:40px;height:38px;border:0;background:transparent;text-align:center;font-weight:700;color:#1A2947;padding:0;font-size:.95rem;-moz-appearance:textfield;appearance:textfield}
#nj-mandje .nj-qty input::-webkit-inner-spin-button,#nj-mandje .nj-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#nj-mandje .nj-qty input:focus{outline:none}
.njm-leeg{text-align:center;padding:60px 10px;color:#7A6150}
.njm-leeg .njm-btn{display:inline-block;width:auto;padding:12px 24px}
.njm-voet{padding:14px 22px 22px;border-top:1px solid #E2D5C3;background:#F7F3EC}
.njm-tot{display:flex;justify-content:space-between;font-size:.98rem;padding:4px 0}
.njm-tot b{color:#1A2947}
.njm-tot.njm-sub{font-weight:700;color:#1A2947}
.njm-gratis{font-size:.82rem;color:#8F5A1E;margin:10px 0 6px}
.njm-gratis-ok{color:#5f7a4a}
.njm-bar{height:5px;background:#E2D5C3;border-radius:999px;overflow:hidden;margin-bottom:14px}
.njm-bar i{display:block;height:100%;background:linear-gradient(90deg,#E0BE7A,#BC7C36);width:0;transition:width .4s}
.njm-couponform{display:flex;gap:0;margin-bottom:8px}
.njm-couponform input{flex:1;min-width:0;border:1px solid #E2D5C3;border-right:0;border-radius:12px 0 0 12px;padding:10px 14px;font:inherit;font-size:.9rem;background:#fff;color:#251508}
.njm-couponform input:focus{outline:none;border-color:#1A2947}
.njm-couponform button{background:#1A2947;color:#F7F3EC;border:0;border-radius:0 12px 12px 0;padding:0 18px;font-weight:700;cursor:pointer;font-size:.88rem}
.njm-couponform button:hover{background:#8F5A1E}
.njm-coupons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.njm-coupon{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #E2D5C3;border-radius:999px;padding:3px 6px 3px 12px;font-size:.8rem;font-weight:700;color:#5f7a4a;text-transform:uppercase}
.njm-coupon button{background:none;border:0;color:#8A7A64;cursor:pointer;font-size:1rem;line-height:1;width:20px;height:20px;border-radius:50%}
.njm-fout{background:#fff;border:1px solid #E2D5C3;border-left:3px solid #B4443A;border-radius:10px;padding:8px 12px;font-size:.85rem;color:#8a3a32;margin-bottom:8px}
.njm-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;border-radius:999px;padding:14px 20px;font-weight:700;font-size:.98rem;text-decoration:none;cursor:pointer;margin-top:8px;border:2px solid #1A2947;background:#1A2947;color:#F7F3EC;transition:background .2s,color .2s}
.njm-btn:hover{background:#8F5A1E;border-color:#8F5A1E;color:#F7F3EC}
.njm-btn-lijn{background:transparent;color:#1A2947}
.njm-btn-lijn:hover{background:#1A2947;color:#F7F3EC}
.njm-verder{display:block;text-align:center;margin-top:12px;font-size:.88rem;color:#7A6150;text-decoration:underline;background:none;border:0;width:100%;cursor:pointer;font-family:inherit}
.njm-verder:hover{color:#8F5A1E}
@media(prefers-reduced-motion:reduce){#nj-mandje,.njm-overlay,.njm-bar i{transition:none}}

#nj-mandje [hidden]{display:none!important}
#nj-mandje .njm-couponform input[type=text]{flex:1 1 auto;width:auto!important;min-width:0;border-radius:12px 0 0 12px!important;padding:10px 14px!important;font-size:.9rem!important;height:42px;box-sizing:border-box}
#nj-mandje .njm-couponform button[type=submit]{flex:0 0 auto;width:auto!important;border-radius:0 12px 12px 0!important;padding:0 18px!important;height:42px;font-size:.88rem!important;transform:none!important}
#nj-mandje .njm-sluit{border:1px solid #E2D5C3}
#nj-mandje .nj-qty button{border-radius:0!important;padding:0!important;font-weight:400!important;box-shadow:none!important;transform:none!important}

#nj-mandje a.njm-btn,#nj-mandje a.njm-btn:visited{color:#F7F3EC!important;text-decoration:none!important}
#nj-mandje a.njm-btn.njm-btn-lijn,#nj-mandje a.njm-btn.njm-btn-lijn:visited{color:#1A2947!important}
#nj-mandje a.njm-btn.njm-btn-lijn:hover{color:#F7F3EC!important}


.njm-toast{position:fixed;left:12px;right:12px;bottom:12px;background:#fff;border:1px solid #E2D5C3;border-radius:16px;padding:14px 16px 16px;box-shadow:0 12px 34px rgba(26,41,71,.22);transform:translateY(120%);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;z-index:9990;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#251508;max-width:440px;margin:0 auto}
.njm-toast.open{transform:none;opacity:1}
.njm-toast-kop{display:flex;align-items:flex-start;gap:10px}
.njm-toast-kop p{margin:0;flex:1;font-size:.95rem;line-height:1.4;padding-top:2px}
.njm-toast-kop p b{color:#1A2947}
.njm-toast-ok{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#5f7a4a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700}
.njm-toast-x{flex:0 0 auto;background:none;border:0;font-size:1.4rem;line-height:1;color:#8A7A64;cursor:pointer;padding:0;width:28px;height:28px;border-radius:50%}
.njm-toast-knoppen{display:flex;gap:10px;margin-top:12px}
.njm-toast-knoppen .njm-btn{margin:0;padding:11px 14px;font-size:.88rem;flex:1}
.njm-toast-knoppen a.njm-btn{color:#F7F3EC!important;text-decoration:none!important}
.njm-toast-knoppen .njm-btn-lijn{color:#1A2947!important}
@media(min-width:701px){.njm-toast{left:auto;right:20px;bottom:20px;width:360px}}

/* popup compacter */
.njm-toast{padding:12px 14px 12px}
.njm-toast-kop p{font-size:.88rem;line-height:1.35}
.njm-toast-ok{width:22px;height:22px;font-size:.8rem}
.njm-toast-knoppen{margin-top:10px;justify-content:flex-start}
.njm-toast-knoppen .njm-btn{flex:0 0 auto;width:auto;padding:8px 14px;font-size:.8rem;border-width:1.5px}
@media(max-width:700px){
.njm-toast{left:10px;right:10px;bottom:10px;padding:10px 12px}
.njm-toast-kop p{font-size:.84rem}
.njm-toast-knoppen{margin-top:8px;gap:8px;justify-content:center}
.njm-toast-knoppen .njm-btn{padding:7px 12px;font-size:.78rem}
.njm-toast-knoppen .njm-toast-verder{display:none}
}

/* mobiel zij-mandje: samenvatting + afrekenknop bovenaan */
.njm-top{display:none;padding:14px 22px 6px;border-bottom:1px solid #E2D5C3}
.njm-top-rij{display:flex;justify-content:space-between;align-items:center;font-size:.95rem;color:#251508}
.njm-top-rij b{color:#1A2947;font-size:1.05rem}
.njm-top-gratis{font-size:.85rem;color:#8F5A1E;margin:8px 0 10px}
.njm-top-gratis b{color:#8F5A1E}
#nj-mandje a.njm-top-btn{margin:0 0 10px}
@media(max-width:700px){
.njm-top{display:block}
#nj-mandje .njm-voet .njm-tot,#nj-mandje .njm-voet .njm-gratis,#nj-mandje .njm-voet .njm-bar,#nj-mandje .njm-voet a.njm-btn:not(.njm-btn-lijn),#nj-mandje .njm-voet .njm-verder{display:none}
#nj-mandje .njm-voet{padding-top:10px}
#nj-mandje .njm-voet a.njm-btn-lijn{border:0!important;background:none!important;color:#1A2947!important;text-decoration:underline!important;padding:6px 0;font-size:.92rem}
#nj-mandje .njm-voet .njm-couponform{margin-bottom:4px}
}
#nj-mandje{height:100vh;height:100dvh;top:0;bottom:0}
.njm-overlay{height:100vh;height:100dvh}
@media(max-width:700px){#nj-mandje .njm-voet{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

/* mobiel: paneel niet schermvullend, links blijft een strook van de site zichtbaar */
@media(max-width:700px){#nj-mandje{width:calc(100% - 44px);max-width:440px;box-shadow:-12px 0 40px rgba(26,41,71,.28)}.njm-overlay{background:rgba(17,29,51,.5)}}

/* zelfde lettertype voor alle cijfers en velden in het mandje */
#nj-mandje,#nj-mandje *,.njm-toast,.njm-toast *{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important}
#nj-mandje .njm-prijs,#nj-mandje .njm-tot b,#nj-mandje .njm-top-sub,#nj-mandje .nj-qty input,#nj-mandje .njm-aantal,#nj-mandje .njm-top-aantal{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#nj-mandje h2,#nj-mandje .njm-kop h2{font-family:'Lora',Georgia,serif!important}
.nj .nj-qty.kaart input.qty,.nj .nj-qty.kaart button,body.woocommerce-cart .nj-qty input.qty,body.woocommerce-cart .nj-qty button{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important}
