:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#191919;background:#f5f3ef;--line:#dedbd5;--muted:#68645f;--header:72px}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);border-radius:999px;background:transparent;padding:8px 15px;font-size:13px;color:inherit}button:hover:not(:disabled){background:#eae6df}button:disabled{cursor:default;opacity:.35}button.primary{background:#171717;color:white;border-color:#171717;padding:11px 22px}button.primary:hover{background:#36332f}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #9c703e;outline-offset:3px}#header{height:var(--header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 30px;background:#faf9f6;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}#logo-slot{font-size:11px;color:#777;border:1px dashed #bbb;width:140px;height:36px;display:grid;place-items:center}#logo-slot img{max-width:100%;max-height:36px}nav{display:flex;gap:6px}nav button{border:0;border-radius:0;padding:24px 13px}nav [aria-current=step]{box-shadow:inset 0 -2px #191919;font-weight:650}.header-links{justify-self:end;display:flex;gap:20px;align-items:center;font-size:13px}.header-links a{color:inherit;text-decoration:none}.header-links button{padding:5px 0;border:0}.workspace{max-width:1540px;margin:auto;padding:26px 32px;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:32px;align-items:start}.workspace:not(:has(.controls:not([hidden]))){grid-template-columns:minmax(0,1fr);max-width:1120px}.preview-column{position:sticky;top:calc(var(--header) + 20px);min-width:0}.preview-top{display:flex;align-items:center;justify-content:space-between;height:30px;margin-bottom:10px;font-size:10px;letter-spacing:1.6px;color:var(--muted)}#replace-file{font-size:11px;letter-spacing:0;padding:4px 10px}.artwork-stage{position:relative;aspect-ratio:3/2;background:#f3f2f2;border:1px solid #d4d0c9;box-shadow:0 8px 24px #302b2010;overflow:hidden;max-height:calc(100svh - 240px);margin:auto;width:100%;display:grid;place-items:center;user-select:none}#final-preview{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none;user-select:none}#empty-art{text-align:center;padding:20px}h1{font-weight:500;font-size:27px;letter-spacing:-.6px;margin:0 0 12px}#empty-art p{color:var(--muted);font-size:14px}#empty-art .drop-note{font-size:11px;margin-top:16px}#processing{position:absolute;inset:0;background:#f5f3eff5;display:flex;gap:12px;align-items:center;justify-content:center;font-size:14px;z-index:3}.spinner{width:18px;height:18px;border:2px solid #c8c3ba;border-top-color:#222;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.playback{display:flex;align-items:center;gap:12px;padding:12px 0 4px}.playback button{min-width:54px;padding:6px 10px}.playback output{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}.playback input{flex:1;min-width:30px}.status-line{display:flex;justify-content:space-between;align-items:center;min-height:24px;gap:12px;font-size:11px;color:var(--muted)}#source-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}#status{font-size:12px;color:#6d3927;line-height:1.4;margin:2px 0;min-height:0}#render-status{transition:opacity .5s}#render-status.done{opacity:.35}.controls{background:#faf9f7;border:1px solid var(--line);padding:0 20px;border-radius:5px;min-width:0}.controls section{padding:20px 0;border-bottom:1px solid var(--line)}.controls section:last-child{border:0}h2{font-size:16px;font-weight:600;margin:0 0 18px;letter-spacing:-.2px}h3{font-size:10px;font-weight:550;text-transform:uppercase;letter-spacing:1.3px;color:var(--muted);margin:18px 0 12px}.range-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:12px}.range-label output{font-size:11px;color:var(--muted)}input[type=range]{appearance:none;background:transparent;width:100%;height:22px;margin:0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:#c7c1b7}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#222;margin-top:-5.5px;border:2px solid #faf9f7;box-shadow:0 0 0 1px #333}input[type=range]::-moz-range-track{height:2px;background:#c7c1b7}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#222;border-radius:50%}.mode-switch{display:flex;gap:22px;font-size:12px;margin-bottom:17px}input[type=radio],input[type=checkbox]{accent-color:#222}.colors{display:flex;flex-wrap:wrap;gap:15px}.colors label,.custom-text{display:flex;align-items:center;gap:7px;font-size:11px}.colors #gradient-controls{display:flex;gap:14px;width:100%}input[type=color]{appearance:none;padding:2px;border:1px solid #c8c1b6;border-radius:50%;background:transparent;width:32px;height:32px;cursor:pointer;flex-shrink:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}.presets{display:flex;gap:9px;flex-wrap:wrap}.preset{width:30px;height:30px;padding:0;border:3px solid #faf9f7;box-shadow:0 0 0 1px #cbc5ba;border-radius:50%;background:var(--palette)!important}.preset[aria-pressed=true]{box-shadow:0 0 0 2px #222}.preset:hover{transform:scale(1.1)}textarea,select{background:#fff;border:1px solid #d5d0c7;border-radius:4px;width:100%;padding:10px;font-size:13px;color:#222}textarea{resize:vertical;min-height:70px;max-height:150px;line-height:1.5}.fine{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;margin:7px 0 12px;line-height:1.5}.field-label{display:block;font-size:11px;margin:15px 0 7px}#fontSelect{margin-bottom:18px}.match{font-size:12px;display:flex;align-items:center;gap:6px;margin-bottom:12px}#text-fit{min-height:0}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(100%);overflow:hidden}#crop-overlay{position:absolute;left:5%;right:5%;top:15%;height:70%;overflow:visible;touch-action:none}#crop-selection{position:absolute;height:100%;border:1px solid #fff;box-shadow:0 0 0 1px #222, -1000px 0 0 999px #0005,1000px 0 0 999px #0005;cursor:grab}#crop-left,#crop-right{position:absolute;top:0;height:100%;width:30px;border:0;padding:0;touch-action:none;border-radius:0;background:transparent}#crop-left{left:-15px}#crop-right{right:-15px}#crop-left:after,#crop-right:after{content:'';position:absolute;left:10px;top:45%;height:30px;width:8px;border:1px solid #222;background:white;border-radius:4px}#crop-controls p{font-size:11px;text-align:center;margin:12px 0}.crop-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.crop-actions label{font-size:11px}.crop-actions input{width:64px;padding:5px;border:1px solid #ccc;border-radius:3px;font-size:11px}.crop-actions button{font-size:11px;padding:7px 11px!important}.debug{max-width:1100px;margin:40px auto;padding:20px;background:#fff;border:1px dashed #aaa;font-size:12px}.debug summary{cursor:pointer}.debug button{margin:5px}.debug pre{white-space:pre-wrap;overflow-wrap:anywhere}.comparison{display:grid;grid-template-columns:1fr 1fr}.comparison img{width:100%}.output-links{display:flex;gap:15px}.file-button{display:block;margin:10px}dialog{border:1px solid #ccc;border-radius:6px;max-width:420px;padding:30px;font-size:14px;line-height:1.6}dialog::backdrop{background:#0005}@media(min-width:1000px){.artwork-stage{width:min(100%,calc((100svh - 240px)*1.5))}}@media(max-width:900px){:root{--header:98px}#header{height:98px;padding:10px 16px 0;grid-template-columns:1fr 1fr;gap:0}#logo-slot{height:28px;width:120px;font-size:10px}.header-links{grid-column:2;grid-row:1}nav{grid-column:1/-1;justify-content:center}nav button{padding:16px 12px;font-size:12px}.workspace{display:block;padding:10px 14px;max-width:700px}.preview-column{top:var(--header);z-index:4;background:#f5f3ef;padding:0 0 6px;border-bottom:1px solid var(--line)}.preview-top{height:24px;margin:0;font-size:9px}.artwork-stage{height:min(30svh,250px);width:auto;max-width:100%;aspect-ratio:3/2;max-height:none}.playback{padding:6px 0 0;gap:8px}.playback button{font-size:11px;padding:5px 9px}.status-line{min-height:20px;font-size:10px}#empty-art{padding:10px}h1{font-size:20px;margin-bottom:8px}#empty-art p{font-size:12px;margin:7px}#empty-art .drop-note{display:none}#empty-art button{padding:8px 18px}.controls{margin:14px 0 30px;padding:0 17px}.controls section{padding:18px 0}.presets{gap:12px}.preset{width:32px;height:32px}input,textarea,select{font-size:16px}textarea,select{font-size:16px}#crop-controls p{margin:6px 0}.crop-actions{gap:6px}.crop-actions input{width:54px}.debug{margin:20px 14px}.comparison{display:block}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.controls{scroll-margin-top:100px}#final-preview{pointer-events:none}@media(max-width:900px){.controls{scroll-margin-top:calc(35svh + 180px)}}
html{scroll-padding-top:90px}@media(max-width:900px){:root{--preview-h:min(30svh,250px,calc(var(--visible-height,100svh)*.28))}html{scroll-padding-top:calc(98px + var(--preview-h) + 90px)}.artwork-stage{width:min(100%,calc(var(--preview-h)*1.5));height:auto;aspect-ratio:3/2}.controls input,.controls select,.controls textarea,.controls button{scroll-margin-top:12px}}
@media(max-width:900px){#crop-left,#crop-right{width:44px}#crop-left{left:-22px}#crop-right{right:-22px}#crop-left:after,#crop-right:after{left:17px}}
.debug input[type=file]{max-width:100%;font-size:12px}.debug .file-button{min-width:0}.debug .export-card{overflow-wrap:anywhere}
/* Revision 2: compact navigation and larger stable artwork; colors unchanged. */
:root{--header:76px}#header{padding:0 22px;gap:14px}#logo-slot{border:0;width:160px;height:66px;display:flex;align-items:center;justify-content:flex-start}#logo-slot img{max-width:160px;width:auto;height:60px;max-height:none;object-fit:contain}nav button{padding:25px 12px;white-space:nowrap}.workspace{max-width:1640px;padding:16px 20px;gap:22px;grid-template-columns:minmax(0,1fr) 310px}.preview-column{top:calc(var(--header) + 16px)}.artwork-stage{width:100%;height:auto;aspect-ratio:3/2;max-height:none}.controls{background:white}.controls #product-title{font-size:19px;font-weight:600;letter-spacing:-.4px;margin:0 0 23px}.playback{width:min(100%,490px);margin:8px auto 0;gap:9px;padding:0}.playback input{max-width:150px}#crop-open{white-space:nowrap;border-color:#777;font-weight:600}#status{color:var(--muted)}#status.error{color:#813626}#source-name{font-size:10px;opacity:.7}.fine{gap:10px}#text-count{white-space:nowrap}.status-line{min-height:22px}#crop-selection{box-shadow:0 0 0 1px #444,-1000px 0 0 999px #0002,1000px 0 0 999px #0002}#crop-controls{padding:8px 10px 12px;background:#f9f8f5;border:1px solid var(--line);margin-top:9px;border-radius:4px}#crop-controls p{max-width:550px;margin:0 auto 10px;font-size:12px;line-height:1.5}.crop-actions button{font-size:12px;padding:8px 14px!important}#crop-left,#crop-right{width:44px}#crop-left{left:-22px}#crop-right{right:-22px}#crop-left:after,#crop-right:after{left:17px}.font-picker{position:relative;margin-bottom:18px}#font-trigger{display:flex;justify-content:space-between;align-items:center;border-radius:4px;width:100%;background:#fff;font-size:18px;padding:9px 12px;min-height:43px}#font-options{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:270px;overflow-y:auto;background:white;border:1px solid #bbb;box-shadow:0 8px 24px #0002;border-radius:4px;z-index:6;overscroll-behavior:contain;padding:4px}#font-options button{display:block;border:0;border-radius:2px;text-align:left;width:100%;font-size:19px;padding:7px 10px;min-height:38px}#font-options [aria-selected=true]{background:#eeeae4}#font-options button:focus{outline:1px solid #333;outline-offset:-1px;background:#f3f1ee}.mobile-preview{display:none}#preview-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#f5f3ef;overflow:hidden}#preview-dialog[open]{display:flex;flex-direction:column}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));flex-shrink:0;background:#faf9f6;z-index:2}.preview-toolbar button{font-size:12px;padding:7px 10px}.preview-toolbar>div{display:flex;align-items:center;gap:6px}#zoom-level{font-size:11px;min-width:35px}#preview-viewport{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none}#zoom-canvas{display:block;flex-shrink:0;transform-origin:center;touch-action:none;box-shadow:0 4px 18px #0002;cursor:grab}
@media(min-width:1001px){.artwork-stage{width:100%;max-height:none}.controls{scroll-margin-top:95px}}
@media(min-width:701px) and (min-height:501px) and (max-width:1000px){:root{--header:76px}#header{height:76px;display:grid;grid-template-columns:150px 1fr auto;gap:8px;padding:0 14px}nav{grid-column:auto;grid-row:1;justify-content:center}nav button{font-size:11px;padding:25px 8px}.header-links{grid-column:3;grid-row:1;gap:12px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;padding:14px;gap:16px}.preview-column{top:90px;padding:0;border:0}.controls{margin:0;padding:0 16px}.artwork-stage{width:100%;height:auto;aspect-ratio:3/2}.playback{flex-wrap:wrap;gap:7px}#crop-open{font-size:11px}#logo-slot{width:150px}#logo-slot img{height:58px}html{scroll-padding-top:90px}}
@media(max-width:700px){:root{--header:84px;--preview-h:min(32svh,290px,calc(var(--visible-height,100svh)*.32))}#header{height:84px;grid-template-columns:1fr 1fr;padding:4px 12px 0;gap:0}#logo-slot{width:110px;height:44px}#logo-slot img{height:43px;max-width:110px}.header-links{grid-row:1;grid-column:2;gap:15px;font-size:12px}nav{grid-row:2;grid-column:1/-1;justify-content:center;gap:0}nav button{padding:9px 10px;font-size:11px}.workspace{display:block;padding:10px 12px}.preview-column{top:84px;padding:6px 0;background:#f5f3ef}.artwork-stage{width:min(100%,calc(var(--preview-h)*1.5));height:auto;aspect-ratio:3/2}.playback{gap:6px;margin-top:8px;max-width:430px}.playback button{padding:6px 8px;font-size:10px;min-width:38px}.playback input{max-width:110px}.playback output{font-size:10px}#crop-open{font-size:10px}.mobile-preview{display:block;position:absolute;right:7px;top:12px;background:#fffE;font-size:10px;padding:5px 8px;border-color:#aaa}.controls{margin:12px 0 25px}.controls #product-title{font-size:18px}.status-line{font-size:10px;min-height:20px}#crop-controls{padding:8px}#crop-controls p{font-size:11px;line-height:1.4}html{scroll-padding-top:calc(84px + var(--preview-h) + 80px)}.cropping .artwork-stage{--preview-h:min(26svh,230px)}.crop-actions{gap:7px}.crop-actions button{font-size:11px;padding:7px 10px!important}#font-options{max-height:230px}#font-options button{min-height:42px}}
/* Rotated phone: independent scrolling controls, artwork always alongside them. */
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){:root{--header:48px}#header{height:48px;grid-template-columns:90px 1fr auto;gap:8px;padding:0 12px}#logo-slot{width:90px;height:44px}#logo-slot img{height:42px;max-width:90px}nav{grid-column:2;grid-row:1;gap:0;justify-content:center}nav button{font-size:10px;padding:15px 8px}.header-links{grid-column:3;grid-row:1;gap:12px;font-size:11px}.workspace{height:calc(100dvh - 48px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(245px,1fr);padding:10px 12px;gap:14px;overflow:hidden}.workspace:not(:has(.controls:not([hidden]))){display:block}.preview-column{position:relative;top:0;align-self:start;height:100%;padding:0;border:0;overflow:auto;overscroll-behavior:contain}.artwork-stage{width:min(100%,calc((100dvh - 123px)*1.5));height:auto;aspect-ratio:3/2;margin:auto;max-height:none}.controls{height:100%;overflow-y:auto;margin:0;padding:0 15px;overscroll-behavior:contain}.controls section{padding:14px 0}.controls #product-title{font-size:17px;margin-bottom:16px}.mobile-preview{display:block;position:absolute;right:5px;top:5px;font-size:10px;padding:4px 7px;background:#fffE}.playback{flex-wrap:nowrap;gap:5px;margin-top:7px}.playback input{max-width:75px;min-width:25px}.playback button{font-size:10px;padding:5px 7px;min-width:30px}.playback output{font-size:10px}#crop-open{font-size:10px}.cropping .artwork-stage{width:min(100%,calc((100dvh - 210px)*1.5))}#crop-controls{padding:6px;margin-top:6px}#crop-controls p{font-size:10px;line-height:1.3;margin-bottom:6px}.crop-actions button{font-size:10px;padding:6px 9px!important}.status-line{min-height:17px}#font-options{max-height:180px}html{scroll-padding-top:50px}.debug{margin-top:30px}}
@media(min-width:1001px){.artwork-stage{width:min(100%,max(600px,calc((100svh - 160px)*1.5)))}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.workspace{position:fixed;inset:48px 0 0;height:auto}.debug{position:relative;z-index:8;margin-top:calc(100dvh + 20px);background:#fff}#header{z-index:9}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.workspace{grid-template-rows:minmax(0,1fr);overflow:clip}.preview-column,.controls{min-height:0}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.debug{position:fixed;inset:auto 8px 4px auto;margin:0;padding:6px 10px;width:auto;max-width:230px;font-size:10px;z-index:12}.debug[open]{inset:54px 8px 8px;max-width:none;overflow:auto;padding:12px;background:#fff}}
/* Revision 2.1: targeted presentation polish; geometry and crop math unchanged. */
:root{--muted:#595650;--line:#d5d2cd}#header{background:#fcfbf9}.controls{background:#fff;border-color:#d5d2cd}.controls section{border-color:#e0ddd8}
#crop-selection{border:0;border-left:2px solid #fff;border-right:2px solid #fff;box-shadow:none}
#crop-selection::before,#crop-selection::after{content:'';position:absolute;top:-22%;bottom:-22%;width:100vw;background:rgba(0,0,0,.13);pointer-events:none}
#crop-selection::before{right:100%}#crop-selection::after{left:100%}
#crop-left:after,#crop-right:after{border-color:#555;box-shadow:0 1px 4px #0003}
#mobile-preview{z-index:2;top:8px;right:8px;background:#fffffff0;box-shadow:0 1px 4px #0001}
.preview-toolbar{padding-top:4px;padding-bottom:4px;min-height:44px}.preview-toolbar button{min-height:36px;padding:6px 10px}.preview-toolbar>div{gap:4px}
@media(max-width:700px){:root{--header:78px}#header{height:78px;padding-top:2px}#logo-slot{height:40px}#logo-slot img{height:39px}nav button{padding-top:8px;padding-bottom:8px}.preview-column{top:78px}.workspace{padding-top:8px;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}.controls{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));margin-bottom:32px}html{scroll-padding-top:calc(78px + var(--preview-h) + 80px);scroll-padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}#preview-viewport{padding-bottom:env(safe-area-inset-bottom,0px)}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){:root{--header:48px}#header{height:48px;padding-top:0}#logo-slot{height:44px}#logo-slot img{height:42px}nav button{padding-top:15px;padding-bottom:15px}.preview-column{top:0}.workspace{padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}.controls{margin:0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}html{scroll-padding-top:50px}}

/* Crop toolbar correction: presentation only; preserve the crop overlay geometry. */
.playback{margin-left:auto;margin-right:auto;justify-content:center}
.cropping .playback{width:100%;max-width:none;flex-wrap:wrap}
.cropping .playback input{flex:0 0 150px}
#crop-controls{display:contents}
#crop-controls button{white-space:nowrap;flex-shrink:0}
#crop-instruction{display:none;margin:8px 0 0;padding:0;color:var(--muted);font-size:12px;line-height:1.5}
.cropping #crop-instruction{display:block}
@media(max-width:1000px){.cropping .playback button{min-height:40px}}
@media(max-width:700px){.cropping .playback input{flex-basis:110px}#crop-instruction{font-size:11px;line-height:1.4}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.cropping .playback input{flex-basis:75px}#crop-instruction{font-size:10px;line-height:1.3}}

/* Phone landscape: let the existing scrollable columns accommodate width-sized artwork. */
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .workspace{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
 .artwork-stage,.cropping .artwork-stage{width:100%;height:auto;aspect-ratio:3/2}
}

/* Message color placement and crop helper alignment only. */
.message-color-choices{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:18px}
.message-color-choices .match{margin:0}
.message-color-choices label{white-space:nowrap}
#crop-instruction{text-align:center}

/* Product Options occupies the existing controls panel; existing responsive rules apply. */
#continue-options,#add-to-bag-demo{width:100%;min-height:44px}
#product-options .options-title{font-size:19px;font-weight:600;letter-spacing:-.4px;margin:0 0 23px}
#product-options fieldset{min-width:0;margin:0;padding:0;border:0}
#product-options legend{font-size:13px;font-weight:600;padding:0;margin-bottom:12px;line-height:1.45}
.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}
.option-card{position:relative;display:flex;align-items:center;gap:7px;min-height:44px;padding:10px 8px;border:1px solid var(--line);border-radius:4px;cursor:pointer;font-size:12px;line-height:1.4}
.option-card:has(input:checked){border-color:#858078;background:#f1eeea;box-shadow:none}
.option-card:focus-within{outline:2px solid #9c703e;outline-offset:2px}
.option-card input{margin:0;flex-shrink:0;accent-color:#222}
.option-card>span{min-width:0}.option-card strong,.option-card small,.option-card>span>span{display:block}
.option-card small{font-size:10px;color:var(--muted);margin:3px 0}
.option-help{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.proof-choices{display:grid;gap:8px}
#order-summary{font-size:12px;margin-bottom:16px}#order-summary>div{display:flex;justify-content:space-between;gap:10px;margin:10px 0}#order-summary>div>span:last-child{white-space:nowrap}
#order-summary .order-total{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
#order-processing{font-size:12px;line-height:1.5;margin-top:14px}#order-processing p:first-child{display:flex;align-items:center;gap:8px}#order-processing .spinner{flex-shrink:0}#end-order-demo{min-height:44px}#order-error{font-size:12px;line-height:1.5;color:#813626}

/* Preserve native radio semantics/keyboard behavior while the card carries selection. */
.option-card input{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#product-options-step:disabled{opacity:.55}

/* Separate storefront view; designer layout rules remain unchanged. */
.ecwid-cart-active #header,.ecwid-cart-active .workspace,.ecwid-cart-active #developer{display:none!important}
#ecwid-cart-view{padding:16px;min-height:100dvh;background:white}
#cart-back,#retry-cart{min-height:44px}
#cart-error{font-size:12px;line-height:1.5;color:#813626}

/* Cart-only presentation. Ecwid keeps its original image and checkout behavior. */
#ecwid-cart-view .cart-brand{display:flex;align-items:center;max-width:1100px;margin:0 auto 12px;padding:4px 0}
#ecwid-cart-view .cart-brand img{display:block;width:105px;height:64px;max-width:100%;object-fit:contain}
#ecwid-cart-view{position:relative}
#cart-opening{min-height:40vh;display:flex;justify-content:center;align-items:center;gap:10px;font-size:14px;text-align:center;padding:24px}
#ecwid-cart-view.cart-opening #my-store-1643118{visibility:hidden;position:absolute;left:16px;right:16px;pointer-events:none}
#my-store-1643118 .ec-cart-item__picture-inner[data-swa-preview]{background-image:var(--swa-cart-preview)!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}

/* Step 1 product selection inside the existing responsive controls panel. */
#choose-product .choose-title{font-size:19px;font-weight:600;line-height:1.35;margin:0 0 18px}
.product-cards{display:grid;gap:12px;border:0;padding:0;margin:0 0 16px;min-width:0}
.product-card{display:block;position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:pointer;font-size:12px;line-height:1.4}
.product-card input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.product-card>span{display:grid;grid-template-columns:120px minmax(0,1fr);padding:0;align-content:center}
.product-card img{display:block;width:120px;height:auto;aspect-ratio:527/430;object-fit:contain;margin:0;grid-row:1/4;align-self:center}
.product-card strong,.product-card>span>span{display:block;grid-column:2;margin:3px 10px}
.product-card>span>span{color:var(--muted)}
.product-card:has(input:checked){border-color:#858078;background:#f1eeea;box-shadow:inset 0 0 0 1px #858078}
.product-card:has(input:checked) strong::after{content:' ✓';font-weight:700}
.product-card:focus-within{outline:2px solid #9c703e;outline-offset:2px}
#product-options .options-title{margin-bottom:6px}
.selected-product-description{font-size:12px;color:var(--muted);margin:0 0 6px}
#change-product{font-size:12px;border:0;border-radius:0;text-decoration:underline;padding:8px 0;margin-bottom:16px;min-height:36px}
@media(max-width:700px){.has-choose-product nav button{padding-left:4px;padding-right:4px}.product-card>span{display:grid;grid-template-columns:105px minmax(0,1fr);padding:0;align-content:center}.product-card img{grid-row:1/4;align-self:center;width:105px;margin:0}.product-card strong,.product-card>span>span{grid-column:2;margin:3px 10px}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.has-choose-product nav button{padding-left:4px;padding-right:4px}.product-card>span{display:grid;grid-template-columns:90px minmax(0,1fr);padding:0;align-content:center}.product-card img{grid-row:1/4;align-self:center;width:90px;margin:0}.product-card strong,.product-card>span>span{grid-column:2;margin:3px 8px}}

/* Step 2: running total and header-only transition before navigation crowds the logo. */
.options-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#options-top-total{font-size:15px;font-weight:500;white-space:nowrap}
@media(min-width:701px) and (max-width:1100px) and (min-height:501px){
 :root{--header:106px}
 #header{height:106px;grid-template-columns:1fr auto;grid-template-rows:62px 44px;gap:0;padding:0 14px}
 #logo-slot{height:62px}#logo-slot img{height:58px}
 .header-links{grid-column:2;grid-row:1}
 #header nav{grid-column:1/-1;grid-row:2;justify-content:center}
 #header nav button{padding-top:13px;padding-bottom:13px}
 .preview-column{top:calc(var(--header) + 14px)}
 html{scroll-padding-top:120px}
}

/* Keep initial file-selection errors inside the upload panel. */
#empty-art #status{margin:22px 0 0;font-size:12px;line-height:1.4;text-align:center;overflow-wrap:anywhere}
#empty-art #status.error{color:#813626}
#empty-art #status:empty{display:none}
.artwork-stage:has(#empty-art:not([hidden]) #status.error:not(:empty)){min-height:min-content}

/* Upload copy follows the existing phone portrait/landscape layouts. */
.upload-mobile-copy{display:none}
@media(max-width:700px), (max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .upload-desktop-copy{display:none}.upload-mobile-copy{display:inline}
 #empty-art .drop-note{display:none}
}

#empty-art .mobile-video-helper{display:none}
@media(max-width:700px), (max-width:1000px) and (max-height:500px) and (orientation:landscape){
 #empty-art .mobile-video-helper{display:block;color:var(--muted);font-size:11px;line-height:1.4;text-align:center;margin:14px 0 0}
}

/* Keep the Video Guide popover launcher within the existing header link slot. */
.header-links #video-guide{display:inline-block;width:auto;flex:0 0 auto;line-height:normal}

.sample-action{margin-top:16px;text-align:center}