.designer-wrap{max-width:1320px;width:calc(100% - 80px);margin:0 auto}.designer-intro{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 0 32px}.designer-intro .eyebrow{margin-bottom:13px}.designer-intro h1{font-size:43px;margin-bottom:15px}.designer-intro p{font-size:13px;color:#75806d;margin-bottom:0}.format-badge{display:flex;gap:13px;align-items:center;border:1px solid var(--line);padding:16px 19px;border-radius:4px}.format-badge>span{font-family:var(--serif);font-size:27px}.format-badge small{font-size:10px;line-height:1.7;color:#6b775f}.back-shop{font-size:12px}.designer-layout{display:grid;grid-template-columns:345px 1fr;gap:30px;align-items:start}.controls-panel{border:1px solid var(--line);border-radius:5px;background:#fffdf8}.controls-panel section{padding:23px;border-bottom:1px solid var(--line)}.control-heading{display:flex;align-items:center;gap:12px;margin-bottom:20px}.control-heading>span{font-family:var(--serif);font-size:21px;color:#9aab8b}.control-heading h2{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:0}.type-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.type-picker button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 5px;font-size:10px;border:1px solid var(--line);border-radius:4px;background:none}.type-picker svg{width:29px;height:29px}.type-picker .selected{color:var(--green);background:#edf0e6;border-color:#8c9c7c}.controls-panel label{margin-top:15px}.controls-panel label span,.send-dialog label span{color:#88907d;font-size:9px;font-weight:400}.controls-panel .field-hint{font-size:10px;color:#7a826f;line-height:1.7;margin:12px 0}.dimension-fields{display:flex;gap:12px}.dimension-fields>div{flex:1;min-width:0}.dimension-fields input{font-size:13px}.dimension-fields label{display:flex;justify-content:space-between;gap:6px}.check-field{display:flex;align-items:center;gap:9px;font-size:11px!important}.check-field input{width:auto;margin:0;accent-color:var(--green)}.fixed-material{display:flex;align-items:center;gap:9px;border-radius:3px;background:#f0eee5;margin-top:18px;padding:12px 10px}.fixed-material strong,.fixed-material small{display:block}.fixed-material strong{font-size:11px;font-weight:600}.fixed-material small{font-size:8px;color:#7a7b6a}.fixed-tag{margin-left:auto;font-size:7px;letter-spacing:1px;border:1px solid #d1d1bd;padding:3px}.range-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px}.range-line label{font-size:10px;margin:0}.range-line output{font-size:10px;color:var(--green)}input[type=range]{padding:0;border:0;width:100%;height:25px;accent-color:var(--green);background:transparent}.upload-box{border:1px dashed #b9c5ad;border-radius:4px;background:#f4f5ec;min-height:125px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;overflow:hidden}.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-box strong{font-size:12px;font-weight:500}.upload-box small{font-size:9px;color:#7c846e;margin-top:4px}.upload-icon{font-size:25px!important;line-height:1.2!important;color:#678057!important;margin:0 0 7px}.upload-box:focus-within{outline:3px solid #b0794a;outline-offset:3px}.logo-file-row{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:10px}.logo-file-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo-file-row button,.project-actions button{background:none;border:0;padding:5px 0;color:#7d6b50;text-decoration:underline;font-size:10px}.project-actions{padding:15px 22px;display:flex;justify-content:space-between;gap:15px}.preview-column{position:sticky;top:20px;min-width:0}.preview-panel{border:1px solid var(--line);border-radius:5px;background:#eeeee4;overflow:hidden}.preview-toolbar{background:#f8f8f1;border-bottom:1px solid var(--line);padding:12px 15px;display:flex;justify-content:space-between;align-items:center;gap:20px}.preview-tabs{display:flex;gap:4px}.preview-tabs button{border:0;background:transparent;font-size:11px;padding:7px 13px;border-radius:3px}.preview-tabs .selected{background:var(--green);color:white}#fit-view{background:transparent;border:0;font-size:22px}.design-preview{display:flex;align-items:center;justify-content:center;min-height:370px;height:440px;padding:30px;background-image:radial-gradient(#9da58b44 .8px,transparent .8px);background-size:18px 18px}.design-preview svg{width:100%;height:100%;fill:none;stroke:none;overflow:visible}.preview-caption{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#6c795c;padding:12px 20px}.layer-legend{display:flex;gap:20px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 20px;font-size:9px;background:#f8f8f1;color:#788068}.layer-legend>span{display:flex;gap:7px;align-items:center}.layer-legend>span:last-child{margin-left:auto;font-size:8px}.layer-legend i{height:8px;width:8px;display:block;border-radius:50%}.cut-color{background:#e24949}.engrave-color{background:#345bc3}.design-summary{display:flex;justify-content:space-between;gap:15px;border:1px solid var(--line);border-radius:4px;padding:18px 20px;margin-top:18px}.design-summary small{display:block;font-size:8px;letter-spacing:1px;color:#7a836d}.design-summary strong{font-size:13px;display:block;font-weight:500;margin-top:5px}.download-panel{margin-top:22px;padding:22px;background:#eef0e7;border-radius:4px;border:1px solid #dce2d0}.download-panel h2{font-size:26px;letter-spacing:-.5px}.download-panel p{font-size:11px;color:#778167;margin:12px 0}.download-panel>.button{width:100%;justify-content:space-between;margin-top:5px}.download-actions{display:flex;justify-content:space-between;gap:15px;margin-top:12px}.download-actions button{border:0;background:none;padding:8px 0;font-size:11px;text-decoration:underline}.download-panel p.production-note{font-size:9px;line-height:1.8;margin:12px 0 0}.form-error{font-size:11px;border:1px solid #d8ac97;background:#fff1e8;color:#8a432b;padding:12px;border-radius:3px;margin-top:15px}.designer-help{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:50px;padding:32px 0;border-top:1px solid var(--line)}.designer-help article>span{font-size:9px;letter-spacing:1.6px;color:#929981}.designer-help h3{font-family:var(--serif);font-size:23px;font-weight:400;margin:12px 0}.designer-help p{font-size:11px;color:#7b806e;line-height:1.8}.send-dialog{width:min(470px,calc(100% - 28px));padding:32px;border-radius:5px;max-height:92dvh;overflow-y:auto}.send-dialog>.close-dialog{position:absolute;top:10px;right:10px}.send-dialog .eyebrow{margin:15px 0}.send-dialog h2{font-size:32px}.send-dialog>p{font-size:12px;color:#77806c;line-height:1.8;margin-top:18px}.send-dialog>.button{width:100%;margin-top:10px}.send-dialog .small{font-size:10px}.send-dialog input{margin-bottom:10px}#designer-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:12px 20px;border-radius:4px;font-size:12px;z-index:5;max-width:90%;text-align:center;opacity:0;pointer-events:none}#designer-toast.show{opacity:1}.preview-empty{font-size:12px;color:#808c72;text-align:center}button:disabled{transform:none!important}.designer-page footer{padding-top:25px}
@media(max-width:1000px){.designer-wrap{width:calc(100% - 48px)}.designer-layout{grid-template-columns:310px 1fr;gap:20px}.controls-panel section{padding:20px}.design-preview{height:350px;min-height:300px;padding:20px}.preview-tabs button{font-size:10px;padding:6px 10px}.design-summary{flex-wrap:wrap;padding:14px}.design-summary strong{font-size:12px}.layer-legend>span:last-child{margin-left:0}.designer-intro h1{font-size:37px}.format-badge{padding:12px}.format-badge small{font-size:9px}}
@media(max-width:760px){.designer-wrap{width:calc(100% - 32px)}.designer-intro{padding:20px 0 25px;display:block}.designer-intro h1{font-size:34px}.designer-intro p{font-size:12px}.format-badge{display:none}.back-shop{font-size:10px}.designer-layout{display:flex;flex-direction:column;gap:25px}.controls-panel{width:100%}.preview-column{position:static;width:100%}.controls-panel section{padding:20px}.type-picker button{font-size:11px}.preview-toolbar{padding:10px}.design-preview{height:360px;min-height:280px;padding:24px}.preview-tabs button{font-size:11px}.design-summary small{font-size:7px}.design-summary strong{font-size:11px}.design-summary{gap:12px;padding:15px 12px}.designer-help{grid-template-columns:1fr;gap:20px;margin-top:35px;padding-top:25px}.designer-help h3{margin:8px 0;font-size:22px}.designer-help p{margin:0}.send-dialog{padding:25px}.layer-legend{font-size:9px;gap:14px}.preview-caption{font-size:9px}.designer-page .header{height:90px}.designer-page .brand strong{font-size:22px}}
@media(min-width:641px) and (max-width:760px){.designer-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px}.preview-column{position:sticky;top:12px}.controls-panel section{padding:16px}.design-preview{height:290px;min-height:250px;padding:15px}.preview-tabs{gap:1px}.preview-tabs button{font-size:9px;padding:6px}.preview-toolbar{gap:3px}.design-summary{display:grid;gap:10px}.download-actions{display:grid;gap:3px}.download-panel{padding:16px}} @media(max-width:640px){.preview-column{display:contents}.preview-panel{position:sticky;top:0;z-index:2;order:-1;width:100%;box-shadow:0 6px 14px #283c261a}.design-preview{height:175px;min-height:175px;padding:12px}.preview-caption{padding:8px 12px}.layer-legend{display:none}.controls-panel input,.controls-panel select,.controls-panel textarea{scroll-margin-top:280px}.design-summary,.download-panel{width:100%;margin-top:0}.designer-layout{gap:18px}.preview-toolbar{padding:8px}.designer-intro{padding-bottom:20px}}
@media(min-width:641px){.preview-column{position:static}}

@font-face{font-family:PreviewLato;src:url("vendor/Lato-Regular.ttf") format("truetype");font-display:swap}.design-preview canvas{width:100%;height:100%;display:block}#submit-order>.button,#send-success>.button{width:100%;margin-top:18px}#submit-order p,#send-success p{font-size:12px;line-height:1.8;color:#69765e}#send-success .success-mark{font-size:36px;color:#355c3b}#send-success h3{font-family:var(--serif);font-size:27px}#send-success strong{letter-spacing:2px}.project-actions .field-hint{font-size:9px;color:#778167;max-width:180px}.controls-panel [hidden],.send-dialog [hidden]{display:none!important}

#send-success .whatsapp-send-help{padding:12px;background:#eef0e7;border:1px solid #d2dac9;border-radius:4px;color:#405637}#send-success .whatsapp-send-help strong{letter-spacing:0}#order-whatsapp{justify-content:center}#send-success .success-mark{margin:12px 0}#send-success .small{font-size:10px}

.lid-view-controls{display:flex;justify-content:center;padding:0 16px}.lid-view-controls .button{font-size:12px;padding:9px 16px;min-height:38px}.lid-view-controls:has([hidden]){display:none}

.lid-view-controls{gap:8px;flex-wrap:wrap}.orbit-hint{font-size:12px;text-align:center;color:var(--muted,#6c746a);margin:10px 12px 0}.lid-view-controls:has(button:not([hidden])){display:flex}
@media(max-width:640px){.design-preview{height:260px;min-height:260px}.controls-panel input,.controls-panel select,.controls-panel textarea{scroll-margin-top:410px}}

/* Keep the editor in view while its options scroll independently. */
@media(min-width:761px){
 .designer-page .header{height:76px}
 .designer-intro{padding:14px 0 18px;gap:20px}
 .designer-intro .eyebrow{margin-bottom:7px}
 .designer-intro h1{font-size:34px;margin-bottom:8px}
 .designer-intro p{font-size:12px}
 .designer-layout{height:var(--desktop-editor-height,calc(100dvh - 250px));min-height:650px;max-height:900px;align-items:stretch}
 .controls-panel{height:100%;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#98a58b #f2f1e9;scroll-padding-block:20px}
 .controls-panel:focus-visible{outline:3px solid #b0794a;outline-offset:3px}
 .controls-panel input,.controls-panel select,.controls-panel textarea{scroll-margin-block:20px}
 .preview-column{position:static;height:100%;min-height:0;display:flex;flex-direction:column;gap:10px}
 .preview-panel{flex:1;min-height:0;display:flex;flex-direction:column}
 .preview-toolbar,.lid-view-controls,.orbit-hint,.preview-caption,.layer-legend{flex-shrink:0}
 .preview-toolbar{padding:8px 14px}
 .orbit-hint{margin:6px 12px 0;font-size:11px}
 .design-preview{flex:1;min-height:220px;height:auto;padding:16px}
 .preview-caption,.layer-legend{padding:7px 14px}
 .design-summary{flex-shrink:0;margin:0;padding:8px 14px}
 .design-summary strong{margin-top:2px}
 .download-panel{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;margin:0;padding:10px 14px}
 .download-panel h2{font-size:20px}
 .download-panel p{margin:4px 0 0;font-size:10px;line-height:1.5}
 .download-panel>.button{width:auto;margin:0;font-size:11px;padding:10px 14px;gap:10px}
 .download-panel p.production-note{grid-column:1/-1;margin:0;font-size:9px;line-height:1.5}
 #design-error{flex-shrink:0;margin:0;max-height:70px;overflow:auto}
}
@media(min-width:761px) and (max-height:650px){
 .designer-page .header{height:56px}
 .designer-intro{padding:8px 0 12px}
 .designer-intro .eyebrow{display:none}
 .designer-intro h1{font-size:27px;margin-bottom:5px}
 .format-badge{padding:8px 12px}
 .designer-layout{height:var(--desktop-editor-height,calc(100dvh - 175px))}
 .design-summary,.download-panel>div,.download-panel .production-note{display:none}
 .download-panel{display:block;padding:8px 12px}
 .download-panel>.button{width:100%;min-height:40px;padding:7px 12px}
 .layer-legend{display:none}
}

/* Direct manipulation tools belong to the custom piece preview only. */
.designer-page .piece-editor-tools{position:relative;flex-shrink:0;padding:10px 14px 8px;background:#f8f8f1;border-bottom:1px solid var(--line);color:#40523b}
.designer-page .piece-editor-tools[hidden]{display:none!important}
.piece-editor-tools .editor-main-row,.piece-editor-tools .editor-property-row{display:flex;align-items:end;gap:10px}
.piece-editor-tools .editor-main-row{justify-content:space-between}
.piece-editor-tools .editor-target-label{flex:1;max-width:230px;margin:0;min-width:90px}
.piece-editor-tools .editor-control-label{display:block;font-size:10px;line-height:1.3;margin:0 0 4px;color:#64735b}
.designer-page .piece-editor-tools select,.designer-page .piece-editor-tools input{font-family:var(--sans);height:36px;min-height:36px;margin:0;padding:6px 9px;font-size:12px;border:1px solid #c8d0be;border-radius:4px;background:#fffdf8;color:#354d3c}
.designer-page .piece-editor-tools select{width:100%}
.piece-editor-tools .editor-history{display:flex;gap:6px;flex-shrink:0}
.designer-page .piece-editor-tools button,.designer-page .piece-editor-tools summary{font-family:var(--sans);font-size:11px;line-height:1.2;color:#40523b;min-height:36px;border:1px solid #c8d0be;border-radius:4px;background:#fffdf8;padding:7px 10px;cursor:pointer}
.piece-editor-tools .editor-history button{white-space:nowrap}
.piece-editor-tools .editor-history button span{font-size:17px;vertical-align:-1px}
.piece-editor-tools .editor-property-row{margin-top:7px}
.piece-editor-tools .editor-property{flex:1;min-width:0}
.piece-editor-tools .editor-property>label{margin:0 0 4px}
.piece-editor-tools .editor-number-group{display:flex;align-items:center;gap:4px}
.designer-page .piece-editor-tools .editor-number-group>button{width:36px;flex:0 0 36px;padding:5px;font-size:20px}
.piece-editor-tools .editor-number{position:relative;flex:1;min-width:0}
.designer-page .piece-editor-tools .editor-number input{width:100%;padding-right:25px;appearance:textfield;-moz-appearance:textfield}
.piece-editor-tools .editor-number input::-webkit-inner-spin-button,.piece-editor-tools .editor-number input::-webkit-outer-spin-button{appearance:none;margin:0}
.piece-editor-tools .editor-number>span{position:absolute;top:50%;right:9px;transform:translateY(-50%);font-size:11px;color:#6b775f;pointer-events:none}
.piece-editor-tools .editor-footer{position:relative;display:flex;align-items:start;gap:12px;margin-top:7px;min-height:36px}
.piece-editor-tools .editor-more{flex:0 0 auto;max-width:100%;margin:0}
.designer-page .piece-editor-tools .editor-more>summary{display:flex;align-items:center;gap:6px;list-style:none;min-height:36px;padding:5px 8px;background:transparent;border-color:transparent;font-size:10px}
.piece-editor-tools .editor-more>summary::-webkit-details-marker{display:none}
.piece-editor-tools .editor-more>summary::before{content:'+';font-size:15px;line-height:1}
.piece-editor-tools .editor-more[open]>summary::before{content:'−'}
.piece-editor-tools .editor-extra-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:5px}
.piece-editor-tools .editor-more[open]{flex:1}
.piece-editor-tools .editor-feedback{min-width:0;flex:1;padding-top:3px}
.piece-editor-tools .editor-more[open]+.editor-feedback{display:none}
.piece-editor-tools #edit-status{min-width:0;margin:0;padding:0;font-size:10px;line-height:1.4;color:#68785e;overflow-wrap:anywhere}
.piece-editor-tools #edit-help{display:none;font-size:10px;line-height:1.4;color:#68785e;margin:1px 0 0}
.designer-page .piece-editor-tools button:hover,.designer-page .piece-editor-tools summary:hover{background:#edf0e6;border-color:#9aa98b}
.designer-page .piece-editor-tools button:disabled{opacity:.4;cursor:default}
.designer-page .piece-editor-tools :is(button,select,input,summary):focus-visible{outline:3px solid #b0794a;outline-offset:2px}
.designer-page .piece-editor-tools #edit-delete{color:#874d3a}
.designer-page .piece-ratio-control{line-height:1.5;font-size:11px!important}
.designer-page .piece-ratio-control input{flex:0 0 auto;min-height:18px;min-width:18px}
@media(min-width:761px){
 .piece-editor-tools .editor-property-row{max-width:430px}
 .piece-editor-tools .editor-more[open]{max-height:150px;overflow-y:auto;padding-bottom:3px;scrollbar-width:thin}
 .designer-page:has(.editor-more[open]) .designer-layout{min-height:800px}
}
@media(min-width:761px) and (max-width:1099px){
 .designer-page .designer-layout{min-height:700px}
}
@media(min-width:1100px){
 .designer-page .piece-editor-tools{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(150px,1fr) minmax(150px,1fr) auto;align-items:end;gap:6px 10px;padding:8px 14px 6px}
 .piece-editor-tools .editor-main-row,.piece-editor-tools .editor-property-row{display:contents}
 .piece-editor-tools .editor-target-label{grid-column:1;grid-row:1;max-width:none}
 .piece-editor-tools .editor-property-row>.editor-property:first-child{grid-column:2;grid-row:1}
 .piece-editor-tools .editor-property-row>.editor-property:last-child{grid-column:3;grid-row:1}
 .piece-editor-tools .editor-history{grid-column:4;grid-row:1;align-self:end}
 .piece-editor-tools .editor-footer{grid-column:1/-1;grid-row:2;align-self:start;width:100%;margin-top:0}
 .piece-editor-tools #edit-help{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:760px){
 .designer-page .piece-editor-tools{padding:6px 10px 3px}
 .piece-editor-tools .editor-main-row{gap:7px;align-items:center}
 .piece-editor-tools .editor-control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .piece-editor-tools .editor-target-label{max-width:none;min-width:80px}
 .designer-page .piece-editor-tools select,.designer-page .piece-editor-tools input{height:36px;min-height:36px;padding:5px 7px;font-size:16px;border-radius:6px}
 .piece-editor-tools .editor-history{gap:4px}
 .designer-page .piece-editor-tools button{font-size:11px;min-height:36px;padding:6px 8px;border-radius:6px}
 .piece-editor-tools .editor-history button span{font-size:16px}
 .piece-editor-tools .editor-property-row{gap:8px;margin-top:5px}
 .piece-editor-tools .editor-number-group{gap:3px}
 .designer-page .piece-editor-tools .editor-number-group>button{width:36px;flex-basis:36px;font-size:20px}
 .designer-page .piece-editor-tools .editor-number input{padding-right:20px;padding-left:5px;text-align:center}
 .piece-editor-tools .editor-number>span{right:5px;font-size:11px}
 .piece-editor-tools .editor-footer{margin-top:2px;gap:6px;min-height:36px}
 .piece-editor-tools .editor-feedback{padding-top:0}
 .designer-page .piece-editor-tools .editor-more>summary{min-height:36px;padding:5px 0;font-size:10px}
 .piece-editor-tools #edit-status{font-size:10px;padding-top:7px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .piece-editor-tools .editor-more[open]{max-height:160px;overflow-y:auto;overscroll-behavior:contain}
 .piece-editor-tools #edit-help{font-size:11px;line-height:1.4;margin-top:7px}
 .piece-editor-tools .editor-extra-actions{gap:5px;padding-top:3px}
 .piece-editor-tools .editor-extra-actions button{min-width:0;line-height:1.3}
 .designer-page .piece-ratio-control{font-size:13px!important;min-height:36px;gap:10px}
}