.naamletters{display:block}.naamletters__heading{margin:0 0 .5rem}.naamletters__help{margin:0 0 1.5rem;font-size:1.4rem;line-height:calc(1 + .5 / var(--font-body-scale));color:rgba(var(--color-foreground),.75)}.naamletters__letters{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-bottom:2rem}.naamletters__boxes{display:flex;flex-wrap:wrap;gap:.6rem}.naamletters__box{--naamletters-box-size: 5.2rem;position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--naamletters-box-size);height:var(--naamletters-box-size);border:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity));border-radius:var(--inputs-radius);background-color:rgb(var(--color-background));background-image:var(--naamletters-fabric-image, none);background-position:center;background-size:cover;cursor:text;transition:border-color var(--duration-short) ease,outline-color var(--duration-short) ease}.naamletters__box:focus-within{border-style:dashed;border-color:rgba(var(--color-foreground),.8)}.naamletters__box.is-active{border-color:rgb(var(--color-foreground));outline:.2rem solid rgba(var(--color-foreground),.4);outline-offset:.2rem}.naamletters__letter{box-sizing:border-box;width:3.2rem;height:3.2rem;padding:0;border:0;border-radius:50%;background:transparent;color:rgb(var(--color-foreground));font-family:var(--font-heading-family);font-size:2rem;font-weight:700;line-height:1;text-align:center;text-transform:uppercase;caret-color:rgb(var(--color-foreground));-webkit-appearance:none;appearance:none}.naamletters__letter:focus,.naamletters__letter:focus-visible{outline:none;box-shadow:none}.naamletters__box.is-digit .naamletters__letter{font-family:var(--font-body-family);font-weight:var(--font-body-weight, 400)}.naamletters__box.has-fabric .naamletters__letter{background:rgba(var(--color-background),.85);box-shadow:0 0 0 .1rem rgba(var(--color-foreground),.15)}.naamletters__count{display:inline-flex;align-items:center;height:4.4rem;border:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity));border-radius:var(--inputs-radius);background-color:rgb(var(--color-background))}.naamletters__count-button{display:flex;align-items:center;justify-content:center;width:4.4rem;height:100%;padding:0;border:0;border-radius:var(--inputs-radius);background:transparent;color:rgb(var(--color-foreground));cursor:pointer}.naamletters__count-button svg{width:1rem;height:1rem;pointer-events:none}.naamletters__count-button:disabled{opacity:.5;cursor:not-allowed}.naamletters__count-button:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:-.3rem}.naamletters__count-value{min-width:8rem;font-size:1.4rem;text-align:center}.naamletters__palette{min-width:0;margin:0 0 1.5rem;padding:0;border:0}.naamletters__palette>.form__label{display:block;margin-bottom:1rem}.naamletters__fabrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));gap:1.2rem 1rem}.naamletters__fabric{--naamletters-fabric-size: 6.4rem;--naamletters-zoom-size: 2.8rem;position:relative;min-width:0}.naamletters__fabric-label{display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;text-align:center}.naamletters__fabric-image{display:block;width:var(--naamletters-fabric-size);height:var(--naamletters-fabric-size);overflow:hidden;border-radius:50%;background-color:rgba(var(--color-foreground),.04);outline:.1rem solid rgba(var(--color-foreground),.2);outline-offset:.3rem;transition:outline-color var(--duration-short) ease,outline-width var(--duration-short) ease}.naamletters__fabric-image img,.naamletters__fabric-image svg{display:block;width:100%;height:100%;object-fit:cover}.naamletters__fabric-name{font-size:1.2rem;line-height:1.3;color:rgba(var(--color-foreground),.85);overflow-wrap:anywhere}.naamletters__fabric-label:hover .naamletters__fabric-image{outline-color:rgba(var(--color-foreground),.5)}.naamletters__fabric-input:checked+.naamletters__fabric-label .naamletters__fabric-image{outline:.2rem solid rgb(var(--color-foreground))}.naamletters__fabric-input:checked+.naamletters__fabric-label .naamletters__fabric-name{font-weight:700;color:rgb(var(--color-foreground))}.naamletters__fabric-input:focus-visible+.naamletters__fabric-label .naamletters__fabric-image{outline:.2rem solid rgba(var(--color-foreground),.5);box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 .1rem .5rem rgba(var(--color-foreground),.25)}.naamletters__fabric-zoom{position:absolute;top:calc(var(--naamletters-fabric-size) * .1464 - var(--naamletters-zoom-size) / 2);left:calc(50% + var(--naamletters-fabric-size) * .3536 - var(--naamletters-zoom-size) / 2);display:flex;align-items:center;justify-content:center;width:var(--naamletters-zoom-size);height:var(--naamletters-zoom-size);padding:0;border:.1rem solid rgba(var(--color-foreground),.2);border-radius:50%;background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 .1rem .4rem rgba(var(--color-shadow),.15);cursor:zoom-in;transition:border-color var(--duration-short) ease,transform var(--duration-short) ease}.naamletters__fabric-zoom .svg-wrapper{width:1.4rem;height:1.4rem;pointer-events:none}.naamletters__fabric-zoom:hover{border-color:rgba(var(--color-foreground),.6);transform:scale(1.08)}.naamletters__fabric-zoom:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:.2rem}.naamletters__zoom{box-sizing:border-box;width:min(64rem,calc(100vw - 3.2rem));max-width:none;max-height:calc(100vh - 3.2rem);max-height:calc(100dvh - 3.2rem);padding:0;overflow:auto;border:0;border-radius:var(--popup-corner-radius, 0);background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 1rem 4rem #00000040}.naamletters__zoom::backdrop{background-color:#0009}.naamletters__zoom-media{position:relative;display:flex;justify-content:center;min-height:12rem;background-color:rgba(var(--color-foreground),.04)}.naamletters__zoom-image{display:block;width:100%;height:auto;max-height:calc(100vh - 16rem);max-height:calc(100dvh - 16rem);object-fit:contain}.naamletters__zoom-button{position:absolute;display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;padding:0;border:.1rem solid rgba(var(--color-foreground),.1);border-radius:50%;background-color:rgba(var(--color-background),.9);color:rgb(var(--color-foreground));box-shadow:0 .1rem .4rem rgba(var(--color-shadow),.15);cursor:pointer}.naamletters__zoom-button .svg-wrapper{width:1.6rem;height:1.6rem;pointer-events:none}.naamletters__zoom-button:hover{border-color:rgba(var(--color-foreground),.5)}.naamletters__zoom-button:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.2rem}.naamletters__zoom-button--close{top:1.2rem;right:1.2rem}.naamletters__zoom-button--previous,.naamletters__zoom-button--next{top:50%;transform:translateY(-50%)}.naamletters__zoom-button--previous{left:1.2rem}.naamletters__zoom-button--next{right:1.2rem}.naamletters__zoom-button--previous .svg-wrapper{transform:rotate(90deg)}.naamletters__zoom-button--next .svg-wrapper{transform:rotate(-90deg)}.naamletters__zoom-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;padding:1.6rem 2rem 2rem}.naamletters__zoom-name{margin:0}.naamletters__zoom-note{margin:0;font-size:1.4rem;color:rgba(var(--color-foreground),.75)}.naamletters__fabric-zoom[hidden],.naamletters__zoom-image[hidden],.naamletters__zoom-choose[hidden],.naamletters__zoom-note[hidden]{display:none}.naamletters__summary{margin:0 0 1rem;font-size:1.5rem;font-weight:600}.naamletters__summary:empty{display:none}.naamletters__notice{margin:0 0 1rem;font-size:1.4rem;font-style:italic;color:rgba(var(--color-foreground),.75)}.naamletters__error{margin:0 0 1rem;padding:.6rem 0 .6rem 1.2rem;border-left:.3rem solid rgba(var(--color-foreground),.6);font-size:1.4rem;color:rgb(var(--color-foreground))}.naamletters__error[hidden]{display:none}@media screen and (max-width:749px){.naamletters__box{--naamletters-box-size: 4.6rem}.naamletters__letter{width:2.8rem;height:2.8rem;font-size:1.8rem}.naamletters__fabrics{grid-template-columns:repeat(auto-fill,minmax(6.4rem,1fr))}.naamletters__fabric{--naamletters-fabric-size: 5.6rem}.naamletters__zoom-footer{padding:1.2rem 1.6rem 1.6rem}.naamletters__zoom-choose{width:100%}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/custom-naamletters.css.map */