/* Online designer (added 2026-10-01). Uses the tokens from styles.css. */
.designer-page{background:var(--paper)}
.designer-hero{padding:52px 5.5% 22px}
.designer-hero .eyebrow{color:#5d5d62}
.designer-hero h1{font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-2px;margin:14px 0 16px}
.designer-hero p{max-width:660px;color:#595960}
.designer{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px;padding:14px 5.5% 84px;align-items:start}
.d-stage{position:sticky;top:104px;min-width:0}
.d-sides,.d-seg{display:flex;flex-wrap:wrap;gap:8px}
.d-sides{margin-bottom:12px}
.d-sides button,.d-seg button,.d-tools button,.d-secondary,.d-upload{font:700 14px 'DM Sans',Arial,sans-serif;min-height:44px;padding:10px 16px;border:1px solid #c8c9c5;background:#fff;color:var(--ink);border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.d-sides button[aria-pressed="true"],.d-seg button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.d-sides button:hover,.d-seg button:hover,.d-tools button:hover:not(:disabled),.d-secondary:hover,.d-upload:hover{border-color:var(--ink)}
.d-canvas{border:1px solid #d0d1cc;background:#efefea;line-height:0;overflow:hidden}
.d-canvas[hidden]{display:none}
.d-size{font-size:13px;color:#5b5b62;margin-top:10px;min-height:20px}
.d-panel{display:flex;flex-direction:column;gap:18px;min-width:0}
.d-block{background:#fff;border:1px solid #d0d1cc;padding:20px}
.d-block h2{font-size:18px;letter-spacing:0;line-height:1.3;margin-bottom:14px;font-weight:700;display:flex;align-items:center}
.d-num{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--yellow);font-size:13px;margin-right:10px}
.d-swatches{display:flex;flex-wrap:wrap;gap:10px}
.d-swatch{width:38px;height:38px;border-radius:50%;background:var(--sw);border:2px solid #c8c9c5;cursor:pointer;padding:0}
.d-swatch[aria-pressed="true"]{outline:3px solid #ea3689;outline-offset:2px}
.d-color-name{font-size:13px;color:#5b5b62;margin-top:10px}
.d-upload{position:relative;background:var(--yellow);border-color:var(--yellow)}
.d-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.d-upload:focus-within{outline:3px solid #087d91;outline-offset:3px}
.d-hint{font-size:13px;color:#5b5b62;margin-top:10px}
.d-text-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.d-text-row label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}
.d-text-row .d-text-main{grid-column:1/-1}
.d-text-row input[type=text],.d-text-row select{font:inherit;font-weight:400;font-size:16px;padding:10px 12px;border:1px solid #bdbdc3;border-radius:4px;background:#fff;color:var(--ink);min-height:46px;width:100%}
.d-text-row input[type=color]{width:56px;height:46px;padding:3px;border:1px solid #bdbdc3;border-radius:4px;background:#fff;cursor:pointer}
.d-text-row .d-add{grid-column:1/-1;justify-self:start}
.d-tools{display:flex;flex-wrap:wrap;gap:8px}
.d-tools button{padding:10px 13px;min-width:44px}
.d-tools button:disabled{opacity:.4;cursor:not-allowed}
.d-msg{font-size:14px;font-weight:700;color:#087c47;min-height:22px}
.d-msg.is-error{color:#b3262f}
.d-actions{display:flex;flex-wrap:wrap;gap:10px}
.designer .form-grid{margin-top:4px}
.designer .quote-form{margin:0;max-width:none;border:0;padding:0;background:none}
@media(max-width:900px){.designer{grid-template-columns:1fr;gap:18px}.d-stage{position:sticky;top:74px;z-index:5;background:var(--paper);padding:8px 0 4px;display:flex;flex-direction:column;align-items:center;border-bottom:1px solid #d8d9d4}.d-sides{margin-bottom:8px}.d-size{margin-top:6px}}
@media(max-width:520px){.designer-hero{padding:34px 5% 16px}.designer{padding:8px 5% 60px}.d-block{padding:16px}.d-text-row{grid-template-columns:minmax(0,1fr) auto}.d-text-row label:nth-child(2){grid-column:1/2}}