:root{--monogram-gold:#f2c94c;--monogram-red:#c41230;--monogram-indigo:#2c4a6e;--monogram-white:#fff;--monogram-black:#242424}.monogram-script.monogram-draggable{pointer-events:auto;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}.monogram-script.monogram-draggable:active{cursor:grabbing}.monogram-preview{max-width:420px;margin:20px 0}.monogram-photo{background:var(--photo-bg);aspect-ratio:4/5;border-radius:5px;position:relative;overflow:hidden}.monogram-photo img{object-fit:contain;width:100%;height:100%}.monogram-script{pointer-events:none;overflow-wrap:anywhere;max-width:65%;font-family:Dancing Script,Brush Script MT,Segoe Script,cursive;font-size:32px;line-height:1.2;position:absolute;transform:translate(-50%,-50%)}.monogram-left-chest{top:35%;left:66%}.monogram-right-chest{top:35%;left:34%}.monogram-back{top:42%;left:50%}.monogram-cuff{top:80%;left:80%}.monogram-back-pocket{top:30%;left:65%}.monogram-coin-pocket{top:20%;left:65%}.monogram-waistband{top:14%;left:50%}.monogram-leg{top:65%;left:60%}.monogram-thread-gold{color:var(--monogram-gold)}.monogram-thread-red{color:var(--monogram-red)}.monogram-thread-indigo{color:var(--monogram-indigo)}.monogram-thread-white{color:var(--monogram-white)}.monogram-thread-black{color:var(--monogram-black)}.monogram-preview figcaption{color:var(--secondary);margin-top:8px;font-size:12px;line-height:1.6}.monogram-small{flex-shrink:0;width:100px;margin:0}.monogram-small .monogram-script{font-size:17px}.monogram-card{aspect-ratio:4/3;background:var(--card);border:1px solid var(--border);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;display:flex}.monogram-card-letters{min-height:1.1em;text-shadow:0 0 1px var(--secondary);font-family:Dancing Script,Brush Script MT,Segoe Script,cursive;font-size:64px;line-height:1.1}.monogram-card small{color:var(--secondary);font-size:13px}.monogram-small .monogram-card{aspect-ratio:1;padding:6px}.monogram-small .monogram-card-letters{font-size:24px}.monogram-script.monogram-draggable,.monogram-script.monogram-draggable:active{cursor:move}.customer-button-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}