.pu-knop{--pu-knop-hoogte: 48px;--pu-knop-padding: 0 28px;--pu-knop-fs: var(--pu-knoplabel);--pu-knop-lh: var(--pu-knoplabel-lh);--pu-knop-ls: normal;display:inline-flex;align-items:center;justify-content:center;gap:var(--pu-s-8);min-height:var(--pu-knop-hoogte);padding:var(--pu-knop-padding);border:1px solid transparent;border-radius:var(--pu-radius-pil);font-family:var(--pu-font);font-size:var(--pu-knop-fs);font-weight:var(--pu-fw-semi);letter-spacing:var(--pu-knop-ls);line-height:var(--pu-knop-lh);text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease}.hdt-btn.hdt-uppercase{text-transform:none}.pu-knop:focus-visible{outline:2px solid var(--pu-amber);outline-offset:2px}.pu-knop__icoon{display:inline-flex;flex:0 0 auto}.pu-knop--klein{--pu-knop-hoogte: 36px;--pu-knop-padding: 0 18px;--pu-knop-fs: var(--pu-small);--pu-knop-lh: var(--pu-small-lh);position:relative}.pu-knop--klein:after{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}.pu-knop--groot{--pu-knop-hoogte: 52px;--pu-knop-padding: 0 32px}.pu-knop--icoon{--pu-knop-padding: 0 13px;width:48px;min-width:48px}.pu-knop--vol{width:100%}.pu-knop--primair{background:var(--pu-green);color:var(--pu-white)}@media(hover:hover)and (pointer:fine){.pu-knop--primair:hover{background:var(--pu-green-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgb(var(--pu-green-rgb) / .26)}}.pu-knop--primair:active{background:var(--pu-green-dark);transform:none;box-shadow:inset 0 2px 6px #0000002e}.pu-knop--op-groen{background:var(--pu-cream);color:var(--pu-green-dark)}@media(hover:hover)and (pointer:fine){.pu-knop--op-groen:hover{background:var(--pu-white);transform:translateY(-1px)}}@media(hover:hover)and (pointer:fine){.pu-knop--op-groen:active{background:var(--pu-white);transform:none;box-shadow:inset 0 2px 6px #0000001f}}.pu-knop--op-groen:focus-visible{outline:2px solid var(--pu-cream);outline-offset:3px}.pu-knop--promo{background:var(--pu-gold);border-color:var(--pu-gold-line);color:var(--pu-ink-strong)}.pu-knop--promo:active{background:var(--pu-amber);border-color:var(--pu-amber);color:var(--pu-white)}@media(hover:hover)and (pointer:fine){.pu-knop--promo:hover{background:var(--pu-amber);border-color:var(--pu-amber);color:var(--pu-white);transform:translateY(-1px)}}.pu-knop--promo:focus-visible{outline-color:var(--pu-green)}.pu-knop--campagne{background:var(--pu-bf-goud);border-color:var(--pu-bf-goud);color:var(--pu-bf-op-goud)}.pu-knop--campagne:active{background:var(--pu-bf-goud-hover);border-color:var(--pu-bf-goud-hover);color:var(--pu-bf-op-goud)}@media(hover:hover)and (pointer:fine){.pu-knop--campagne:hover{background:var(--pu-bf-goud-hover);border-color:var(--pu-bf-goud-hover);color:var(--pu-bf-op-goud);transform:translateY(-1px)}}.pu-knop--campagne:focus-visible{outline-color:var(--pu-green-dark)}.pu-knop--omlijnd{background:transparent;border-color:var(--pu-green);color:var(--pu-green)}@media(hover:hover)and (pointer:fine){.pu-knop--omlijnd:hover{background:var(--pu-green-pale);color:var(--pu-green-dark)}}.pu-knop--omlijnd:active{background:var(--pu-green-line);color:var(--pu-green-dark);box-shadow:inset 0 2px 6px #0000002e}.pu-knop--zacht{--pu-knop-padding: 0 22px;background:var(--pu-green-pale);border-color:var(--pu-green-line);color:var(--pu-green)}@media(hover:hover)and (pointer:fine){.pu-knop--zacht:active{background:var(--pu-green);border-color:var(--pu-green);color:var(--pu-white)}}@media(hover:hover)and (pointer:fine){.pu-knop--zacht:hover{background:var(--pu-green);border-color:var(--pu-green);color:var(--pu-white)}}.pu-knop--tekst{--pu-knop-padding: 0;position:relative;min-height:0;background:none;border-color:transparent;color:var(--pu-ink-muted);text-decoration:underline;text-underline-offset:3px}.pu-knop--tekst:after{content:"";position:absolute;top:-14px;right:-8px;bottom:-14px;left:-8px}@media(hover:hover)and (pointer:fine){.pu-knop--tekst:hover{color:var(--pu-green)}}.pu-knop--tekst:active{color:var(--pu-green-dark)}.pu-knop--tekst-zin{font-size:var(--pu-micro);font-weight:var(--pu-fw-normal);letter-spacing:normal;text-transform:none}.pu-knop--verwijderen{background:var(--pu-danger-pale);border-color:transparent;color:var(--pu-danger)}@media(hover:hover)and (pointer:fine){.pu-knop--verwijderen:hover{background:var(--pu-danger-pale-2);color:var(--pu-danger-dark)}}.pu-knop--verwijderen:active{background:var(--pu-danger-pale-2);color:var(--pu-danger-dark);box-shadow:inset 0 2px 6px #0000002e}.pu-knop--op-video.pu-knop--primair{background:var(--pu-cream);border-color:transparent;color:var(--pu-ink-strong);box-shadow:0 8px 24px #0000003d}@media(hover:hover)and (pointer:fine){.pu-knop--op-video.pu-knop--primair:hover{background:var(--pu-white);color:var(--pu-ink-strong)}}.pu-knop--op-video.pu-knop--omlijnd{background:transparent;border-color:rgb(var(--pu-cream-rgb) / .62);color:var(--pu-cream)}@media(hover:hover)and (pointer:fine){.pu-knop--op-video.pu-knop--omlijnd:hover{background:rgb(var(--pu-cream-rgb) / .12);border-color:var(--pu-cream);color:var(--pu-cream)}}.pu-knop[disabled],.pu-knop[disabled]:hover,.pu-knop[disabled]:active{background:var(--pu-green-pale);border-color:var(--pu-green-line);color:var(--pu-ink);cursor:not-allowed;transform:none;box-shadow:none}.pu-knop--tekst[disabled],.pu-knop--tekst[disabled]:hover{background:none;border-color:transparent;text-decoration:none}.pu-knop{--pu-knop-rondje: var(--pu-ink-strong)}.pu-knop--primair,.pu-knop--promo{--pu-knop-rondje: var(--pu-white)}.pu-knop--zacht,.pu-knop--omlijnd,.pu-knop--tekst{--pu-knop-rondje: var(--pu-green)}.pu-knop[aria-busy=true]{position:relative;color:transparent;cursor:default;transition:none;pointer-events:none}.pu-knop[aria-busy=true]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:18px;height:18px;margin:auto;border:2px solid var(--pu-knop-rondje);border-top-color:transparent;border-radius:50%;animation:pu-knop-draai .7s linear infinite}.pu-knop--klein[aria-busy=true]:after{width:15px;height:15px}@keyframes pu-knop-draai{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pu-knop[aria-busy=true]:after{animation:pu-knop-pols 1.1s ease-in-out infinite;border-top-color:var(--pu-knop-rondje)}}@keyframes pu-knop-pols{0%,to{opacity:1}50%{opacity:.3}}@media(prefers-reduced-motion:reduce){.pu-knop{transition:background-color .16s ease,border-color .16s ease,color .16s ease}.pu-knop:hover{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/pu-knop.css.map */