/* The studio (index.html section.ed, studio.js). Loaded after editor.css and overriding it inside .ed.
   Paper and charcoal like the brand, DM Sans for the work, Clash Display for the few titles; every control ≥ 44 px.
   Wide screens: three fixed columns (add · shirt · details and order), no page scroll, the shirt never moves.
   Phones (and narrow tablets): the shirt pinned under the header, one panel below it, a tab bar at the bottom. */
.ed{--bg:#f3f1ec;--panel:#fbfaf7;--ink:#1b1a17;--muted:#6b665d;--line:#e3dfd6;--soft:#ece9e2;--focus:#1b1a17;
  background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent}
.ed *{box-sizing:border-box}
.ed .eyebrow{margin:0 0 14px;font:600 11px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ed label{display:block;margin:18px 0 8px;font:600 12px 'DM Sans',sans-serif;letter-spacing:.04em;color:var(--muted)}
.ed :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ed button{font-family:inherit}

/* header */
.ed .ed-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;height:64px;padding:0 16px;border-bottom:1px solid var(--line);background:#f3f1ecf2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ed .studio-brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.ed .studio-brand .brand-logo{width:118px;height:auto}
.ed .studio-brand span{font:600 11px 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ed .ed-icon{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;color:var(--ink);cursor:pointer;list-style:none}
.ed .ed-icon::-webkit-details-marker{display:none}
.ed .ed-icon:hover{background:var(--soft)}
.ed .ed-icon:disabled{opacity:.3;cursor:default;background:none}
.ed .ed-history{display:flex}
.ed .ed-more{position:relative}
.ed .ed-menu{position:absolute;right:0;top:50px;z-index:30;display:grid;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 18px 50px #1b1a1724}
.ed .ed-menu :is(button,label){display:flex;align-items:center;min-height:44px;margin:0;padding:0 14px;border:0;border-radius:10px;background:none;color:var(--ink);font:500 14px 'DM Sans',sans-serif;letter-spacing:0;text-align:left;cursor:pointer}
.ed .ed-menu :is(button,label):hover{background:var(--soft)}
.ed .ed-cta{display:flex;align-items:center;gap:8px;min-height:44px;margin-left:6px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:#f6f3ec;font:600 13px 'DM Sans',sans-serif;letter-spacing:.06em;cursor:pointer}
.ed .ed-cta span{opacity:.7;font-weight:500}

/* stage */
.ed .ed-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:16px;background:radial-gradient(ellipse at 50% 42%,#fffdf8,#ebe8e1 75%)}
.ed .editor-shirt{position:relative;width:min(100%,640px);margin:0;aspect-ratio:1}
.ed .print-area{overflow:visible;outline:1px dashed #1b1a1740;outline-offset:0}
.ed .print-area.hide-guide{outline-color:transparent}
.ed .print-layer{overflow:visible}
.ed .print-layer.selected{outline:1.5px solid var(--ink);outline-offset:0;background:none}
.ed .print-layer canvas,.ed .print-layer>img{overflow:hidden}
.ed .ed-handle{position:absolute;width:14px;height:14px;margin:-7px;border:1.5px solid var(--ink);border-radius:50%;background:#fff;touch-action:none;z-index:2}
.ed .ed-handle::after{content:'';position:absolute;inset:-15px} /* a 44 px hit area around the visible dot */
.ed .ed-nw{left:0;top:0;cursor:nwse-resize}.ed .ed-ne{right:0;top:0;cursor:nesw-resize}.ed .ed-sw{left:0;bottom:0;cursor:nesw-resize}.ed .ed-se{right:0;bottom:0;cursor:nwse-resize}
.ed .ed-guide{position:absolute;pointer-events:none;opacity:0;background:#e0457b;transition:opacity .12s}
.ed .ed-guide.on{opacity:1}
.ed .ed-guide-v{left:50%;top:31%;width:1px;height:38.75%}  /* the print area: 31% wide at 34.5%, 4:5 tall */
.ed .ed-guide-h{top:50.375%;left:34.5%;height:1px;width:31%}
.ed .ed-chips{position:absolute;z-index:6;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--ink);color:#f6f3ec;box-shadow:0 10px 30px #1b1a1740}
.ed .ed-chips[hidden]{display:none}
.ed .ed-chips button{display:flex;align-items:center;gap:6px;min-width:40px;height:40px;padding:0 10px;border:0;border-radius:999px;background:none;color:inherit;font:600 12px 'DM Sans',sans-serif;cursor:pointer}
.ed .ed-chips button:hover{background:#ffffff1f}
.ed .ed-chips button[hidden]{display:none}
.ed .ed-chips .is-danger{color:#ffb4a8}
.ed .ed-stage.is-dragging .ed-chips{opacity:0;pointer-events:none}
.ed .ed-empty{position:absolute;left:34.5%;top:31%;width:31%;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.ed .ed-empty[hidden]{display:none}
.ed .ed-empty p{margin:0 0 4px;font:600 10px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ed .ed-empty :is(button,label){pointer-events:auto;display:flex;align-items:center;gap:6px;min-height:40px;margin:0;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fbfaf7e6;color:var(--ink);font:600 12px 'DM Sans',sans-serif;letter-spacing:0;cursor:pointer;white-space:nowrap}
.ed .editor-shirt.color-ink .ed-empty p{color:#cfc9bd}
.ed .ed-stage-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,640px);margin-top:6px}
.ed .ed-toggle{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;font-weight:500;letter-spacing:0;color:var(--muted)}
.ed .ed-toggle input{width:18px;height:18px;accent-color:var(--ink)}
.ed .editor-status{margin:0;font-size:13px;color:var(--muted);text-align:right}

/* panels */
.ed .ed-col{min-width:0}
.ed .ed-panel{padding:22px 20px;border-bottom:1px solid var(--line)}
.ed .editor-add{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.ed .ed-big{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:96px;margin:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,transform .12s cubic-bezier(.23,1,.32,1)}
.ed .ed-big:hover{border-color:#1b1a1766}
.ed .ed-big:active{transform:scale(.98)}
.ed .ed-big span{display:grid;gap:2px}
.ed .ed-big b{font:600 15px 'DM Sans',sans-serif}
.ed .ed-big small{font-size:12px;color:var(--muted);letter-spacing:0;font-weight:400}
.ed .editor-hint{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.ed #layer-title{margin:0 0 6px;font:600 22px/1.1 'Clash Display','DM Sans',sans-serif}
.ed .ed-tip{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.ed .ed-tip[hidden]{display:none}
.ed :is(textarea,input[type=number]){width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font:500 16px 'DM Sans',sans-serif}
.ed textarea{resize:vertical}
.ed .visual-picker button{border-color:var(--line);background:var(--panel)}
.ed .visual-picker button[aria-checked=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ed .ed-inks{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ed .ed-inks button,.ed .ed-inks input{width:40px;height:40px;padding:0;border:1px solid #0000002e;border-radius:50%;background:var(--c);cursor:pointer}
.ed .ed-inks button[aria-checked=true],.ed .ed-inks input.is-on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.ed .ed-inks input{appearance:none;-webkit-appearance:none;background:conic-gradient(#e0457b,#c79a2e,#34a853,#2c4a7a,#8a4fd6,#e0457b);overflow:hidden}
.ed .ed-inks input::-webkit-color-swatch-wrapper{padding:0}.ed .ed-inks input::-webkit-color-swatch{border:0;opacity:0}
.ed input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--ink);background:none}
.ed .ed-fine{margin-top:12px}
.ed .ed-fine summary{display:flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.ed .ed-layer{display:flex;align-items:center;gap:4px;margin-bottom:6px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.ed .ed-layer.is-on{border-color:var(--ink)}
.ed .ed-layer-pick{flex:1;display:flex;align-items:center;gap:12px;min-width:0;min-height:52px;padding:6px 10px;border:0;background:none;color:var(--ink);font:500 14px 'DM Sans',sans-serif;text-align:left;cursor:pointer}
.ed .ed-layer-pick :is(i,img){display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:var(--soft);font-style:normal;font-weight:700;font-size:15px;object-fit:contain}
.ed .ed-layer-pick span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ed .ed-layer-del{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--muted);cursor:pointer}
.ed .ed-layer-del:hover{background:var(--soft);color:#a3271b}
.ed .ed-none{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.ed .editor-note{margin:0}
.ed .editor-order{margin:0}
.ed .ed-stepper{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.ed .ed-stepper button{height:48px;border:0;background:none;color:var(--ink);font:500 22px 'DM Sans',sans-serif;cursor:pointer}
.ed .ed-stepper button:hover{background:var(--soft)}
.ed .ed-stepper input{min-height:48px;border:0;border-radius:0;text-align:center;background:none;-moz-appearance:textfield}
.ed .ed-stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.ed .ed-total{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 0;font-size:14px;color:var(--muted)}
.ed .ed-total b{font:600 24px 'Clash Display','DM Sans',sans-serif;color:var(--ink)}
.ed .studio-order-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin:14px 0 0;border:0;border-radius:999px;background:var(--ink)!important;color:#f6f3ec!important;font:600 14px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.ed .ed-tabs{display:none}

/* wide screens: three fixed columns */
@media(min-width:980px){
  .ed.print-editor{overflow:hidden}
  .ed .editor-layout.ed-body{display:grid;grid-template-columns:300px minmax(0,1fr) 340px;height:calc(100svh - 64px);min-height:0}
  .ed .ed-left{order:-1;border-right:1px solid var(--line);overflow:auto}
  .ed .ed-right{border-left:1px solid var(--line);overflow:auto;display:flex;flex-direction:column}
  .ed .ed-right .editor-note{border-bottom:0}
  .ed .ed-stage{height:100%}
  .ed .editor-shirt{width:min(100%,calc(100svh - 64px - 110px))}
  .ed .ed-stage-foot{width:min(100%,calc(100svh - 64px - 110px))}
}
/* phones and narrow tablets: the shirt stays pinned, one panel at a time under it, tabs at the bottom */
@media(max-width:979px){
  .ed.print-editor{overflow:auto;overscroll-behavior:contain}
  .ed .ed-top{height:56px;padding:0 8px}
  .ed .studio-brand .brand-logo{width:96px}
  .ed .studio-brand span{display:none}
  .ed .ed-cta{padding:0 14px}
  .ed .editor-layout.ed-body{display:block;min-height:0}
  .ed .ed-stage{position:sticky;top:56px;z-index:10;height:min(50svh,460px);padding:8px 12px 4px;border-bottom:1px solid var(--line)}
  .ed .editor-shirt{width:auto;height:calc(100% - 44px);max-width:100%}
  .ed .ed-stage-foot{width:100%;margin-top:0}
  .ed .editor-status{font-size:12px}
  .ed .ed-col{display:contents}
  .ed .ed-panel{display:none;border-bottom:0;padding:20px 16px}
  .ed[data-tab=design] .ed-panel[data-tab=design],.ed[data-tab=shirt] .ed-panel[data-tab=shirt],.ed[data-tab=layers] .ed-panel[data-tab=layers],.ed[data-tab=order] .ed-panel[data-tab=order]{display:block}
  .ed .ed-details{border-top:1px solid var(--line)}
  .ed[data-tab=design] .ed-right{display:contents}
  .ed .ed-body::after{content:'';display:block;height:calc(84px + env(safe-area-inset-bottom))} /* room above the tab bar */
  .ed .ed-tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fbfaf7f2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .ed .ed-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border:0;border-radius:14px;background:none;color:var(--muted);font:600 11px 'DM Sans',sans-serif;letter-spacing:.04em;cursor:pointer}
  .ed .ed-tabs button[aria-current=true]{color:var(--ink);background:var(--soft)}
}
@media(max-width:380px){.ed .ed-history .ed-icon{width:38px}.ed .studio-brand .brand-logo{width:80px}}
@media(prefers-reduced-motion:reduce){.ed *{transition:none!important}}
/* overrides of older editor.css rules that would otherwise win */
.ed .editor-add .ed-big{text-align:left;padding:14px;font-size:inherit}
.ed .ed-stage{min-height:0}
@media(min-width:980px){.ed .ed-right,.ed .ed-left{grid-column:auto;border-top:0}}
.ed .ed-top{flex-wrap:nowrap}
.ed .editor-add label.ed-big{color:var(--ink)}
@media(max-width:979px){.ed .ed-cta{margin-left:2px;padding:0 12px;font-size:12px;white-space:nowrap}.ed .ed-top .ed-icon{width:40px}}
@media(max-width:979px){.ed.has-sel[data-tab=design] .ed-panel[data-tab=design]:not(.ed-details){display:none}.ed.has-sel .ed-details{border-top:0}}

/* The order review (studio-orders.js #studio-order-dialog), in the studio's paper and charcoal. */
dialog#studio-order-dialog{--ink:#1b1a17;--muted:#6b665d;--line:#e3dfd6;--panel:#fbfaf7;width:min(880px,calc(100vw - 24px));max-height:92svh;padding:0;border:1px solid var(--line);border-radius:28px;background:#f3f1ec;color:var(--ink);font-family:'DM Sans',sans-serif;box-shadow:0 40px 120px #1b1a1740}
dialog#studio-order-dialog::backdrop{background:#121110a8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#studio-order-dialog .order-review-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 14px 0 26px;border-bottom:1px solid var(--line);background:#f3f1ecf2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 11px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
#studio-order-dialog .close-order{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
#studio-order-dialog .close-order:hover{background:#ece9e2}
#studio-order-dialog h2{margin:22px 26px 18px;font:600 clamp(30px,6vw,44px)/1.02 'Clash Display','DM Sans',sans-serif;color:var(--ink)}
#studio-order-dialog .order-review-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:0 26px 26px}
#studio-order-dialog #order-preview{width:100%;border-radius:20px;background:radial-gradient(ellipse at 50% 42%,#fffdf8,#ebe8e1 75%);border:1px solid var(--line)}
#studio-order-dialog #order-spec{margin:16px 0 6px;font:600 18px 'Clash Display','DM Sans',sans-serif;color:var(--ink)}
#studio-order-dialog .order-fineprint{font-size:13px;line-height:1.6;color:var(--muted)}
#studio-order-form label{display:block;margin:0 0 16px;font:600 12px 'DM Sans',sans-serif;letter-spacing:.04em;color:var(--muted)}
#studio-order-form input:not([type=checkbox]),#studio-order-form textarea{width:100%;min-height:50px;margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font:500 16px 'DM Sans',sans-serif;letter-spacing:0}
#studio-order-form :is(input,textarea):focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}
#studio-order-form .order-consent{display:flex;gap:12px;align-items:flex-start;font:500 13px/1.55 'DM Sans',sans-serif;letter-spacing:0;color:var(--ink)}
#studio-order-form .order-consent input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
#send-studio-order{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;margin-top:16px;border:0;border-radius:999px;background:var(--ink);color:#f6f3ec;font:600 14px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
#send-studio-order:disabled{opacity:.5;cursor:wait}
#studio-order-dialog #order-response{margin:0 26px 26px;font-size:14px;line-height:1.6;color:var(--ink)}
#studio-order-dialog #order-response:empty{display:none}
#studio-order-dialog :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:700px){dialog#studio-order-dialog{width:calc(100vw - 16px);border-radius:24px}#studio-order-dialog .order-review-layout{grid-template-columns:1fr;gap:18px;padding:0 18px 22px}#studio-order-dialog h2{margin:18px 18px 14px}#studio-order-dialog #order-preview{max-width:300px;display:block;margin:0 auto}#studio-order-dialog .order-review-head{padding:0 8px 0 18px}#studio-order-dialog #order-response{margin:0 18px 22px}}