/* Keep design choices close to the canvas; pricing belongs to the review step. */
.editor-flow{max-width:1100px;padding-top:25px}
.editor-flow>.steps{margin-bottom:24px}
.editor-flow .choose-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"preview sources" "preview tools";align-items:start;gap:14px 30px}
.editor-flow .editor-sources{grid-area:sources;margin:0;min-height:46px;border-radius:11px}
.editor-flow .editor-sources button{min-height:40px;border-radius:8px}
.editor-flow .large-preview{grid-area:preview;height:540px;min-height:0;padding:60px 25px;overflow:hidden;border-radius:18px;top:18px}
.editor-flow .large-case.artwork-canvas{width:190px;margin:0;flex-shrink:0}
.editor-flow .choose-details{grid-area:tools;max-width:none;min-width:0}
.editor-panel{padding:0;margin:0 0 10px;background:white;border:1px solid #dce5d5;border-radius:12px;overflow:hidden}
.editor-panel>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:12px;min-height:54px;font-size:13px;color:#385b46}
.editor-panel>summary::-webkit-details-marker{display:none}
.editor-panel>summary:focus-visible{outline:2px solid #137d82;outline-offset:-3px;border-radius:12px}
.editor-tool-icon{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;background:#edf2e7;border-radius:8px;color:#648458}
.editor-panel>summary>small{margin-left:auto;font-size:10px;color:#72816e;text-align:right}
.editor-chevron{margin-left:auto;flex-shrink:0;color:#76876e;font-size:18px;line-height:1}
.editor-panel>summary>small+.editor-chevron{margin-left:2px}
.editor-panel[open]>.editor-panel-body{border-top:1px solid #edf0e7}
.editor-panel[open]>summary .editor-chevron{transform:rotate(180deg)}
.editor-panel-body{padding:15px}
.editor-panel .design-choices{margin:0;border:0}
.editor-panel .graphic-library,.editor-panel .text-editor{border:0;box-shadow:none;border-radius:0;padding:0;margin:0;background:none}
.editor-panel .text-editor{border-top:1px solid #e8ede3;padding-top:18px;margin-top:18px}
.editor-panel .library-title h2,.editor-panel .text-editor h2{font-size:16px}
.editor-panel .graphic-library>p,.editor-panel .text-editor>p{font-size:11px}
.editor-flow .studio-picker,.editor-flow .studio-picker:not([open]){padding:0;margin:0 0 10px;border-radius:12px;box-shadow:none}
.editor-flow .studio-picker>.ai-studio-top{padding:12px;min-height:54px;gap:10px}
.editor-flow .studio-picker .ai-studio-label{gap:10px;font-size:12px;letter-spacing:.6px}
.editor-flow .studio-picker .ai-studio-label>span:first-child{width:28px;height:28px;border-radius:8px}
.editor-flow .studio-picker .ai-studio-label>span:last-child{font-size:12px;letter-spacing:.5px}
.editor-flow .studio-picker .ai-studio-label small{display:none}
.editor-flow .studio-picker .ai-studio-chevron{margin-left:auto;font-size:18px}
.editor-flow .studio-picker .ai-studio-body{padding:18px 15px 15px;border-top:1px solid #edf0e7}
.editor-flow .studio-picker-intro>.eyebrow{display:none}
.editor-flow .studio-picker h2{font-size:26px}
.editor-flow .studio-picker .ai-studio-intro{margin:10px 0 16px}
.editor-flow .studio-picker .ai-case-gallery{max-height:390px}
.editor-flow .effect-selection{font-size:10px;line-height:1.5;margin:12px 0}
.editor-next{margin-top:18px}
.editor-next .button{border-radius:10px;background:#264d3e;justify-content:space-between}
.editor-next .button:hover:not(:disabled){background:#183d2f}
.editor-flow .photo-placeholder{padding:18px;max-width:300px}
.editor-flow .photo-placeholder h2{font-size:24px;letter-spacing:-.5px;line-height:1.2;margin:10px 0 18px}
.editor-flow .photo-placeholder>svg{margin:0;color:#7d927b}
.print-quote h2{font-size:21px;font-weight:500;letter-spacing:-.4px;margin:0 0 16px}
.print-quote dl{margin:0}
.print-quote dl>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #e8ece3;font-size:13px;line-height:1.5}
.print-quote dt{color:#5c6b5e}.print-quote dd{margin:0;text-align:right;white-space:nowrap;font-weight:500;color:#2c4637}
.print-quote dl>.quote-total{padding-block:18px;margin-top:5px;border-bottom:0}
.print-quote .quote-total dt{font-weight:600;color:#2c4637}.print-quote .quote-total dd{font-size:27px;letter-spacing:-.5px}
.quote-note{font-size:11px;color:#697760;line-height:1.7;margin:8px 0 12px}
.review-flow .ai-order-card>.field-note{font-size:11px;line-height:1.6;margin:16px 0}
@media(max-width:760px){
 .is-editor>.header{width:calc(100% - 28px);height:56px;gap:12px}
 .is-editor>.header nav,.is-editor>.footer{display:none}
 .is-editor>.header .brand-wordmark{width:104px;height:auto}
 .is-editor>.header .saved-link{margin-left:auto;font-size:11px}.is-editor>.header .simple-language{margin-left:0}
 .is-editor>.header .simple-language select{min-height:38px}
 .editor-flow{width:calc(100% - 28px);padding:12px 0 calc(82px + env(safe-area-inset-bottom));min-height:calc(100svh - 56px)}
 .editor-flow>.steps{font-size:8px;gap:8px;margin:0 0 14px}
 .editor-flow .model-first{margin:0 0 10px;border-radius:11px}
 .editor-flow .model-first summary{min-height:44px;padding:10px 12px;font-size:11px}
 .editor-flow .choose-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"sources" "preview" "tools";gap:10px}
 .editor-flow .editor-sources{min-height:44px;padding:3px}
 .editor-flow .editor-sources button{min-height:38px;padding:9px;font-size:12px}
 .editor-flow .large-preview{--editor-preview-height:clamp(220px,36svh,330px);position:relative;top:0;height:var(--editor-preview-height);min-height:0;padding:40px 20px;border-radius:14px}
 .editor-flow .large-case.artwork-canvas{width:calc((var(--editor-preview-height) - 70px)*.45);margin:0;left:0}
 .editor-flow .large-case.artwork-canvas:has(.text-quick-tools){left:-20px}
 .editor-panel,.editor-flow .studio-picker{margin-bottom:8px}
 .editor-panel>summary,.editor-flow .studio-picker>.ai-studio-top{min-height:48px;padding:9px 12px;font-size:12px}
 .editor-panel>summary>small{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .editor-panel-body{padding:12px}
 .editor-panel .design-thumbnail{height:84px}
 .editor-flow .studio-picker .ai-studio-body{padding:15px 12px 12px}
 .editor-next{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#faf9f6f5;border-top:1px solid #e0e5db;backdrop-filter:blur(12px);padding:10px 14px max(10px,env(safe-area-inset-bottom));margin:0}
 .editor-flow .editor-next .button{min-height:46px;padding:12px 17px;font-size:13px}
 .editor-flow .photo-placeholder h2{font-size:21px;margin:8px 0 13px}
 .editor-flow .photo-placeholder .button{min-height:40px;font-size:11px;padding:10px 15px}
 .review-flow>.steps{margin-bottom:22px}
 .review-flow .ai-heading{margin:20px 0}.review-flow .ai-heading h1{font-size:30px;line-height:1.15;margin:10px 0}.review-flow .ai-heading>p:last-child{font-size:12px;line-height:1.6}
 .review-flow .ai-order-layout{grid-template-columns:1fr;gap:15px}
 .review-flow .checkout-preview{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:20px;align-items:center;padding:18px;text-align:left;border-radius:14px}
 .review-flow .checkout-case{width:64px;margin:0;grid-column:1;grid-row:1 / span 3}
 .review-flow .checkout-preview h2{font-size:20px;grid-column:2;margin:0;align-self:end}
 .review-flow .checkout-preview>p{font-size:12px;grid-column:2;margin:8px 0;align-self:start}
 .review-flow .checkout-preview .effect-caption{grid-column:2;justify-content:flex-start;margin:0}
 .review-flow .ai-order-card{padding:22px 18px}.print-quote dl>div{font-size:12px;gap:10px}
}
@media(max-width:380px) and (max-height:700px){
 .editor-flow .large-preview{--editor-preview-height:190px}
 .editor-flow>.steps{display:none}
 .editor-flow .large-case.artwork-canvas{width:60px}
}

/* The overview stays compact; the same editable canvas expands into a modal. */
.canvas-open-hit{position:absolute;inset:0;z-index:14;width:100%;border:0;background:transparent;display:flex;align-items:flex-end;justify-content:center;padding:14px;cursor:zoom-in;color:#315947}
.canvas-open-hit>span{display:flex;align-items:center;gap:7px;background:#ffffffec;border:1px solid #d7e3d8;border-radius:30px;box-shadow:0 3px 14px #2848340a;padding:8px 13px;font-size:11px}
.canvas-open-hit:focus-visible{outline:3px solid #187c70;outline-offset:-4px;border-radius:14px}
body.canvas-editor-open{overflow:hidden}
.canvas-editor{padding:0;border:1px solid #dce4da;border-radius:22px;margin:auto;width:min(1100px,calc(100% - 48px));height:calc(100dvh - 48px);max-width:none;max-height:none;background:#f8faf7;color:#293e32;overflow:hidden;box-shadow:0 28px 100px #162c3545}
.canvas-editor::backdrop{background:#152b2db3;backdrop-filter:blur(6px)}
.canvas-editor[open]{display:flex;flex-direction:column}
.canvas-editor [hidden]{display:none!important}
.canvas-editor-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 24px;border-bottom:1px solid #dde6dc;background:#fffffffa;z-index:2}
.canvas-editor-header h2{font-size:18px;font-weight:600;letter-spacing:-.3px;margin:0 0 4px}.canvas-editor-header span{font-size:11px;color:#7b8779}
.canvas-done{min-height:42px;display:flex;align-items:center;gap:14px;padding:10px 19px;background:#264d3e;border:0;border-radius:10px;color:white;font-size:13px;font-weight:600}
.canvas-stage{flex:1;min-height:0;position:relative;overflow:hidden}
.editor-flow .canvas-editor .large-preview{width:100%;height:100%;min-height:0;padding:52px 44px;position:relative;top:auto;border-radius:0;overflow:hidden;background-color:#eaf0e8;background-image:radial-gradient(#81998525 .8px,transparent .8px);background-size:14px 14px}
.editor-flow .canvas-editor .large-case.artwork-canvas{flex-shrink:0;left:0;margin:0;transform:none}
.canvas-editor .canvas-open-hit,.canvas-editor .artwork-selection-actions,.canvas-editor .artwork-reset,.canvas-editor .artwork-edit-text{display:none}
.canvas-editor .phone-case{box-shadow:0 18px 35px #293e3225}
.canvas-toolbar{position:relative;flex-shrink:0;min-height:180px;overscroll-behavior:contain;background:#fff;border-top:1px solid #dce6d9;padding:12px 24px 14px;z-index:2}
.canvas-toolbar-heading,.canvas-size,.canvas-actions{display:flex;align-items:center;gap:12px}
.canvas-toolbar-heading{justify-content:space-between;min-height:34px}
.canvas-selection-label{margin:0;font-size:12px;color:#546952;line-height:1.5}
.canvas-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e0e7db;background:#f6f8f2;color:#36563f;min-height:40px;padding:9px 14px;border-radius:8px;font-size:12px;white-space:nowrap}
.canvas-toolbar-heading>button{min-height:34px;border:0;background:transparent;color:#2b6850;padding:5px 0;flex-shrink:0}
.canvas-toolbar button:disabled,.canvas-size input:disabled{opacity:.4;cursor:default}
.canvas-size{gap:16px;margin:10px 0 6px}.canvas-size label{font-size:12px;font-weight:500;margin:0}.canvas-size input[type=range]{flex:1;min-width:0;min-height:32px;height:32px;padding:0;border:0;accent-color:#2f7055}.canvas-size output{font-size:11px;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.canvas-actions{gap:8px}.canvas-actions button{flex:1}.canvas-actions .canvas-delete{color:#a74352;background:#fff6f5;border-color:#f1dfdd}
.canvas-gesture-note{font-size:10px;line-height:1.5;color:#81907d;text-align:center;margin:12px 0 0}
.canvas-text-options{margin-left:auto;flex-shrink:0}.canvas-text-options>summary{display:flex;gap:10px;justify-content:space-between;font-size:11px;padding:9px 0;cursor:pointer;list-style:none}.canvas-text-options>summary::-webkit-details-marker{display:none}.canvas-text-options[open]>summary>span{transform:rotate(180deg)}
.canvas-text-style{position:absolute;bottom:100%;left:0;right:0;padding:12px 18px 18px;background:#fffffff5;border-top:1px solid #dce6d9;box-shadow:0 -8px 24px #203c310a;backdrop-filter:blur(12px)}
.canvas-editor .text-quick-tools{position:static;width:100%;display:grid;grid-template-columns:1fr 1fr 50px;gap:4px 16px;padding:10px 0 0;border:0;box-shadow:none;border-radius:0;background:transparent}
.canvas-editor .text-quick-tools>.quick-label{margin:0;font-size:10px}.canvas-editor .text-quick-tools>.quick-label:first-child{grid-column:1;grid-row:1}.canvas-editor .text-quick-tools>.quick-label:nth-of-type(2){grid-column:2;grid-row:1}
.canvas-editor .quick-fonts{grid-column:1;grid-row:2;grid-template-columns:repeat(4,1fr);gap:4px;margin:0}.canvas-editor .quick-fonts button{font-size:19px;height:34px;min-height:34px;padding:2px}
.canvas-editor .quick-colors{grid-column:2;grid-row:2;display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0}.canvas-editor .quick-colors button{min-height:22px;height:22px;width:22px;padding:0;background:var(--color);border-radius:50%}
.canvas-editor .quick-custom{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;font-size:10px}.canvas-editor .quick-custom input[type=color]{width:100%;min-height:34px;height:34px}
.canvas-editor button:focus-visible,.canvas-text-options summary:focus-visible{outline:2px solid #187c70;outline-offset:2px}
@media(max-width:760px){
 .canvas-editor{width:100%;height:100dvh;border:0;border-radius:0;inset:0;margin:0}
 .canvas-editor-header{padding:max(12px,env(safe-area-inset-top)) 18px 12px}.canvas-editor-header h2{font-size:16px}.canvas-done{min-height:40px;padding:10px 16px}
 .canvas-toolbar{padding:10px 18px max(14px,env(safe-area-inset-bottom))}
 .canvas-editor .text-quick-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px;gap:6px 10px}
 .canvas-editor .quick-colors{gap:7px}.canvas-editor .quick-colors button{min-height:20px;width:20px;height:20px}
 .canvas-actions button{font-size:11px;padding:9px 10px}.canvas-selection-label{font-size:11px}
}
@media(max-height:500px) and (orientation:landscape){
 .canvas-editor[open]{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:64px minmax(0,1fr)}
 .canvas-editor-header{grid-column:1 / -1}.canvas-stage{height:100%}.canvas-toolbar{height:100%;max-height:none;border-top:0;border-left:1px solid #dce6d9}
}