:root{--beige:#F8EDE3;--light-green:#BDD2B6;--medium-green:#A2B29F;--dark-green:#798777;--ink:#29352C;--line:#D6DED1;--muted:#53624F;--surface:#FFFFFF;--accent:var(--dark-green)}*{box-sizing:border-box}body{margin:0;background:#FFFFFF;color:var(--ink);font:16px/1.6 "Montserrat",Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--ink);outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;padding:22px 5%;border-bottom:1px solid var(--line);background:var(--surface)}.brand{display:block;flex-shrink:0;line-height:0;text-decoration:none}.brand img{display:block;width:200px;height:auto}.badge,.eyebrow{font-size:12px;letter-spacing:2px;color:var(--muted);font-weight:600}main{max-width:1400px;margin:auto;padding:26px 5%}.intro h1{font:600 46px/1.15 "Montserrat",Arial,sans-serif;letter-spacing:-1.5px;margin:0}.intro p{margin:8px 0}.products{display:flex;gap:8px;margin:25px 0 20px}.products button{padding:11px 28px;border:1px solid var(--line);border-radius:30px;background:var(--surface);color:var(--ink)}.products button[aria-pressed=true]{background:var(--light-green);border-color:var(--dark-green);color:var(--ink);font-weight:600}.workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr);gap:24px;align-items:start}.preview{position:sticky;top:20px;border-radius:24px;border:1px solid var(--line);background:#FFFFFF;overflow:hidden;min-height:540px}.previewtop{display:flex;justify-content:space-between;align-items:center;padding:22px;gap:10px;font-size:14px}.previewtop button,.viewtools button{background:#ffffffaa;border:1px solid var(--line);border-radius:20px;padding:7px 12px;color:var(--ink)}canvas{width:100%;height:400px;display:block;touch-action:none}.viewtools{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;font-size:14px}.caption{font-size:13px;text-align:center;padding:0 18px;color:var(--muted)}.controls{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden}.notice{padding:15px 20px;background:var(--light-green);font-size:14px;color:var(--ink)}.step{padding:22px;border-bottom:1px solid var(--line)}h2{font-size:20px;margin:0 0 18px}h2 span{color:var(--dark-green);font-size:14px;display:inline-block;margin-right:10px}label{display:block;font-size:14px;font-weight:bold;margin:13px 0}select,input:not([type=checkbox]){width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:11px;margin-top:6px;color:var(--ink)}small,.hint{display:block;color:var(--muted);font-size:13px;font-weight:normal}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:15px}.toggle{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px}.toggle input{accent-color:var(--ink);width:21px;height:21px}.picker{display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;margin:14px 0;text-align:left}.picker span:last-child{margin-left:auto;font-size:13px;color:var(--ink)}.picker b{display:block;font-size:14px}.dot{height:34px;width:34px;flex-shrink:0;border:1px solid #0002;border-radius:50%}.primary,.cart{width:100%;border:0;border-radius:12px;padding:14px;background:var(--medium-green);color:var(--ink);font-weight:600;margin-top:12px}.cart{background:#E9EAE5;color:#65705F;cursor:not-allowed;font-size:14px}#summary,#reviewsum{font-size:14px;line-height:1.9}#summary strong,#reviewsum strong{color:var(--ink)}#validation{font-size:14px;color:#904215}dialog{border:0;border-radius:22px;padding:24px;width:min(560px,92vw);max-height:85vh;box-shadow:0 20px 100px #29352c33}dialog::backdrop{background:#29352c80}.dialoghead{display:flex;justify-content:space-between;gap:12px}.dialoghead button{border:0;background:var(--light-green);border-radius:50%;width:36px;height:36px}.dialoghead h2{margin-top:5px}#swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}#swatches button{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 4px;font-size:13px}#swatches .dot{display:block;margin:0 auto 6px;width:42px;height:42px}#swatches button[aria-pressed=true]{border:2px solid var(--dark-green);background:#EAF0E6}footer{text-align:center;font:500 13px "Montserrat",Arial,sans-serif;padding:30px;color:var(--muted)}#later{padding:40px 24px;text-align:center}#later button{background:var(--medium-green);color:var(--ink);font-weight:600;padding:12px 20px;border:0;border-radius:15px}[hidden]{display:none!important}@media(max-width:780px){header{padding:15px 5%}.brand img{width:155px}.badge{font-size:10px;max-width:120px;text-align:right}.workspace{grid-template-columns:1fr}.preview{position:relative;top:0;min-height:380px}canvas{height:270px}.intro h1{font-size:36px}.products button{flex:1;padding:10px}.viewtools{gap:7px}.viewtools span{font-size:12px}main{padding-top:20px}.step{padding:20px}}

@font-face{font-family:LemonMilkBold;src:url(assets/LemonMilkbold.otf) format("opentype");font-weight:400;font-display:swap}@font-face{font-family:LemonMilkLight;src:url(assets/LemonMilklight.otf) format("opentype");font-weight:400;font-display:swap}#swatches{display:block}.color-group{margin:22px 0}.color-group h3{font-size:15px;color:var(--ink);margin-bottom:10px}.color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}#swatches .color-grid button{width:100%;min-height:100px}#swatches img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;margin-bottom:7px}.color-grid button span{overflow-wrap:anywhere}#font option[value=LemonMilkBold]{font-family:LemonMilkBold}#font option[value=LemonMilkLight]{font-family:LemonMilkLight}@media(max-width:480px){.color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.products button:hover,.picker:hover{border-color:var(--dark-green)}.primary:hover,#later button:hover{background:var(--light-green)}.primary:active{background:var(--dark-green);color:white}.intro{padding:14px 0 8px}.intro>p:last-child{color:var(--muted)}.step:last-child{border-bottom:0}.badge{background:var(--beige);border-radius:999px;padding:9px 14px}.controls{box-shadow:0 6px 28px #29352c06}@media(max-width:480px){.badge{font-size:9px;letter-spacing:1px;padding:7px 10px}.intro h1{font-size:32px;letter-spacing:-1px}.previewtop{font-size:12px;padding:18px}.brand img{width:145px}}

/* Introduction and product chips match the webshop. */
.intro{text-align:center;padding:24px 0 12px}.intro .eyebrow{font-size:15px;letter-spacing:0;font-weight:400;color:#62656B;margin:0 0 14px}.intro h1{font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-1px;max-width:1050px;margin:0 auto;color:#30313A;font-weight:700}.intro>p:last-child{font-size:16px;color:#4D5058;margin:14px auto 0}.products button{background:#F4F4F4;border-color:#DEDEDE;color:#30313A;font-size:14px}.products button:hover{background:#EBEBEB;border-color:#CACACA}.products button[aria-pressed=true]{background:#E4E4E4;border-color:#B8B8B8;color:#30313A;font-weight:600}@media(max-width:480px){.intro{padding-top:16px}.intro .eyebrow,.intro>p:last-child{font-size:14px}.intro h1{font-size:24px;letter-spacing:-.5px}}

.products{flex-wrap:wrap}.products #openinfo{font-weight:400}#infodialog{width:min(580px,92vw);color:var(--ink);font-family:"Montserrat",Arial,sans-serif}#infotext{font-size:14px;line-height:1.7}#infotext p{margin:0 0 15px}#infodialog .dialoghead h2{font-size:20px;line-height:1.35}#infodialog .dialoghead button{flex-shrink:0}#startdesign{margin-top:2px}@media(max-width:480px){.products button{flex:1 1 calc(50% - 8px)}#infodialog{padding:20px}}

@font-face{font-family:DKLongreach;src:url(assets/DKLongreach.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=DKLongreach]{font-family:DKLongreach}@font-face{font-family:LemonMilkLight;src:url(assets/LemonMilkLight.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=LemonMilkLight]{font-family:LemonMilkLight}@font-face{font-family:LemonMilkBold;src:url(assets/LemonMilkBold.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=LemonMilkBold]{font-family:LemonMilkBold}@font-face{font-family:Brighten;src:url(assets/Brighten.ttf) format("truetype");font-weight:400;font-display:swap}#font option[value=Brighten]{font-family:Brighten}@font-face{font-family:Butterfly;src:url(assets/Butterfly.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=Butterfly]{font-family:Butterfly}@font-face{font-family:Maxeva;src:url(assets/Maxeva.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=Maxeva]{font-family:Maxeva}@font-face{font-family:Noteworthy;src:url(assets/Noteworthy.ttf) format("truetype");font-weight:400;font-display:swap}#font option[value=Noteworthy]{font-family:Noteworthy}@font-face{font-family:Optima;src:url(assets/Optima.ttf) format("truetype");font-weight:400;font-display:swap}#font option[value=Optima]{font-family:Optima}@font-face{font-family:PinkDiary;src:url(assets/PinkDiary.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=PinkDiary]{font-family:PinkDiary}@font-face{font-family:SugarAddiction;src:url(assets/SugarAddiction.ttf) format("truetype");font-weight:400;font-display:swap}#font option[value=SugarAddiction]{font-family:SugarAddiction}@font-face{font-family:BrooklynBold;src:url(assets/BrooklynBold.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=BrooklynBold]{font-family:BrooklynBold}@font-face{font-family:CottonCandy;src:url(assets/CottonCandy.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=CottonCandy]{font-family:CottonCandy}@font-face{font-family:Futura;src:url(assets/Futura.ttf) format("truetype");font-weight:400;font-display:swap}#font option[value=Futura]{font-family:Futura}@font-face{font-family:Signatra;src:url(assets/Signatra.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=Signatra]{font-family:Signatra}@font-face{font-family:CreamYoghurt;src:url(assets/CreamYoghurt.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=CreamYoghurt]{font-family:CreamYoghurt}@font-face{font-family:Lavigne;src:url(assets/Lavigne.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=Lavigne]{font-family:Lavigne}@font-face{font-family:Radicalis;src:url(assets/Radicalis.ttf) format("truetype");font-weight:400;font-display:swap}#font option[value=Radicalis]{font-family:Radicalis}@font-face{font-family:MyRainbow;src:url(assets/MyRainbow.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=MyRainbow]{font-family:MyRainbow}@font-face{font-family:Autography;src:url(assets/Autography.otf) format("opentype");font-weight:400;font-display:swap}#font option[value=Autography]{font-family:Autography}

#symbolgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#symbolgrid button{border:1px solid var(--line);border-radius:12px;background:white;padding:12px 8px;font-size:13px;min-height:105px}#symbolgrid img{display:block;margin:0 auto 10px;width:100%;height:55px;object-fit:contain}#symbolgrid button[aria-pressed=true]{border:2px solid var(--dark-green);background:#EAF0E6}@media(max-width:480px){#symbolgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

#measurehint a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}#measurehint a:hover{color:var(--muted)}#measurehint a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
#qbtransfer a.primary{display:block;text-align:center;text-decoration:none;font-size:16px}#qbtransfer a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cart:not(:disabled){background:var(--medium-green);color:var(--ink);cursor:pointer}.cart:not(:disabled):hover{background:var(--light-green)}

.categorylink{margin:0 0 1.25rem;font-size:.95rem}.categorylink a{color:inherit;text-underline-offset:.2em}

/* Keep the product visible while browsing design options. */
.preview{position:relative;top:0;min-height:0}
.preview.preview-follow{position:sticky;top:12px;z-index:2;box-shadow:0 5px 20px #29352c12}
.previewfollow{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:4px 22px 10px;font-size:14px;font-weight:400;cursor:pointer}
.previewfollow input{width:20px;height:20px;margin:0;flex-shrink:0;accent-color:var(--dark-green)}
.previewtop{padding-bottom:8px}.previewtop button{min-height:44px;flex-shrink:0}
.preview.preview-follow canvas{height:clamp(180px,calc(100svh - 260px),400px)}
@media(max-width:780px){
 .preview.preview-follow{top:8px;border-radius:16px}
 .previewtop{padding:8px 12px 0;font-size:14px}
 .previewfollow{padding:0 12px 4px;font-size:14px}
 .preview.preview-follow canvas{height:clamp(90px,21svh,180px)}
 .preview.preview-follow .caption{display:none}
 .viewtools{gap:12px;padding:4px 10px 8px}
 .viewtools button{min-width:44px;min-height:44px;padding:4px 10px}
 .preview.preview-follow .viewtools span{display:none}
 .workspace{gap:16px}
 .controls{scroll-margin-top:320px}
}
@media(max-width:780px) and (max-height:500px){
 .preview.preview-follow canvas{height:80px}
 .preview.preview-follow .previewtop{padding-top:0}
 .preview.preview-follow .previewtop #viewtitle{font-size:12px}
}

@media(min-width:781px) and (max-height:600px){
 .preview.preview-follow canvas{height:clamp(90px,calc(100svh - 190px),300px)}
 .preview.preview-follow .caption{display:none}
}

.font-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-align:left;font-weight:400}
.font-sample{display:block;font-size:24px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
.font-picker-arrow{flex-shrink:0;font:20px Arial,sans-serif;color:var(--muted)}
.font-picker:hover,.font-choice:hover{border-color:var(--dark-green)}
#fontpickerdialog{width:min(640px,94vw);max-height:85vh;max-height:85svh;overflow:auto}
#fontpickerdialog .dialoghead{position:sticky;top:-24px;padding:8px 0;background:var(--surface);z-index:1}
#fontpickerlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.font-choice{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:90px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left}
.font-choice[aria-pressed=true]{border:2px solid var(--dark-green);background:#EAF0E6}
.font-choice .font-name{font:400 12px/1.4 "Montserrat",Arial,sans-serif;color:var(--muted)}
.font-picker:focus-visible,.font-choice:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:480px){#fontpickerlist{grid-template-columns:1fr}.font-choice{min-height:82px}#fontpickerdialog{padding:18px}#fontpickerdialog .dialoghead{top:-18px}}

/* Keep sticky preview painting and touch hit testing in the same layer on WebKit. */
.preview.preview-follow{overflow:visible;isolation:isolate;transform:translateZ(0)}
.preview canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}