/* A quiet, light workspace framed by the original charcoal/turquoise brand. */
:root{--bg:#f3f4f5;--ink:#17252e;--muted:#65747d;--cyan:#087f8c;--line:#dde3e5;--panel:#fff;--shadow:0 8px 32px #142d3a06}
body{background:var(--bg);font-family:'Segoe UI Variable','Segoe UI',system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{transition:border-color .16s,background .16s,box-shadow .16s}
button{background:#fff;color:var(--ink);font-weight:600;border-radius:9px}
button:hover:not(:disabled){background:#f0f7f7;border-color:#86bcc2}
input,select{background:#fff;color:var(--ink);border-color:#d8e1e4;border-radius:8px}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #087f8c12}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #10a8b8;outline-offset:3px}
header{height:80px;padding:12px max(28px,calc((100vw - 1880px)/2));background:#111d25;border:0;color:#e9eff1}
.logo img{width:110px;height:52px;border-radius:9px;padding:5px}
header nav{gap:6px}
header nav a,header nav button{font-size:12px;font-weight:500;border:1px solid transparent;border-radius:8px;background:transparent;color:#bcc8cf;padding:10px 15px}
header nav a:hover,header nav button:hover{background:#23343e;color:#fff;border-color:transparent}
header nav .nav-active{background:#243b43;color:#8ee4e9;border-color:#375b64}
.doc-link{font-size:11px;color:#a4b6c0}
.demo-bar{background:#e8eff1;color:#486570;letter-spacing:.12em;font-size:9px;padding:7px 16px;font-weight:650;gap:14px;border-bottom:1px solid #dce5e8}
.demo-bar span{color:#637c87;font-size:11px}
main{max-width:1920px;padding:32px 28px 40px;margin:auto}
.intro{margin-bottom:26px;gap:24px;align-items:center}
.intro .eyebrow{display:block;font-size:10px;font-weight:650;letter-spacing:.18em;color:#65838d;margin-bottom:7px}
.intro h1{font-size:34px;letter-spacing:-1.2px;font-weight:600;margin:0;line-height:1.15}
.studio-mark{display:inline-flex;vertical-align:middle;font-size:11px;letter-spacing:.06em;padding:5px 8px;margin-left:7px;border:1px solid #b7d4d8;color:#147381;border-radius:6px}
.intro p{display:block;font-size:13px;color:#71828c;margin:8px 0 0;max-width:none}
.project-actions{gap:8px}
.project-actions button{font-size:12px;padding:11px 16px;background:#ffffffcc;border-color:#d7e1e5;box-shadow:0 2px 4px #18344003}
.project-actions #saveDraft{background:#172e38;border-color:#172e38;color:white}
.project-actions #saveDraft:hover{background:#234653}
.studio{display:grid;grid-template-columns:264px minmax(0,1fr) 286px;gap:20px;align-items:start;position:relative}
.panel{background:#fff;border:1px solid #e0e6e9;box-shadow:var(--shadow);border-radius:16px}
.configuration{position:static;padding:18px;min-height:0;max-height:calc(100vh - 244px);overflow:auto;scrollbar-width:thin;scrollbar-color:#cad7dc transparent}
.segmented{background:#edf1f3;border-radius:9px;padding:4px;gap:2px}
.segmented button{background:transparent;color:#73828d;font-size:12px;font-weight:550;padding:8px 12px;border-radius:6px}
.segmented button.active{background:#fff;color:#1b414e;box-shadow:0 2px 7px #173b4e0c}
.editor-tabs{margin-bottom:20px}
.editor-tabs button{font-size:12px;padding:9px 7px}
.section-title{margin-bottom:12px;gap:9px}
.section-title span{border:0;width:22px;height:22px;background:#edf5f5;color:#45818a;font-size:10px;border-radius:6px}
.section-title h2,.size-picker h2{font-size:13px;font-weight:650;color:#2d4652}
.product-grid{gap:7px;grid-template-columns:1fr 1fr}
.product{background:#f7f9fa;border-color:#e5ebee;padding:9px 7px;gap:7px;font-size:10px;line-height:1.4;font-weight:550;border-radius:9px;min-height:54px;transition:background .16s,border-color .16s}
.product-thumb{width:29px;height:36px;background-color:#eef0f0;border-radius:5px;opacity:.9}
.product.active{background:#e8f4f4;border-color:#86bdc3;color:#176a75;box-shadow:none!important}
.product:hover{background:#edf4f5}
.size-picker{margin-top:20px;padding-top:17px}
.size-picker p{font-size:10px;line-height:1.6;margin:6px 0 10px}
.size-picker #sizes{gap:6px}
.size-picker .size-row{background:#f8fafb;border-color:#e6ecee;padding:6px 7px;border-radius:8px}
.size-picker .size-row label{font-size:10px;color:#5d727e;font-weight:600}
.size-picker .size-row input{width:46px;padding:5px 6px;font-size:12px;background:white}
.size-picker .size-row:has(input[data-selected=true]){background:#edf7f7;border-color:#95c4c9}
.preview-panel{border:1px solid #dfe7e9;border-radius:16px;background:#fff;box-shadow:var(--shadow);min-height:0;overflow:hidden}
.preview-toolbar{background:#fff;padding:13px 18px;border-bottom:1px solid #eef2f3;flex-wrap:wrap;gap:10px}
.studio-label{font-size:10px;letter-spacing:.14em;font-weight:650;color:#71929c;text-transform:uppercase}
.preview-toolbar .segmented button{font-size:11px;padding:7px 10px}
.garment-colors{background:#fff;border-bottom:1px solid #edf1f3;padding:12px 18px;gap:12px}
.garment-colors .label{min-width:0;font-size:11px;margin:0}
.garment-colors .swatches{gap:9px}
.garment-colors .swatch{width:18px;height:18px;border:2px solid white;outline:1px solid #d0d9df}
.garment-colors .swatch.active{outline:2px solid #328d99;outline-offset:2px}
.workspace-tools{background:#fff;border-top:0;padding:11px 18px;gap:6px}
.workspace-tools select{background:#f5f8f9;border-color:#e5ebed;font-size:11px;width:180px;padding:7px 9px}
.workspace-tools button{font-size:11px;background:#f5f8f9;border-color:#e5ebed;padding:7px 10px}
.canvas-wrap{flex:none;height:clamp(480px,58vh,720px);min-height:480px;max-height:none;background:radial-gradient(ellipse at 50% 37%,#fff 0,#eef3f5 54%,#dce5e9 100%);border-top:1px solid #f1f4f5}
.canvas-wrap[data-environment=dark]{background:radial-gradient(ellipse at 50% 38%,#425660,#172b37 72%,#0f202b)}
.canvas-wrap[data-environment=blue]{background:radial-gradient(ellipse at 50% 35%,#7babbc,#386980 75%,#23485c)}
.canvas-wrap[data-environment=warm]{background:radial-gradient(ellipse at 50% 35%,#faf6ef,#e7ddd1 70%,#cbbbad)}
.canvas-wrap::after{width:230px;height:18px;bottom:13%;left:calc(50% - 115px);background:#193c4b22;filter:blur(14px)}
.model-label{top:23px;left:23px;gap:5px}
.model-label b{font-size:15px;letter-spacing:-.25px;font-weight:600;color:#33525f}
.model-label span{font-size:10px;color:#7d929c;max-width:240px}
.drop-tip{top:80px;left:23px;font-size:10px;color:#8197a0;opacity:1}
.drop-tip small{font-size:9px;color:#97a8b0;margin-top:3px}
.studio-watermark{left:22px;bottom:70px;font-size:24px;letter-spacing:-.5px;opacity:.035}
.preview-caption{bottom:17px;font-size:10px;gap:2px;color:#69818e}
.preview-caption small{font-size:9px;opacity:.8}
.camera-tools{padding:12px 17px 8px;background:#fff;gap:6px}
.camera-tools button{background:#f5f8f9;border-color:#e2eaed;font-size:10px;padding:7px 9px}
.camera-tools span{font-size:9px;color:#8a9ca6}
.environment-tools{background:#fff;padding:4px 18px 13px;font-size:10px;gap:9px}
.environment-tools button{width:17px;height:17px;border:2px solid #fff;outline:1px solid #d2dce0}
.environment-tools button.active{outline:2px solid #4b919b;outline-offset:1px}
.preview-foot{background:#fff;border-color:#edf1f3;padding:11px 18px;gap:7px;flex-wrap:wrap}
.preview-foot>span{font-size:10px;color:#738994}
.preview-foot>span:first-child{color:#3e7d89}
.freedom-note{background:#f8fafb;color:#8a9aa4;font-size:9px;padding:10px 18px;border-top:1px solid #edf1f3;line-height:1.6}
.order-panel{--ink:#edf3f5;--muted:#9ab0bb;--line:#ffffff15;--cyan:#77dfe4;position:static;grid-column:auto;display:block;width:auto;max-height:none;overflow:visible;padding:23px 20px;top:auto;right:auto;background:linear-gradient(155deg,#1a3441,#122732);border:1px solid #284450;border-radius:16px;box-shadow:0 12px 40px #18394712;backdrop-filter:none;color:var(--ink)}
.order-panel .quote{grid-column:auto;grid-row:auto;padding-top:17px;margin-top:16px;border-top:1px solid #ffffff18}
.order-panel .quote-head{margin-bottom:17px}
.order-panel .quote-head h2{font-size:16px;font-weight:550;letter-spacing:-.3px}
.badge{background:#e9f4f4;border-color:#c6dfe2;color:#46848d;font-size:8px;letter-spacing:.1em;padding:3px 5px;font-weight:650}
.order-panel .badge{background:#30515d;border-color:#416674;color:#91cbd2}
.order-panel .quote-line{font-size:11px;margin:10px 0;gap:12px;line-height:1.5;color:#9bb2bd}
.order-panel .quote-line strong{color:#dce9ef;font-weight:500;white-space:nowrap}
.order-panel .total{padding:18px 0 4px;margin-top:18px;border-top:1px solid #ffffff1d;font-size:11px;color:#aac2cf}
.order-panel .total strong{color:white;font-size:29px;font-weight:550;letter-spacing:-1px}
.order-panel input,.order-panel select,.order-panel textarea{background:#0c202b;color:#dce9ee;border-color:#36515e;font-size:11px}
.order-panel .delivery label{font-size:11px;color:#c4d6df}
.order-variants summary,.exports summary{font-size:11px;color:#afc8d3;font-weight:500;letter-spacing:.01em}
.order-panel .requirements{border-top:1px solid #ffffff18;margin-top:17px;padding-top:16px}
.requirements label{font-size:11px;font-weight:500;color:#bfd3dd;margin-bottom:9px}
.order-panel .requirements textarea{padding:10px;min-height:85px;border-radius:8px;font-family:inherit}
.order-panel .requirements p,.order-panel .safe-note,.order-panel .hint{font-size:9px;color:#87a3b2;line-height:1.6}
.order-panel .requirements small{color:#6f929f;font-size:9px}
.primary,.order-panel .primary{background:#098897;border-color:#098897;color:white;font-size:12px;font-weight:600;padding:14px 12px;border-radius:9px;box-shadow:0 4px 16px #00889420}
.primary:hover:not(:disabled),.order-panel .primary:hover:not(:disabled){background:#0b9cac;border-color:#0b9cac;color:white}
.order-panel .quiet{background:#24414e;color:#c5e1e7;border-color:#365662;font-size:10px;padding:10px}
.order-panel .quiet:hover{background:#2d515f;color:#fff}
.order-panel #qualityCheck{border-color:#3c6371;margin:15px 0 0;font-size:10px}
.order-panel .safe-note{margin:8px 0 16px}
.art-slot{background:#f5f8f9;border-color:#e3eaed;color:#335c6b;font-size:11px;border-radius:9px}
.art-slot.active{background:#edf7f7;border-color:#8cbfc5}
.art-slot b{font-size:23px;color:#3695a0}
.art-slot small{color:#8b9fa8}
#advancedSettings{background:#f7fafb;border-color:#e0e8eb;border-radius:10px;padding:13px}
#advancedSettings summary{color:#466a7a;font-size:11px}
.artwork-title h2,.property-head h2{font-size:13px;color:#37515e}
.control-grid label{font-size:10px;color:#718995}
.control-grid input,.control-grid select{font-size:12px;padding:7px;background:#fff;border-color:#dae4e8}
.selection-controls .hint,.configuration .hint{font-size:10px;line-height:1.6;color:#8397a2}
.selection-actions button{background:#fff;font-size:10px;padding:7px;color:#607e8b;white-space:normal}
.upload{background:#edf6f6;border:1px dashed #a3c6cc;padding:18px 12px;color:#397c88;border-radius:10px}
.upload b{font-size:12px}.upload small{font-size:10px;color:#84a2ab}
.layer-row{background:#f7fafb;border-color:#e3eaed;color:#4f707e;font-size:11px}
.layer-row.active{background:#e9f4f5;border-color:#9fc8ce;color:#217485}
.quality-item{background:#f3f8f8;border-color:#cce0e2;color:#3b7985;font-size:12px;line-height:1.6}
.quality-item.warning{background:#fff9eb;border-color:#eddaad;color:#936b24}
.quality-item.error{background:#fff2f3;border-color:#e7bcc3;color:#a24f5e}
.order-panel .quality-item.error{background:#442e35;border-color:#74535e;color:#ecc8cc}
dialog{background:#fff;color:#243d4a;border-color:#e0e9ed;padding:32px;border-radius:18px;box-shadow:0 28px 100px #0c283647}
dialog::backdrop{background:#0b253371;backdrop-filter:blur(8px)}
dialog h2{font-size:24px;font-weight:550;letter-spacing:-.7px;color:#234653}
dialog .close{color:#7b929e;background:#eff4f6;border:0;border-radius:8px;padding:0 9px}
.feature-dialog>p{font-size:12px;color:#7b909c}.feature-dialog .check{color:#6c838f;font-size:12px}
.bg-preview{background:repeating-conic-gradient(#dce4e8 0% 25%,#f1f5f6 0% 50%) 0/18px 18px;border:1px solid #e1e9ed}
.project-card{background:#f8fafb;border-color:#e0e9ed;border-radius:12px;padding:16px}.project-card b{font-size:14px;color:#355b6b}.project-card button{font-size:12px;color:#257587}
#checkoutSummary{background:#f0f6f7;color:#355463}
.order-card,.detail{background:white;border-color:#dce6eb}.order-card small{color:#8197a4}
footer{max-width:1920px;margin:auto;border-color:#dbe5e9;color:#93a3ad;padding:20px 28px;font-size:10px}
#toast{background:#183d4c;border-color:#52828d;color:white;font-size:12px;padding:12px 20px;box-shadow:0 10px 36px #123a5026}
#sceneError{background:#fff5df;color:#96712d;border:1px solid #eadab6;border-radius:10px;font-size:12px}
.download-result{background:#e7f2f4;color:#357d8b;border-color:#c7e0e5}
@media(max-width:1280px){main{padding:25px 20px 32px}.studio{grid-template-columns:230px minmax(0,1fr) 250px;gap:14px}.configuration{padding:14px;max-height:none}.product{font-size:9px;padding:8px 5px;gap:5px}.product-thumb{width:24px;height:31px}.order-panel{padding:20px 16px}.order-panel .total strong{font-size:25px}.canvas-wrap{height:560px;min-height:560px}.intro h1{font-size:30px}.preview-toolbar{padding:12px}.preview-toolbar .segmented button{padding:7px 6px;font-size:10px}.garment-colors{padding:12px}.garment-colors .swatches{gap:8px}.workspace-tools{padding:10px 12px}.workspace-tools select{width:145px}.camera-tools span{width:100%;margin:3px 0 0}}
@media(max-width:1050px){.studio{grid-template-columns:230px minmax(0,1fr)}.order-panel{grid-column:2;grid-row:auto;position:static;width:auto;display:block;max-height:none}.configuration{grid-row:1/3;max-height:none}.preview-panel{grid-column:2}.canvas-wrap{height:500px;min-height:500px}.intro p{max-width:350px}}
@media(max-width:750px){header{height:66px;padding:9px 14px;gap:8px}.logo img{width:87px;height:44px}.doc-link{display:none}header nav a{display:none}header nav{gap:3px}header nav button{font-size:10px;padding:8px}.demo-bar{gap:8px;font-size:8px;padding:6px 10px}.demo-bar span{font-size:9px;line-height:1.4}main{padding:22px 12px}.intro{gap:16px;align-items:flex-start;margin-bottom:20px}.intro h1{font-size:29px}.intro p{font-size:11px;max-width:none}.intro .eyebrow{font-size:8px}.project-actions{width:100%;justify-content:flex-start;gap:6px}.project-actions button{flex:1;font-size:10px;padding:10px 8px}.studio{display:flex;flex-direction:column;gap:15px}.configuration{order:0;max-height:none;min-height:0;padding:16px;width:100%}.preview-panel{order:1;width:100%;min-height:0}.order-panel{order:2;width:100%;padding:24px;position:static;max-height:none}.product-grid{grid-template-columns:repeat(2,1fr);gap:7px}.product{font-size:11px;padding:9px;min-height:52px}.product-thumb{width:28px;height:34px}.editor-tabs{margin-bottom:16px}.size-picker #sizes{grid-template-columns:repeat(3,minmax(0,1fr))}.size-picker .size-row{padding:6px;gap:4px}.size-picker .size-row input{width:38px;font-size:12px}.size-picker .size-row label{font-size:9px}.canvas-wrap{height:440px;min-height:440px}.garment-colors{gap:9px}.garment-colors .label{width:100%;font-size:11px}.garment-colors .swatches{gap:9px}.garment-colors .swatch{width:20px;height:20px}.workspace-tools select{width:auto;flex:1;min-width:0}.workspace-tools button{font-size:10px}.preview-toolbar{padding:12px;gap:7px}.preview-toolbar .segmented button{padding:7px;font-size:10px}.studio-label{font-size:9px}.model-label{top:20px;left:20px}.model-label span{font-size:9px;max-width:190px}.drop-tip{top:79px;left:20px}.camera-tools{padding:12px;gap:6px}.camera-tools button{font-size:9px;padding:7px 8px}.preview-foot>span{font-size:9px}.freedom-note{font-size:9px}.order-panel .quote-line{font-size:12px}.order-panel .total strong{font-size:30px}.order-panel .full{font-size:12px}.feature-dialog{padding:26px 18px}.feature-dialog h2{font-size:23px}footer{padding:18px 14px;gap:14px;font-size:9px}}
@media(prefers-reduced-motion:reduce){button,input,select,textarea{transition:none}}
.studio{height:auto;min-height:0}.configuration{height:auto}.preview-panel{height:auto}.project-actions button{color:#526f7e} .project-actions #saveDraft{color:white}

/* Supplier palettes keep long colour lists inside the studio toolbar. */
#colors{max-height:110px;overflow-y:auto;padding:4px 5px;scrollbar-width:thin}#supplierColorNote{font-size:10px;color:var(--muted);flex-basis:100%;padding-left:4px}.swatch:disabled{opacity:.25;cursor:not-allowed}.size-row:has(input:disabled){opacity:.4}

.inventory-status{font-size:12px;line-height:1.5;background:#f1f5f7;border:1px solid #dce5e9;border-radius:12px;padding:12px;margin:14px 0;color:#536b7a}.inventory-status[data-state="available"]{background:#ecf8f2;color:#216443}.inventory-status[data-state="unavailable"]{background:#fff1eb;color:#9c472f}.size-stock{display:block;grid-column:1/-1;font-size:10px;color:var(--muted);padding-bottom:3px}
.size-picker .size-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px}.size-picker .size-row input{width:44px}.size-picker .size-row label{white-space:normal}.size-picker .size-stock{grid-column:1/-1;font-size:9px;line-height:1.3;overflow-wrap:anywhere}

/* Editorial copy and a compact guide keep the product at the centre. */
.studio-guide{margin:0 0 20px;background:#fff;border:1px solid #dce5e8;border-radius:12px;overflow:hidden}.studio-guide>summary{display:flex;align-items:center;gap:11px;padding:13px 18px;cursor:pointer;list-style:none;color:#294652;font-weight:600;font-size:13px}.studio-guide>summary::-webkit-details-marker{display:none}.guide-symbol{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#eaf5f5;color:#087f8c;font-size:12px}.studio-guide summary small{font-size:11px;font-weight:400;color:#768992}.guide-chevron{margin-left:auto;color:#087f8c}.studio-guide[open] .guide-chevron{transform:rotate(180deg)}.guide-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:10px 24px 24px}.guide-steps article>span{font-size:11px;font-weight:600;color:#168490;letter-spacing:.1em}.guide-steps h3{font-size:14px;margin:7px 0}.guide-steps p{font-size:12px;line-height:1.65;color:#6c818c;margin:0}.studio-story{margin-top:38px;padding:32px;background:#fff;border:1px solid #e0e7ea;border-radius:16px}.story-heading{max-width:720px}.story-heading .eyebrow{font-size:10px;color:#678792}.story-heading h2{font-size:26px;font-weight:600;letter-spacing:-.6px;margin:9px 0}.story-heading p{font-size:13px;line-height:1.65}.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:26px 0 30px}.story-grid article{border-top:1px solid #dce9ec;padding-top:20px}.story-tag{font-size:9px;letter-spacing:.13em;color:#128390;font-weight:650}.story-grid h3{font-size:17px;font-weight:600;margin:9px 0}.story-grid p{font-size:12px;line-height:1.8;color:#71818b;max-width:460px}.studio-faq{border-top:1px solid #e6edef;padding-top:23px}.studio-faq>h3{font-size:16px;margin-bottom:14px}.studio-faq details{border-bottom:1px solid #edf1f3;padding:13px 0}.studio-faq summary{cursor:pointer;font-size:13px;font-weight:500;color:#35525f}.studio-faq details p{font-size:12px;line-height:1.75;max-width:900px;margin:10px 0 0;padding-left:17px}.contact-hint{font-size:12px;line-height:1.5;margin:0 0 14px;color:#6a818d}
@media(max-width:1050px){.guide-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.story-grid{gap:20px}}
@media(max-width:750px){.studio-guide>summary{padding:12px;font-size:12px;gap:7px}.studio-guide summary small{font-size:10px}.guide-steps{grid-template-columns:1fr;padding:8px 16px 20px;gap:18px}.studio-story{padding:22px 18px;margin-top:24px}.story-heading h2{font-size:22px}.story-grid{grid-template-columns:1fr;gap:16px}.story-grid article{padding-top:16px}.story-grid p{max-width:none}.studio-faq summary{font-size:12px}}