/* Restore the native centering lost to shop.css's universal margin reset. */
.cs-dialog{position:fixed;inset:0;margin:auto;width:min(100% - 32px,1080px);max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:20px;background:var(--c-surface,#fff);color:var(--c-text,#232323);box-shadow:0 16px 80px #0003;overflow:hidden}
.cs-dialog--choose{width:min(100% - 32px,680px)}
.cs-dialog::backdrop{background:#17171780;backdrop-filter:blur(3px)}
.cs-dialog[open]{display:flex;flex-direction:column}
.cs-dialog *{box-sizing:border-box;min-width:0}
.cs-dialog [hidden]{display:none!important}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid var(--c-line,#e6e6e6);flex-shrink:0}
.cs-head h2{font-size:20px;line-height:1.4;margin:0}
.cs-head-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.cs-help-toggle{border:1px solid var(--c-line,#dedede);border-radius:9px;padding:8px 12px;color:var(--c-text,#262626);background:#fff;font-size:13px}
.cs-eyebrow{font-size:12px;letter-spacing:.08em;color:var(--c-text-sub,#666);margin:0 0 5px}
.cs-icon{font:28px/1 sans-serif;width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;background:var(--c-surface-alt,#f5f5f5)}
.cs-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:24px}
#cs-work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.cs-preview-column{position:static}
.cs-proof{position:relative;display:flex;align-items:center;justify-content:center;min-height:230px;background:#eeeae6;border-radius:12px;padding:18px;overflow:hidden}
.cs-proof>img{display:block;max-height:58vh;max-width:100%;width:auto;height:auto;box-shadow:0 5px 20px #0002;transition:opacity .15s}
.cs-proof>img.is-stale{opacity:.4}
#cs-proof-status{font-size:14px;line-height:1.6;text-align:center;max-width:90%;padding:12px;background:#fffc;position:absolute;border-radius:8px;color:#262626}
.cs-group-nav{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:12px;margin-bottom:10px;font-size:14px}
.cs-proof-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cs-note{font-size:13px;line-height:1.6;color:var(--c-text-sub,#666);margin:8px 0;word-break:keep-all;overflow-wrap:anywhere}
.cs-quality-warning{padding:8px 10px;border-radius:8px;background:#f6eadf;color:#67442f}
.cs-dialog button{cursor:pointer;min-height:44px;touch-action:manipulation;font-family:inherit;white-space:normal;overflow-wrap:anywhere}
.cs-dialog button:disabled{cursor:default;opacity:.5}
.cs-dialog button:focus-visible,.cs-dialog input:focus-visible,.cs-dialog select:focus-visible{outline:3px solid var(--c-focus,#bc4567);outline-offset:2px}
.cs-proof-actions button,.cs-group-nav button,.cs-chips button,.cs-apply{border:1px solid var(--c-line,#dedede);border-radius:9px;padding:9px 12px;background:#fff;color:var(--c-text,#262626);font-size:13px}
.cs-group-nav button{width:44px;font-size:18px}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-chips button[aria-pressed=true]{border-color:var(--c-text,#262626);background:var(--c-text,#262626);color:#fff}
.cs-dialog fieldset{border:0;padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--c-line,#e6e6e6)}
.cs-dialog fieldset:last-of-type{border-bottom:0;margin-bottom:0}
.cs-dialog legend{font-size:15px;font-weight:700;margin-bottom:10px;padding:0;line-height:1.5}
.cs-dialog legend small{font-weight:400;color:var(--c-text-sub,#666)}
.cs-dialog label{display:block;font-size:13px;line-height:1.6;margin:8px 0}
.cs-dialog input[type=text],.cs-dialog input[type=number],.cs-dialog select{width:100%;min-height:44px;border:1px solid var(--c-line,#d8d8d8);border-radius:8px;padding:10px;font-family:inherit;font-size:16px;line-height:1.4;color:inherit;background:#fff}
/* Keep field focus visible as one pink edge, without a detached dark ring. */
.cs-dialog input[type=text]:focus,.cs-dialog input[type=number]:focus,.cs-dialog select:focus{border-color:var(--c-btn-point-bg,#e51566);outline:2px solid var(--c-btn-point-bg,#e51566);outline-offset:-1px;box-shadow:none}
.cs-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cs-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0}
.cs-editor-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 20px}
.cs-editor-actions button{width:100%}
.cs-fit-controls{padding-top:16px;border-top:1px solid var(--c-line,#e6e6e6)}
.cs-control-label{font-size:13px;font-weight:700;line-height:1.6;margin-bottom:8px}
.cs-fit-controls .cs-chips{margin-bottom:14px}
.cs-photo{position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:9px;padding:3px;background:var(--c-surface-alt,#eee);overflow:hidden;min-height:44px}
.cs-photo img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block}
.cs-photo span{position:absolute;left:4px;bottom:4px;background:#fff;color:#222;border-radius:4px;font-size:12px;min-width:20px}
.cs-photo.is-active{border-color:var(--c-text,#222)}
.cs-range{display:grid!important;grid-template-columns:65px minmax(0,1fr);align-items:center;gap:10px}
.cs-range input{width:100%;height:44px;accent-color:var(--c-text,#222)}
.cs-check{display:flex!important;align-items:center;gap:10px;min-height:44px}
.cs-check input{width:22px;height:22px;accent-color:var(--c-text,#222)}
.cs-quantity{display:flex;align-items:center;gap:10px}
.cs-quantity>button{width:44px;height:44px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:22px}
.cs-quantity>label{display:flex;align-items:center;gap:8px;margin:0}
.cs-quantity input{max-width:76px;text-align:center}
.cs-apply{width:100%}
.cs-foot{flex-shrink:0;padding:12px 24px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--c-line,#e6e6e6);background:#fff}
.cs-foot>p{font-size:13px;line-height:1.5;margin:0 0 10px;word-break:keep-all;overflow-wrap:anywhere}
.cs-foot>div{display:flex;justify-content:flex-end;gap:10px}
.cs-foot .btn{font-size:14px;padding:10px 16px;min-height:44px}
.cs-layout-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.cs-layout-list>button{display:flex;flex-direction:column;gap:8px;text-align:left;border:1px solid #ddd;border-radius:12px;padding:18px;background:#fff;font-size:14px}
.cs-layout-list>button span,.cs-layout-list>button small{color:var(--c-text-sub,#666);font-size:12px}
.cs-mini{position:relative;display:block;flex:0 0 88px;width:88px;overflow:hidden}
.cs-mini>img{display:block;width:100%;height:100%;object-fit:contain}
.cs-mini-cell{position:absolute;display:block;overflow:hidden}
.cs-mini-cell img{width:100%;height:100%;display:block}
.setactions{display:flex;width:100%;gap:8px;flex-wrap:wrap}
.setactions button{min-height:44px}
.cs-unavailable{padding:14px;margin-bottom:20px;border-radius:10px;background:#f6eadf;font-size:13px;line-height:1.6}
.cs-unavailable p{margin:0 0 8px}
.cs-unavailable button{border:1px solid #bcb1a7;border-radius:8px;padding:8px 12px;background:#fff;color:#262626}
.cs-share-confirm{max-width:480px}
.cs-chips button small{display:block;font-size:11px;line-height:1.4;margin-top:4px}
.cs-layout-more{margin-top:10px;min-height:44px;padding:10px 12px;border:1px solid var(--c-line,#dedede);border-radius:9px;background:#fff;color:inherit;font:inherit;font-size:13px}
.cs-layout-change{border:1px solid var(--c-line,#dedede);border-radius:12px;padding:14px;margin-bottom:20px;background:var(--c-surface-alt,#f7f5f1);font-size:14px;line-height:1.6}
.cs-layout-change h3,.cs-layout-change h4{font-size:15px;margin:0 0 8px}
.cs-layout-change .cs-layout-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cs-layout-change .cs-layout-list>button{padding:10px}
.cs-layout-change p{overflow-wrap:anywhere}
.cs-purpose-example{position:relative;display:block;width:80px;flex-shrink:0;background:#fff;box-shadow:0 1px 5px #0002;overflow:hidden}
.cs-purpose-example svg{position:absolute;inset:0;width:100%;height:100%}
.cs-purpose-example>img{position:absolute;object-fit:cover;display:block}
.cs-purpose-example>span{position:absolute;text-align:center;overflow:hidden;white-space:nowrap;font-size:5px;line-height:1.4;color:#222}
.cs-purpose-intro{display:flex;align-items:center;gap:18px;line-height:1.6}
.cs-purpose-intro h3{margin:0;font-size:18px}
.cs-purpose-intro p{margin:6px 0}
.cs-purpose-intro>div{min-width:0}
.cs-purpose-intro .cs-purpose-example{width:140px}
.cs-purpose-intro .cs-purpose-example>span{font-size:8px}
.cs-path{display:flex;align-items:center;gap:8px;margin:0 0 20px;padding:0;list-style:none;font-size:12px;line-height:1.5;color:var(--c-text-sub,#666)}
.cs-path li{display:flex;align-items:center;gap:6px}
.cs-path li+li::before{content:'›';margin-right:2px;color:var(--c-text-sub,#666)}
.cs-path [aria-current=step]{font-weight:700;color:var(--c-text,#262626)}
.cs-path span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--c-surface-alt,#f5f5f5)}
.cs-path [aria-current=step] span{background:var(--c-btn-point-bg,#e51566);color:#fff}
.cs-guide{padding:18px;margin-bottom:24px;border:1px solid var(--c-line,#e6e6e6);border-radius:12px;background:var(--c-surface-alt,#faf6f8)}
.cs-guide-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cs-guide-head h3{font-size:16px;margin:0}
.cs-guide-head button,.cs-guide-nav button{border:1px solid var(--c-line,#dedede);border-radius:8px;background:#fff;color:inherit;padding:8px 12px;font-size:13px}
.cs-guide-content{display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:center}
.cs-guide-art{width:160px;height:132px;border-radius:12px;background:#fff;overflow:hidden}
.cs-guide-art svg{display:block;width:100%;height:100%}
.cs-guide-title{font-size:15px;margin:0 0 6px;line-height:1.5}
.cs-guide-title:focus{outline:none}
.cs-guide-copy{font-size:13px;line-height:1.7;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.cs-guide-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:12px}
.cs-guide-nav>div{display:flex;gap:8px}
.cs-guide-move{animation:cs-guide-slide 3s ease-in-out 1}
.cs-guide-tap{animation:cs-guide-pulse 3s ease-in-out 1;transform-origin:center;transform-box:fill-box}
@keyframes cs-guide-slide{0%,20%{transform:translateX(-13px);opacity:.45}55%,100%{transform:translateX(0);opacity:1}}
@keyframes cs-guide-pulse{0%,25%,100%{opacity:.2;transform:scale(.8)}45%,70%{opacity:1;transform:scale(1)}}
/* The layout chooser continues to use ordinary document scrolling. */
@media(max-width:680px){
 .cs-dialog{width:calc(100% - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:auto;border-radius:16px}
 .cs-head{padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top))}
 .cs-head h2{font-size:18px}
 .cs-head-actions{gap:6px}
 .cs-help-toggle{padding:8px;font-size:12px}
 .cs-icon{width:44px}
 .cs-scroll{padding:14px 16px}
 #cs-work{display:flex;flex-direction:column;gap:12px}
 .cs-preview-column{display:contents}
 #cs-controls{width:100%;position:static}
 .cs-proof{position:sticky;top:0;z-index:2;width:100%;min-height:clamp(90px,22vh,180px);padding:8px;box-shadow:0 3px 10px #0001}
 .cs-proof>img{max-height:24vh}
 .cs-group-nav,.cs-proof-actions{width:100%;margin:0}
 .cs-foot{padding:10px 16px max(14px,env(safe-area-inset-bottom))}
 .cs-foot>div>.btn{flex:1;padding-left:8px;padding-right:8px}
 .cs-layout-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .cs-layout-list>button{padding:13px}
 .cs-dialog fieldset{padding-bottom:20px;margin-bottom:20px}
 .cs-guide{padding:12px}
 .cs-guide-content{grid-template-columns:1fr;gap:12px}
 .cs-guide-art{margin:auto}
 .cs-path{gap:4px;font-size:11px}
 .cs-path li{gap:4px}
 .cs-path span{width:20px;height:20px}
}
@media(max-width:380px){.cs-head{flex-wrap:wrap;gap:8px}.cs-head>div:first-child{flex:1 1 170px}.cs-head h2{font-size:16px}.cs-head-actions{margin-left:auto}.cs-two{grid-template-columns:1fr}.cs-path li+li::before{margin:0}}
/* On a short phone screen, a sticky proof would cover the controls being tapped. */
@media(max-width:680px) and (max-height:720px){.cs-proof{position:relative}}
@media(prefers-reduced-motion:reduce){.cs-proof>img{transition:none}.cs-guide-move,.cs-guide-tap{animation:none}}
/* Finishing uses the shop's same pink choice states and actual catalog prices. */
.cs-finishing{padding:18px!important;border:1px solid var(--c-line,#dedede)!important;border-radius:12px;background:var(--c-surface-point,#fff1f5)}
.cs-finishing legend{padding:0 6px}
.cs-finishing .cs-note{margin:4px 0 12px}
.cs-finish-frame{padding-top:12px;margin-top:16px;border-top:1px solid var(--c-line,#dedede)}
.cs-finishing .cs-chips button[aria-pressed=true]{background:var(--c-btn-point-bg,#ed1265);border-color:var(--c-btn-point-bg,#ed1265);color:#fff}
.cs-finish-summary{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:12px 0;font-size:14px;line-height:1.6;min-height:48px}
.cs-finish-summary strong{font-size:20px;color:var(--c-btn-point-bg,#ed1265);margin-left:auto}
.cs-finish-summary small{flex-basis:100%;font-size:12px;color:var(--c-text-sub,#666)}
#cs-proof-frame{display:block;max-width:100%;line-height:0;transition:padding .18s,background-color .18s}
#cs-proof-frame img{display:block;max-height:clamp(180px,calc(100dvh - 490px),560px);max-width:100%;width:auto;height:auto;box-shadow:0 5px 20px #0002;transition:opacity .15s}
#cs-proof-frame.is-framed{padding:clamp(8px,1.2vw,16px);background:var(--cs-frame-color,#d5c6b4);box-shadow:inset 0 0 0 1px #0002,0 5px 20px #0002}
#cs-proof-frame.is-framed img{box-shadow:0 0 0 1px #0003}
#cs-proof-frame img.is-stale{opacity:.4}
.cs-frame-photo{display:flex;align-items:center;gap:12px;font-size:13px;text-decoration:underline;min-height:44px;margin-top:12px;color:inherit}
.cs-frame-photo img{width:64px;height:64px;object-fit:contain;border:1px solid var(--c-line,#ddd);border-radius:8px;background:#fff}
@media(max-width:680px){#cs-proof-frame img{max-height:24vh}.cs-finishing{padding:12px!important}.cs-finish-summary strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){#cs-proof-frame,#cs-proof-frame img{transition:none}}

.cs-chips button[aria-pressed=true]{background:var(--c-selected,#e51566);border-color:var(--c-selected,#e51566);color:#fff}
.cs-photo.is-active{border-color:var(--c-selected,#e51566)}
.cs-range input,.cs-check input{accent-color:var(--c-selected,#e51566)}

/* Multiple templates stay in one editor, with a named jump list on phones. */
.cs-group-select{flex:1;text-align:center}
.cs-group-select>b{display:block;line-height:1.5}
.cs-group-select label{margin:6px 0 0;text-align:left;font-size:12px}
.cs-group-select select{font-size:13px;padding:8px}
.cs-finish-jump{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0 0 12px;padding:10px 12px;border:1px solid var(--c-selected,#e51566);border-radius:9px;background:var(--c-surface,#fff);color:var(--c-btn-point-bg,#ed1265);font-size:13px;font-weight:700}
.cs-finishing:focus{outline:none}
#cs-dimensions{padding:12px 14px;border:1px solid var(--c-line,#e6e6e6);border-radius:10px;background:var(--c-surface,#fff)}
#cs-dimensions strong,#cs-dimensions span,#cs-dimensions small{display:block}
#cs-dimensions strong{font-size:14px;color:var(--c-text,#262626);margin-bottom:4px}
#cs-dimensions small{font-size:12px;margin-top:6px}
.cs-finish-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cs-finish-modes button{padding:12px 8px;font-weight:700}
.cs-finish-modes button small{font-weight:400}
.cs-frame-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.cs-frame-choice{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:10px;border:1px solid var(--c-line,#dedede);border-radius:10px;padding:10px;background:var(--c-surface,#fff);color:inherit}
.cs-frame-choice[aria-pressed=true]{border:2px solid var(--c-selected,#e51566);padding:9px;background:var(--c-surface-point,#fff1f5)}
.cs-frame-choice>img{width:100%;height:104px;object-fit:contain;border-radius:6px;background:#fff}
.cs-frame-choice>span>span,.cs-frame-choice b,.cs-frame-choice strong,.cs-frame-choice small{display:block;font-size:12px;line-height:1.6}
.cs-frame-choice b{font-size:14px}
.cs-frame-choice strong{margin-top:4px;color:var(--c-btn-point-bg,#ed1265)}
.cs-frame-choice small{font-size:11px;color:var(--c-text-sub,#666)}
.cs-frame-swatch{display:block;width:36px;height:36px;border:1px solid var(--c-line,#dedede);border-radius:50%;background:var(--cs-frame-swatch,#ddd)}
@media(max-width:680px){#cs-dimensions{width:100%;margin:0}.cs-group-nav button{flex:0 0 44px}.cs-frame-choice>img{height:88px}}

.cs-design-note{padding:14px 16px;margin:0 0 20px;border:1px solid var(--c-border,#ddd);border-radius:12px;background:var(--c-surface-point,#fff1f5);font-size:13px;line-height:1.7}.cs-design-note b{font-size:15px}.cs-design-note p{margin:5px 0;color:var(--c-text-sub,#666)}

.cs-mini-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Editing keeps the photograph in view while only its controls scroll. */
.cs-dialog--editing{height:min(960px,calc(100vh - 32px));height:min(960px,calc(100dvh - 32px))}
.cs-dialog--editing .cs-scroll{position:relative;display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0;padding:18px 24px}
.cs-dialog--editing .cs-path{flex:none;margin-bottom:12px}
.cs-dialog--editing .cs-guide{position:absolute;inset:12px;z-index:5;max-height:none;overflow:auto;margin:0;background:var(--c-surface,#fff);box-shadow:0 4px 24px #0002}
.cs-dialog--editing #cs-work{flex:1;min-height:0;align-items:stretch;gap:24px}
.cs-dialog--editing .cs-preview-column{display:flex;flex-direction:column;gap:10px;min-height:0;position:relative}
.cs-dialog--editing .cs-group-nav{flex:none;margin:0;min-height:30px}
.cs-dialog--editing #cs-controls{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:2px 8px 24px 2px;-webkit-overflow-scrolling:touch}
.cs-dialog--editing .cs-proof{position:relative;top:auto;flex:1;min-height:80px;width:100%;padding:14px;box-shadow:none}
.cs-dialog--editing #cs-proof-frame{flex:none;max-width:100%;max-height:100%;transition:background-color .18s}
.cs-live-stage{display:block;position:relative;flex:none;max-width:100%;overflow:hidden;isolation:isolate;line-height:0;background:#fff;box-shadow:0 3px 12px #0002}
.cs-dialog--editing #cs-proof-frame .cs-live-stage>img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;box-shadow:none}
#cs-live-canvas,#cs-live-cells{position:absolute;inset:0;width:100%;height:100%}
#cs-live-canvas{display:block;pointer-events:none}
#cs-live-cells{z-index:1;pointer-events:none}
.cs-dialog .cs-live-hit{position:absolute;display:block;min-height:0;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:transparent;box-shadow:none;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.cs-dialog .cs-live-hit.is-active{outline:2px solid var(--c-selected,#e51566);outline-offset:-2px}
.cs-dialog .cs-live-hit:focus-visible{outline:3px dashed var(--c-selected,#e51566);outline-offset:-3px}
.cs-dialog .cs-live-hit.is-panning,.cs-proof.is-panning .cs-live-hit{cursor:grabbing}
.cs-proof.is-live #cs-proof-status{bottom:8px;left:8px;right:8px;max-width:none;margin:0;padding:5px 8px;font-size:11px;line-height:1.4;pointer-events:none}
.cs-photo[data-cs-draggable=true]{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.cs-photo img{pointer-events:none;-webkit-user-drag:none}
.cs-photo.is-dragging{cursor:grabbing;opacity:.65;border-style:dashed;transform:scale(.96)}
.cs-photo.is-drop-target{border-color:var(--c-selected,#e51566);background:var(--c-surface-point,#fff1f5);box-shadow:0 0 0 2px var(--c-selected,#e51566)}
.cs-preview-details{flex:0 0 auto;min-height:0;max-height:45%;overflow:auto;overscroll-behavior:contain;border:1px solid var(--c-line,#e6e6e6);border-radius:10px;background:var(--c-surface,#fff);font-size:12px;line-height:1.5}
.cs-preview-details>summary{position:sticky;top:0;z-index:2;min-height:44px;padding:12px;cursor:pointer;background:var(--c-surface,#fff);font-weight:600;color:var(--c-text,#262626);overflow-wrap:anywhere}
.cs-preview-details>summary:focus-visible{outline:2px solid var(--c-selected,#e51566);outline-offset:-3px}
.cs-preview-details[open]>summary{border-bottom:1px solid var(--c-line,#e6e6e6)}
.cs-preview-details>:not(summary){margin:10px 12px}
.cs-preview-details .cs-finish-jump{width:calc(100% - 24px)}
.cs-preview-details .cs-proof-actions{width:auto}
.cs-preview-details #cs-dimensions{border:0;padding:0;width:auto}
.cs-preview-details .cs-finish-summary{padding:0}
.cs-photo-editor .cs-note{margin:8px 0}
@media(max-width:680px){
 .cs-dialog--editing{height:calc(100vh - 16px);height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
 .cs-dialog--editing .cs-head{flex-wrap:nowrap;gap:8px;padding:10px 12px}
 .cs-dialog--editing .cs-head>div:first-child{flex:1 1 auto}
 .cs-dialog--editing .cs-head h2{font-size:15px}
 .cs-dialog--editing .cs-eyebrow{font-size:10px;letter-spacing:0;margin-bottom:2px}
 .cs-dialog--editing .cs-scroll{padding:10px 12px}
 .cs-dialog--editing .cs-path{margin-bottom:8px}
 .cs-dialog--editing #cs-work{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(210px,50%) minmax(0,1fr);gap:12px}
 .cs-dialog--editing .cs-preview-column{gap:6px}
 .cs-dialog--editing .cs-proof{padding:8px;min-height:60px}
 .cs-dialog--editing .cs-group-nav{font-size:12px;min-height:20px}
 .cs-dialog--editing .cs-group-nav:has(.cs-group-select){min-height:44px}
 .cs-dialog--editing .cs-group-select{display:flex;align-items:center;gap:8px}
 .cs-dialog--editing .cs-group-select>b{font-size:12px}
 .cs-dialog--editing .cs-group-select label{flex:1;margin:0;font-size:0}
 .cs-dialog--editing .cs-group-select select{margin:0;font-size:12px;min-height:36px;padding:6px}
 .cs-dialog--editing #cs-controls{padding:2px 4px 18px 2px;border-top:1px solid var(--c-line,#e6e6e6)}
 .cs-preview-details{max-height:50%;border-radius:8px;font-size:11px}
 .cs-preview-details>summary{min-height:36px;padding:9px 10px}
 .cs-dialog--editing .cs-foot{padding:8px 12px max(10px,env(safe-area-inset-bottom))}
 .cs-dialog--editing .cs-foot>p{font-size:11px;line-height:1.4;margin-bottom:6px}
 .cs-dialog--editing .cs-photos{grid-template-columns:repeat(4,minmax(0,1fr))}
 .cs-dialog--editing .cs-editor-actions{gap:8px;margin:10px 0 14px}
 .cs-dialog--editing .cs-editor-actions button{font-size:12px;padding:8px}
}
@media(max-height:520px){
 .cs-dialog--editing .cs-head{padding:8px 14px}
 .cs-dialog--editing .cs-head h2{font-size:15px}
 .cs-dialog--editing .cs-eyebrow,.cs-dialog--editing .cs-foot>p{display:none}
 .cs-dialog--editing .cs-scroll{padding:8px 12px}
 .cs-dialog--editing .cs-path{margin-bottom:6px;font-size:11px}
 .cs-dialog--editing .cs-foot{padding:8px 12px}
 .cs-dialog--editing .cs-preview-column{gap:5px}
 .cs-dialog--editing .cs-group-nav{min-height:22px;font-size:12px}
 .cs-dialog--editing .cs-proof{padding:6px;min-height:50px}
 .cs-preview-details>summary{min-height:34px;padding:8px 10px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.cs-photo.is-dragging{transform:none}}

#cs-live-label{position:absolute;left:8px;top:8px;z-index:2;padding:4px 7px;border-radius:6px;background:#fffe;color:var(--c-text-sub,#666);font-size:11px;line-height:1.4;pointer-events:none}

.cs-dialog .cs-live-hit:disabled{pointer-events:none;touch-action:auto;cursor:default;opacity:1}

/* Physical crop limits and optional typography tools share the shop controls. */
.cs-range.is-locked{color:var(--c-text-sub,#666)}
.cs-range input:disabled{cursor:not-allowed;opacity:.45}
.cs-move-hint{min-height:2.8em}
.cs-enable-pan{min-height:44px;padding:9px 12px;border:1px solid var(--c-selected,#e51566);border-radius:9px;background:var(--c-surface-point,#fff1f5);color:var(--c-text,#262626);font-size:13px}
.cs-typography .cs-control-label{margin:20px 0 9px}
.cs-typography-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-typography-presets button,.cs-text-effects button{min-height:44px}
.cs-font-samples{margin:12px 0 18px;border:1px solid var(--c-line,#dedede);border-radius:10px;background:var(--c-surface,#fff)}
.cs-font-samples>summary{min-height:44px;padding:12px;cursor:pointer;font-size:13px;font-weight:600}
.cs-font-current{display:inline-block;margin-left:6px;font-size:12px;font-weight:400;color:var(--c-text-sub,#666)}
.cs-font-samples>.cs-note{margin:0 12px 12px}
.cs-font-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 12px 12px}
.cs-font-grid button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:88px;padding:12px 6px;border:1px solid var(--c-line,#dedede);border-radius:9px;background:var(--c-surface,#fff);color:var(--c-text,#262626);font-size:12px}
.cs-font-grid button[aria-pressed=true]{border-color:var(--c-selected,#e51566);box-shadow:inset 0 0 0 1px var(--c-selected,#e51566);background:var(--c-surface-point,#fff1f5)}
.cs-font-sample{font-size:23px;line-height:1.35;font-weight:400;white-space:nowrap}
.cs-font-sample[aria-busy=true]{visibility:hidden}
.cs-type-preview{display:flex;align-items:center;justify-content:center;min-height:72px;margin-top:14px;padding:12px;border-radius:10px;background:var(--c-surface-point,#fff1f5);overflow:hidden}
.cs-type-preview>span{max-width:100%;font-size:24px;line-height:1.5;font-weight:400;text-align:center;overflow-wrap:anywhere;color:#2a0715}
.cs-type-preview[aria-busy=true]>span{visibility:hidden}
.cs-type-preview[data-effect=shadow]>span{text-shadow:2px 2px 0 #b4a1a8}
.cs-type-preview[data-effect=outline]>span{color:#fff1f5;-webkit-text-stroke:.7px #2a0715;paint-order:stroke fill}
.cs-type-preview[data-effect=label]>span{padding:4px 10px;border-radius:8px;background:#2a0715;color:#fff1f5}
.cs-font-grid button:focus-visible,.cs-font-samples>summary:focus-visible,.cs-enable-pan:focus-visible{outline:2px solid var(--c-selected,#e51566);outline-offset:3px}
@media(max-width:380px){.cs-font-sample{font-size:20px}.cs-text-effects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}

.cs-type-preview[data-font-unavailable=true]{display:none}
/* 사진 교체 후보 (2026-09-12 — 단추 바로 아래에 그린다. 아이폰에서 슬라이더 밑에 숨어 「안 된다」로 보였다) */
.cs-replacements{margin:0 0 16px;padding:12px;border:1px solid var(--c-border,#ddd);border-radius:12px;background:var(--c-surface-alt,#f4f1ee);outline:none}
.cs-replacements:focus-visible{outline:3px solid var(--c-focus,#2B0514);outline-offset:2px}
.cs-replacements .cs-photos{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 파일 입력은 .offscreen-file(shop.css) — display:none 이 아니어야 iOS 가 연다. label 이 감싸므로 누르면 바로 열린다 */
.cs-dialog .cs-upload{position:relative;display:flex;justify-content:center;align-items:center;text-align:center;width:100%;min-height:44px;margin:4px 0 0;cursor:pointer}   /* .cs-dialog label 규칙보다 특정도를 하나 높인다 */
.cs-upload.is-uploading{opacity:.6;cursor:progress}   /* :has() 금지 — 옛 Safari 에서 규칙째 사라진다 (shop.css:26) */

/* Four focused steps match the ordinary photo settings sheet. */
.cs-dialog--editing{--c-line:var(--c-border);--c-selected:var(--c-btn-point-bg);--c-surface-alt:var(--c-surface-soft)}
.cs-dialog--editing .cs-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cs-dialog--editing .cs-path li{display:block;border-bottom:3px solid var(--c-border)}
.cs-dialog--editing .cs-path li+li::before{content:none}
.cs-dialog--editing .cs-path button{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;padding:6px 2px 12px;border:0;background:transparent;color:var(--c-text-sub);font-size:14px}
.cs-dialog--editing .cs-path [aria-current=step]{border-color:var(--c-btn-point-bg)}
.cs-dialog--editing .cs-path [aria-current=step] button{font-weight:700;color:var(--c-text)}
.cs-dialog--editing .cs-proof{background:var(--c-surface-soft)}
.cs-dialog--editing .cs-finishing{padding:0!important;border:0!important;border-radius:0;background:var(--c-surface)}
.cs-dialog--editing .cs-finishing legend{padding:0;margin-bottom:16px;font-size:18px}
.cs-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.cs-dialog .cs-option-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;padding:16px;border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface);color:var(--c-text);text-align:left;font-size:15px;line-height:1.5}
.cs-option-card b{font-size:17px}.cs-option-card span{font-size:13px;color:var(--c-text-sub)}
.cs-dialog .cs-option-card[aria-pressed=true]{border-color:var(--c-btn-point-bg);box-shadow:inset 0 0 0 1px var(--c-btn-point-bg);background:var(--c-surface-point)}
.cs-option-card[aria-pressed=true] b::after{content:' ✓';color:var(--c-btn-point-bg)}
.cs-paper-options{display:grid;gap:12px;margin-top:16px}
.cs-dialog .cs-paper-options .cs-option-card{display:grid;grid-template-columns:1fr auto}
.cs-paper-options .cs-option-card span{grid-column:1/-1}.cs-paper-options strong{font-size:14px}
.cs-no-frame{margin:16px 0 12px}
.cs-extras{border:1px solid var(--c-border);border-radius:var(--r-lg);margin:14px 0;background:var(--c-surface)}
.cs-extras>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px 14px;cursor:pointer;font-size:14px;font-weight:600}
.cs-extras>summary::after{content:'＋';margin-left:8px}.cs-extras[open]>summary::after{content:'−'}
.cs-extras>summary span{margin-left:auto;font-weight:400;color:var(--c-text-sub)}
.cs-extras>:not(summary){margin:14px}.cs-extras .cs-design-note{font-size:12px}
.cs-dialog--editing .cs-fit-controls>.cs-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-dialog--editing .cs-chips button[aria-pressed=true]{color:var(--c-text);background:var(--c-surface-point);border-color:var(--c-btn-point-bg);box-shadow:inset 0 0 0 1px var(--c-btn-point-bg)}
.cs-dialog--editing .cs-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center}
.cs-dialog--editing .cs-foot>.cs-finish-summary{grid-column:1;grid-row:1;margin:0;padding:0;min-height:44px;font-size:13px;gap:2px 12px}
.cs-dialog--editing .cs-foot>.cs-finish-summary strong{color:var(--c-text);margin:0;font-size:20px}
.cs-dialog--editing .cs-foot>.cs-finish-summary small{display:none}
.cs-dialog--editing .cs-foot>#cs-notice{grid-column:1/-1;grid-row:2;margin:0;font-size:12px;color:var(--c-text-sub)}
.cs-dialog--editing .cs-foot>div{grid-column:2;grid-row:1;gap:10px}
.cs-dialog--editing .cs-foot>div>.btn--point{min-width:190px}
.cs-dialog--editing .cs-live-hit:not(.is-active):disabled{outline:none}
.cs-dialog--editing:not([data-cs-step="1"]) .cs-live-hit.is-active{outline:none}
@media(max-width:680px){
 .cs-dialog--editing .cs-path button{font-size:12px;gap:5px;padding:5px 0 9px}
 .cs-dialog--editing #cs-work{grid-template-rows:minmax(210px,42%) minmax(0,1fr)}
 .cs-dialog--editing .cs-foot{grid-template-columns:minmax(0,1fr);gap:6px}
 .cs-dialog--editing .cs-foot>.cs-finish-summary{grid-column:1;grid-row:1;min-height:24px;font-size:12px}
 .cs-dialog--editing .cs-foot>.cs-finish-summary strong{font-size:17px;margin-left:auto}
 .cs-dialog--editing .cs-foot>div{grid-column:1;grid-row:2;display:grid;grid-template-columns:auto minmax(0,1fr)}
 .cs-dialog--editing .cs-foot>div>.btn--point{min-width:0}
 .cs-dialog--editing .cs-foot>#cs-notice{grid-column:1;grid-row:3;font-size:11px;max-height:2.8em;overflow:auto}
 .cs-dialog--editing .cs-finishing legend{font-size:16px;margin-bottom:10px}
 .cs-dialog .cs-option-card{padding:12px}.cs-option-card b{font-size:16px}
 .cs-dialog--editing .cs-photo-editor>.cs-photos{display:flex;overflow:auto;gap:8px}
 .cs-dialog--editing .cs-photo-editor>.cs-photos>.cs-photo{width:64px;height:64px;flex:none}
 .cs-preview-details>summary{min-height:44px}
}
@media(max-height:520px){.cs-dialog--editing #cs-work{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.cs-dialog--editing .cs-foot>#cs-notice{display:none}.cs-dialog--editing .cs-foot{grid-template-columns:minmax(0,1fr) auto}.cs-dialog--editing .cs-foot>div{grid-column:2;grid-row:1}.cs-dialog--editing .cs-foot>.cs-finish-summary{grid-column:1}.cs-dialog--editing .cs-foot>div>.btn--point{min-width:0}}

/* One editor, one current print, one forward action. */
.cs-dialog--editing{height:min(840px,calc(100dvh - 32px))}
.cs-dialog--editing .cs-head{padding:16px 24px}
.cs-dialog--editing .cs-eyebrow{letter-spacing:0;font-size:12px;margin-bottom:4px}
.cs-dialog--editing .cs-head h2{font-size:21px}
.cs-dialog--editing .cs-scroll{padding:16px 24px}
.cs-dialog--editing .cs-path{gap:8px;margin-bottom:16px}
.cs-dialog--editing .cs-path button{padding:4px 2px 10px;min-height:44px}
.cs-dialog--editing .cs-group-nav{gap:8px;min-height:44px}
.cs-dialog--editing .cs-group-select{display:block;flex:1}
.cs-dialog--editing .cs-group-select label{font-size:0;margin:0}
.cs-dialog--editing .cs-group-select select{font-size:14px;min-height:44px;padding:10px 12px}
.cs-dialog--editing .cs-preview-column{gap:12px}
.cs-dialog--editing .cs-proof{padding:16px}
.cs-dialog--editing fieldset{padding-bottom:20px;margin-bottom:20px}
.cs-dialog--editing legend{font-size:15px;margin-bottom:12px}
.cs-dialog--editing .cs-editor-actions{gap:8px;margin:12px 0 16px}
.cs-dialog--editing .cs-extras{margin:16px 0;border-radius:12px}
.cs-dialog--editing .cs-extras>summary{padding:12px 16px;min-height:48px}
.cs-dialog--editing .cs-extras>:not(summary){margin:12px 16px}
.cs-dialog--editing .cs-design-note{padding:0;border:0;background:transparent}
.cs-dialog--editing .cs-photo-editor .cs-note{font-size:13px}
.cs-dialog--editing .cs-foot{padding:12px 24px max(12px,env(safe-area-inset-bottom))}
.cs-dialog--editing .cs-foot:has(#cs-notice:empty){row-gap:0}
.cs-dialog--editing #cs-notice:empty{display:none}
.cs-dialog--editing .cs-finish-summary{line-height:1.5}
.cs-dialog--editing .cs-foot>.cs-finish-summary strong{font-size:19px}
/* Help is a small, keyboard-contained dialog, never a full empty workspace. */
.cs-dialog .cs-guide{position:absolute;inset:12px 12px auto auto;width:min(420px,calc(100% - 24px));max-height:calc(100% - 24px);height:auto;z-index:5;padding:20px;margin:0;border:1px solid var(--c-border);border-radius:16px;background:var(--c-surface);box-shadow:0 8px 32px #2b051426;overflow:auto}
.cs-dialog .cs-guide-content{display:block}
.cs-dialog .cs-guide-head{margin-bottom:16px}
.cs-dialog .cs-guide-head button{width:44px;height:44px;font-size:22px}
.cs-dialog .cs-guide-title{font-size:17px;margin-bottom:8px}
.cs-dialog .cs-guide-copy{font-size:14px;line-height:1.7}
.cs-dialog .cs-guide-nav{justify-content:flex-end;margin-top:16px}
.cs-dialog .cs-guide-nav button{min-height:44px;border-color:var(--c-btn-sec-line)}
@media(max-width:680px){
 .cs-dialog--editing{width:calc(100% - 16px);height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:16px}
 .cs-dialog--editing .cs-head{padding:12px 16px;gap:8px}
 .cs-dialog--editing .cs-head h2{font-size:18px}
 .cs-dialog--editing .cs-head-actions{gap:8px}
 .cs-dialog--editing .cs-help-toggle{padding:8px;font-size:12px}
 .cs-dialog--editing .cs-scroll{padding:12px 16px}
 .cs-dialog--editing .cs-path{margin-bottom:12px;gap:6px}
 .cs-dialog--editing .cs-path button{font-size:12px;gap:4px;padding:0 0 8px}
 .cs-dialog--editing #cs-work{grid-template-rows:minmax(170px,44%) minmax(0,1fr);gap:12px}
 .cs-dialog--editing .cs-group-nav{min-height:44px}.cs-dialog--editing .cs-group-select select{font-size:13px;min-height:44px;padding:8px}
 .cs-dialog--editing .cs-preview-column{gap:8px}
 .cs-dialog--editing .cs-proof{padding:8px}
 .cs-dialog--editing #cs-controls{padding-top:12px}
 .cs-dialog--editing .cs-extras>summary{padding:12px}
 .cs-dialog--editing .cs-extras>:not(summary){margin:12px}
 .cs-dialog--editing .cs-foot{padding:10px 16px max(12px,env(safe-area-inset-bottom));gap:8px}
 .cs-dialog--editing .cs-foot .btn{min-height:48px}
 .cs-dialog--editing .cs-foot>.cs-finish-summary strong{font-size:17px}
 .cs-dialog--editing .cs-preview-details{display:none}
 /* The information controls follow the choices on mobile, leaving room to edit. */
 .cs-dialog--editing #cs-controls>.cs-preview-details{display:block;max-height:none;margin-top:16px;flex:none}
 .cs-dialog--editing .cs-two{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:359px){.cs-dialog--editing .cs-head{padding:10px 12px}.cs-dialog--editing .cs-head h2{font-size:16px}.cs-dialog--editing .cs-head-actions{gap:4px}.cs-dialog--editing .cs-scroll{padding:10px 12px}}
@media(max-height:520px){
 .cs-dialog--editing{height:calc(100dvh - 16px);width:calc(100% - 16px)}
 .cs-dialog--editing .cs-head{padding:8px 12px}.cs-dialog--editing .cs-head h2{font-size:16px}
 .cs-dialog--editing .cs-eyebrow{display:none}
 .cs-dialog--editing .cs-scroll{padding:8px 12px}
 .cs-dialog--editing #cs-work{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .cs-dialog--editing .cs-path{margin-bottom:8px}
 .cs-dialog--editing .cs-foot{padding:8px 12px}
 .cs-dialog--editing .cs-foot .btn{min-height:44px}
}
.cs-dialog--editing .cs-extras>.cs-apply{width:calc(100% - 32px)}
@media(max-width:680px){.cs-dialog--editing .cs-extras>.cs-apply{width:calc(100% - 24px)}}