/* Unter checkout · de productschermen uit Figma 1980:1555 (website-stijl), nagebouwd in code.
   Eén kaart is 420 x 660 en schaalt als geheel: <div class="pd-s" style="--s:.6">…</div>, of laat
   checkout.js de schaal kiezen met <div class="pd-fit"><div class="pd-s">…</div></div>.
   Zelfde onderdelen als het hoofdstuk Product in de merkgids (merk/index.html#product). */
.pd-card{--pd-tint:#EEF1EC;width:420px;height:660px;box-sizing:border-box;background:#fff;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:26px;box-shadow:0 30px 70px -24px rgba(10,11,13,.35);color:var(--ink);text-align:left;letter-spacing:0}
.pd-card p{margin:0}
.pd-card.host{--pd-tint:#F2EFFF}
.pd-amt small{display:block;font-size:15px;color:var(--ink-3);margin-bottom:6px}
.pd-amt b{display:block;font-weight:600;font-size:56px;line-height:1;letter-spacing:-2.24px;white-space:nowrap}
.pd-amt b span{font-size:20px;font-weight:500;letter-spacing:0;margin-left:6px}
.pd-amt i{display:block;font-style:normal;font-size:15px;color:var(--ink-3);margin-top:10px}
.pd-q{font-weight:600;font-size:18px;letter-spacing:-.18px}
.pd-rows{display:flex;flex-direction:column;gap:12px}
.pd-row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:#F3F5F2;min-height:76px;box-sizing:border-box}
.pd-row.m{min-height:60px;padding:10px 14px}
.pd-row.sel{background:var(--pd-tint)}
.pd-row.off{opacity:.45}
.pd-row img{width:40px;height:40px;flex:none;border-radius:10px;object-fit:contain}
.pd-ic{width:40px;height:40px;flex:none;border-radius:10px;background:#fff;display:grid;place-items:center}
.pd-ic svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pd-ic.k{background:var(--ink)} .pd-ic.k svg{stroke:#fff}
.pd-row .t{flex:1;min-width:0}
.pd-row .t b{display:block;font-weight:500;font-size:17px;letter-spacing:-.17px}
.pd-row .t small{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}
.pd-tag{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.pd-chk{width:22px;height:22px;flex:none;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.pd-chk svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pd-sp{flex:1}
.pd-btn{height:56px;flex:none;border-radius:999px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:17px}
.pd-btn.pale{background:#E9ECE8;color:var(--ink)}
.pd-btn.wait{background:#E9ECE8;color:var(--ink-3)}
.pd-btns{display:flex;flex-direction:column;gap:12px}
.pd-lnk{text-align:center;font-size:17px;font-weight:500;padding:4px 0 2px}
.pd-help{text-align:center;font-size:14px;line-height:1.45;color:var(--ink-3)}
.pd-kvs{display:flex;flex-direction:column}
.pd-kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid #ECEEEB;font-size:16px}
.pd-kv:first-child{border-top:0}
.pd-kv span:first-child{color:var(--ink-3)}
.pd-kv span:last-child{font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap}
.pd-kv img{width:24px;height:24px}
.pd-kv .mono{font-family:var(--mono);font-weight:500;font-size:15px}
.pd-note{background:#F3F5F2;border-radius:18px;padding:16px 18px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.pd-note b{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;font-size:16px;margin-bottom:4px}
.pd-note b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--withheld);flex:none}
.pd-note.ok b::before{background:var(--lime)}
.pd-note p{padding-left:18px}
.pd-mid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-top:26px}
.pd-mid h6,.pd-mid .pd-h{font-size:26px;font-weight:600;letter-spacing:-.6px;margin:6px 0 0}
.pd-mid p{font-size:15px;line-height:1.45;color:var(--ink-3);max-width:32ch}
.pd-wl{width:88px;height:88px;border-radius:50%;background:#F3F5F2;display:grid;place-items:center}
.pd-wl img{width:50px;height:50px;border-radius:12px}
.pd-spin{width:64px;height:64px;border-radius:50%;border:3px solid #E5E8E4;border-top-color:var(--ink);border-right-color:var(--ink);animation:pdspin 1.4s linear infinite}
@keyframes pdspin{to{transform:rotate(360deg)}}
.pd-done{width:72px;height:72px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.pd-done svg{width:30px;height:30px;fill:none;stroke:var(--lime);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pd-addr{background:#F3F5F2;border-radius:18px;padding:16px;display:flex;gap:16px;align-items:center}
.pd-qr{width:104px;height:104px;flex:none;background:#fff;border-radius:10px;padding:8px;box-sizing:border-box}
.pd-qr svg{width:100%;height:100%;display:block}
.pd-addr .lb{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3)}
.pd-addr code{display:block;font-family:var(--mono);font-size:14px;line-height:1.45;margin:6px 0 10px;word-break:break-all}
.pd-addr .cp{display:inline-flex;height:32px;padding:0 14px;border-radius:999px;background:#E9ECE8;align-items:center;font-size:14px;font-weight:500}
.pd-wait{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600}
.pd-wait i{width:16px;height:16px;border-radius:50%;border:2px solid #E5E8E4;border-top-color:var(--ink);animation:pdspin 1.4s linear infinite}
.pd-wait span{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:14px;color:var(--ink-3)}
.pd-fine{font-size:14px;line-height:1.45;color:var(--ink-3)}
/* schaal: de kaart blijft 420 × 660 en schaalt als geheel */
.pd-s{--s:.6;--w:420px;--h:660px;width:calc(var(--w) * var(--s));height:calc(var(--h) * var(--s));flex:none;position:relative}
.pd-s>.pd-card{width:var(--w);height:var(--h);transform:scale(var(--s));transform-origin:0 0;position:absolute;left:0;top:0}
/* in een telefoon: het scherm is de kaart */
.pd-s.ph>.pd-card{padding:0;box-shadow:none;border-radius:0;gap:22px}
@media (prefers-reduced-motion:reduce){.pd-spin,.pd-wait i{animation:none}}