/* Maketu redaktors (Logoprint): kreisajā pusē produkts ar logo, labajā — soļi. Krāsas un fonts no site.css */
.designer{--stage:#F4EFE8;--ok:#1b7f48;--warn:#9a6412;--bad:#bf2d2d;--ok-bg:#e8f2d0;--warn-bg:#fbf0dc;--bad-bg:#fbe5e5;padding-bottom:56px}
.designer [hidden]{display:none!important}
.designer__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:8px 0 22px}
.designer__head h1{margin:4px 0 8px}
.designer__head .muted{max-width:640px;margin:0}
.order-chip{font-weight:700;font-size:var(--small);border:1.5px solid var(--line);background:var(--white);padding:8px 12px;border-radius:999px}
.order-chip em{font-style:normal;color:var(--grey);margin-right:6px}

.designer__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:860px){.designer__grid{grid-template-columns:minmax(0,1fr);gap:16px}}

.designer .stage{position:sticky;top:96px;display:flex;flex-direction:column;gap:10px;min-width:0}
@media (max-width:860px){.designer .stage{position:static}.designer__lead{display:none}}
.canvas-box{background:var(--stage);border-radius:var(--radius);aspect-ratio:1/1;width:100%;margin:0 auto;overflow:hidden}
@media (max-width:860px){.canvas-box{width:min(100%,58vh)}}
#mock{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#mock:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.readout{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:var(--small);color:var(--grey)}
.readout strong{color:var(--violet)}
.designer .hint{font-size:var(--small);color:var(--grey);margin:0}
.designer .hint--approx{color:var(--warn)}

.designer .panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.designer .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px}
.step-h{display:flex;align-items:center;gap:10px;margin:0;font-size:1.1rem}
.step-h i{font-style:normal;font-size:13px;font-weight:800;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--violet);color:var(--white);flex:none}
.prod{display:flex;gap:12px;align-items:center}
.designer .swatch{width:48px;height:48px;border-radius:10px;border:1px solid var(--line);flex:none;overflow:hidden;background:var(--white)}
.designer .swatch img{width:100%;height:100%;object-fit:cover}
.prod b{display:block;font-weight:700;line-height:1.3}
.prod small{font-size:var(--small);color:var(--grey)}

.drop{position:relative;border:2px dashed var(--line);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--violet);background:var(--bg)}
.drop:focus-within{outline:3px solid var(--orange);outline-offset:2px}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop .thumb{width:60px;height:60px;border-radius:8px;flex:none;background:repeating-conic-gradient(var(--line) 0 25%,transparent 0 50%) 0 0/12px 12px;display:grid;place-items:center;overflow:hidden}
.drop .thumb img{max-width:90%;max-height:90%}
.drop .txt{min-width:0}
.drop .txt b{display:block;font-weight:700;overflow-wrap:anywhere}
.drop .txt span{font-size:var(--small);color:var(--grey)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--small);padding:5px 10px;border-radius:999px;font-weight:700;align-self:flex-start}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.ok{color:var(--ok);background:var(--ok-bg)}.chip.warn{color:var(--warn);background:var(--warn-bg)}.chip.bad{color:var(--bad);background:var(--bad-bg)}

.designer label.check{display:flex;gap:9px;align-items:center;cursor:pointer}
.designer label.check input{width:18px;height:18px;accent-color:var(--violet)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font:inherit;font-weight:700;color:var(--violet);background:var(--white);border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;text-align:left}
.seg button[aria-pressed="true"]{background:var(--violet);color:var(--white);border-color:var(--violet)}
.seg button small{display:block;font-size:12px;font-weight:600;opacity:.75}
.designer .field{display:flex;flex-direction:column;gap:6px}
.designer .field>span,.designer .field>label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);font-weight:700}
.designer .row{display:flex;gap:10px;align-items:center}
.designer .row input[type=range]{flex:1;min-width:0;accent-color:var(--violet)}
.num{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;background:var(--white);flex:none}
.num input{width:64px;border:0;background:transparent;color:var(--violet);font:inherit;font-weight:700;padding:8px 4px 8px 10px;text-align:right}
.num em{font-style:normal;color:var(--grey);padding-right:10px}
.designer select,.designer textarea{font:inherit;color:var(--violet);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.designer textarea{min-height:80px;resize:vertical}
.designer .btns{display:flex;flex-wrap:wrap;gap:8px}
.designer .small{font-size:var(--small)}
.designer :is(button,select,input,textarea):focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.colors{display:flex;flex-wrap:wrap;gap:8px}
.colors button{width:46px;height:46px;padding:0;border-radius:10px;border:1.5px solid var(--line);background:var(--white);cursor:pointer;overflow:hidden}
.colors button img,.colors button span{width:100%;height:100%;object-fit:cover;display:block}
.colors button[aria-pressed="true"]{border-color:var(--violet);box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--violet)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Maketa logs */
.d-overlay{position:fixed;inset:0;z-index:100;background:rgba(30,15,44,.6);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
.d-overlay[hidden]{display:none}
.sheet{background:var(--white);border-radius:var(--radius);max-width:980px;width:100%;padding:20px;display:flex;flex-direction:column;gap:14px}
.sheet-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet-h h2{margin:0;font-size:1.3rem}
.sheet img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.btn[disabled]{opacity:.55;cursor:wait}
@media (prefers-reduced-motion:reduce){.designer *{transition:none!important}}

/* Apdrukas vietas (virs attēla) */
.places{display:flex;flex-direction:column;gap:6px}
.places__label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);font-weight:700}
.places__list{display:flex;flex-wrap:wrap;gap:6px}
.place{display:flex;align-items:center;gap:8px;font:inherit;font-weight:700;color:var(--violet);background:var(--white);border:1.5px dashed var(--line);border-radius:10px;padding:7px 12px 7px 8px;cursor:pointer;text-align:left;line-height:1.2}
.place small{display:block;font-size:12px;font-weight:600;color:var(--grey)}
.place__mark{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:14px;flex:none}
.place--on{border-style:solid;border-color:var(--violet)}
.place--on .place__mark{background:var(--lime)}
.place--active{background:var(--violet);color:var(--white)}
.place--active small{color:rgba(255,255,255,.75)}
.place--active .place__mark{background:var(--lime);color:var(--violet)}

/* Rīki zem attēla */
.tools{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:space-between}
.tools__group{display:flex;flex-wrap:wrap;gap:4px}
.tool{width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:10px;background:var(--white);color:var(--violet);cursor:pointer;padding:0}
.tool:hover:not(:disabled){border-color:var(--violet)}
.tool:disabled{opacity:.4;cursor:default}
.tool--text{width:auto;padding:0 12px;font:inherit;font-weight:800;font-size:var(--small)}
@media (max-width:420px){.tool{width:38px;height:38px}.tool--text{width:auto}}

@media (max-width:860px){
  .places__list{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .place{flex:none}
  .places .hint{display:none}
  .designer__head h1{font-size:1.6rem}
}