@font-face{
  font-family:"Inter";
  src:url("./assets/fonts/inter-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
}
.customer-account-link{color:#f5f7fa;text-decoration:none;font-size:13px;font-weight:700;padding:9px 11px;white-space:nowrap}
.customer-account-link:hover{text-decoration:underline;text-underline-offset:4px}
.account-save-dialog{width:min(440px,calc(100vw - 32px));border:1px solid #343b47;border-radius:14px;padding:26px;background:#101216;color:#f5f7fa}
.account-save-dialog::backdrop{background:#000a}
.account-save-dialog h2{margin:0 0 12px}.account-save-dialog p{font-size:14px;line-height:1.5;color:#b1bac8}
.account-save-dialog label{display:block;font-size:14px;margin:20px 0 8px}.account-save-dialog input{width:100%;padding:12px;color:#fff;background:#08090b;border:1px solid #343b47;border-radius:7px;font:inherit}
.account-save-dialog form>div{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.account-save-dialog button{padding:11px 16px;border:1px solid #343b47;border-radius:8px;background:#191d24;color:#fff;font:inherit;cursor:pointer}.account-save-dialog #confirmAccountDesignSave{background:#ee2034;border-color:#ee2034}.account-save-dialog button:disabled{opacity:.5;cursor:wait}.account-save-dialog a{color:#ff8591}
@media(max-width:650px){.header-right .customer-account-link{font-size:12px;padding:7px 5px}#saveAccountDesignButton{font-size:11px;padding:7px 6px}}
:root {
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg: #08090b;
  --panel: #101216;
  --panel-2: #15181e;
  --line: #272b33;
  --muted: #939aa7;
  --text: #f5f7fa;
  --red: #ee2034;
  --red-2: #ff3b4e;
  --topbar-height:64px;
  --workflow-nav-height:66px;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--font-sans); }
body { overflow:hidden; font-synthesis:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
button, textarea, input, select { font: inherit; }
button { color: inherit; }
h1,h2,h3{font-weight:800;letter-spacing:-.03em}
.topbar { height:var(--topbar-height); display:flex; align-items:center; justify-content:space-between; padding:0 26px; border-bottom:1px solid #20232a; background:#0c0e11; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; font-family:Inter,system-ui,sans-serif; font-size:18px; font-style:normal; font-weight:800; line-height:1.5; letter-spacing:-.03em; text-decoration:none; cursor:pointer; }
.brand:focus-visible{outline:2px solid var(--red);outline-offset:5px;border-radius:4px}
.brand-mark { width:31px; height:31px; border-radius:8px; display:grid; place-items:center; background:var(--red); font-size:19px; font-style:italic; }
.brand-logo{display:block;object-fit:contain;width:40px;height:40px;aspect-ratio:1;border-radius:7px}
.brand-logo.store-header-logo{width:auto;height:40px;max-width:none;aspect-ratio:auto;border-radius:0}
.brand-name{display:block}
.prototype-pill { border:1px solid #333844; color:#aeb5c2; padding:7px 10px; border-radius:999px; font-size:10px; letter-spacing:.12em; font-weight:800; }
.workspace { height:calc(100vh - var(--topbar-height));height:calc(100dvh - var(--topbar-height)); display:grid; grid-template-columns: 460px 1fr; }
.controls-panel { overflow:auto; padding:30px 28px 50px; background:#0c0e11; border-right:1px solid #20232a; scrollbar-width:auto; scrollbar-color:#ff3348 #1b1f26; }
.controls-panel::-webkit-scrollbar { width:20px; }
.controls-panel::-webkit-scrollbar-track { background:#1b1f26; border-left:1px solid #3a414c; }
.controls-panel::-webkit-scrollbar-thumb { min-height:90px; background:linear-gradient(180deg,#ff6674 0%,#ff3348 48%,#cf132b 100%); border:3px solid #1b1f26; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),0 0 10px rgba(255,51,72,.5); }
.controls-panel::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#ff7a86,#ff3b50 48%,#e11932); }
.eyebrow { color:var(--red-2); font-size:11px; font-weight:900; letter-spacing:.16em; margin-bottom:10px; }
h1 { margin:0; line-height:.94; font-size:44px; letter-spacing:-.03em; }
h1 span { color:#6f7580; }
.intro { color:#a2a9b5; line-height:1.55; font-size:14px; margin:18px 0 26px; max-width:385px; }
.step-card { border-top:1px solid #252931; padding:22px 0; }
.step-heading { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.step-heading strong,.color-empty-copy h3 { display:block; color:#fff; font-size:14px; font-weight:700; }
.step-heading small,.color-empty-copy p { display:block; color:#747c89; margin-top:3px; font-size:11px; }
.upload-zone { display:block; min-height:100px; border:1px dashed #3a414b; border-radius:13px; background:#12151a; padding:16px; cursor:pointer; transition:.2s; }
.upload-zone:hover, .upload-zone.drag, .upload-zone.dragging { border-color:#e13444; background:#171317; }
#uploadEmpty { min-height:67px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#8e96a3; font-size:12px; }
#uploadEmpty b { color:#f1f3f6; }
.upload-empty { min-height:67px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#8e96a3; font-size:12px; text-align:center; }
.upload-empty b { color:#f1f3f6; }
.upload-empty small { color:#626b79; font-size:10px; }
.upload-icon { color:#ff5060; font-size:22px; line-height:1; }
.upload-preview { display:flex; align-items:center; gap:12px; }
/* The logo at its own proportions (David, 2026-10-09: option A): as wide as it
   is, up to 65% of the row, on a checkerboard that shows its transparency;
   dark for a light logo (app.js logoPreviewTone). Real colours, so the store
   looks leave it (build-customizer-look.mjs SKIP_SELECTOR). */
.upload-preview img { flex:0 1 auto; height:64px; width:auto; min-width:44px; max-width:65%; object-fit:contain; box-sizing:border-box; border-radius:9px; padding:6px 8px; background-color:#f3f4f6; background-image:linear-gradient(45deg,#e4e6ea 25%,transparent 25%,transparent 75%,#e4e6ea 75%),linear-gradient(45deg,#e4e6ea 25%,transparent 25%,transparent 75%,#e4e6ea 75%); background-size:12px 12px; background-position:0 0,6px 6px; }
.upload-preview.upload-preview-light img { background-color:#23262c; background-image:linear-gradient(45deg,#2e3239 25%,transparent 25%,transparent 75%,#2e3239 75%),linear-gradient(45deg,#2e3239 25%,transparent 25%,transparent 75%,#2e3239 75%); }
.upload-preview>div { flex:1 1 0; min-width:0; display:grid; gap:5px; }
.upload-preview span { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-preview small { color:#778293; font-size:10px; }
.hidden { display:none !important; }
.text-button { border:0; background:none; color:#ff5a69; cursor:pointer; font-size:11px; }
textarea { width:100%; resize:vertical; min-height:108px; color:#eef1f6; background:#12151a; border:1px solid #30353f; border-radius:12px; padding:13px 14px; outline:none; font-size:13px; line-height:1.5; }
textarea:focus { border-color:#6b343c; box-shadow:0 0 0 3px rgba(238,32,52,.08); }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 13px; }
.chips button, .toolbar-actions button { border:1px solid #30353d; background:#15181d; border-radius:999px; padding:7px 10px; font-size:10px; cursor:pointer; color:#aab1bc; }
.chips button:hover, .toolbar-actions button:hover { border-color:#545b67; color:white; }
.generate-button { width:100%; border:0; background:linear-gradient(135deg,#e91d31,#ff3f4f); border-radius:11px; padding:13px 15px; font-weight:900; font-size:13px; cursor:pointer; box-shadow:0 10px 30px rgba(238,32,52,.18); }
.generate-button:active { transform:translateY(1px); }
.generate-button span { margin-right:6px; }
.prototype-note { color:#656d79; font-size:10px; line-height:1.45; margin-top:9px; }
.graphics-text-controls{display:grid;gap:12px}
.graphics-field{display:grid;gap:7px;color:#8d97a8;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.graphics-field input,.graphics-field select{width:100%;min-width:0;height:44px;border:1px solid #343b47;border-radius:10px;background-color:#12161b;color:#f5f7fa;padding:0 12px;outline:none}
.graphics-field input:focus,.graphics-field select:focus{border-color:#ff4558;box-shadow:0 0 0 3px rgba(255,51,71,.10)}
.graphics-field>input[type="text"],.text-font-select{font-size:18px;font-weight:750;text-transform:none}
.text-font-select{cursor:pointer}
/* Dropdowns: the browser's own arrow sat almost on the edge, so every
   dropdown draws its arrow 12 px in from the edge behind a thin divider
   (David, 2026-10-10, option C). The fills are background-color, so the
   store look's redrawn colours (build-customizer-look.mjs) keep the arrow
   and the divider; the arrow's grey reads on light and dark backgrounds. */
:root{--cz-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238b93a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.product-category-picker select,.graphics-field select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:var(--cz-select-arrow),linear-gradient(#343b47,#343b47);background-repeat:no-repeat;background-position:right 12px center,right 34px center;background-size:12px 12px,1px 18px}
.text-font-select option{background:#fff;color:#17202b;padding:9px 10px;font-size:14px}
.graphics-color-control{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px}
.graphics-color-control input[type="color"]{padding:4px;cursor:pointer;background:#0c0f13}
.graphics-color-control input[type="text"]{font:800 16px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
.outline-width-control{display:grid;grid-template-columns:minmax(0,1fr) 54px;align-items:center;gap:10px;min-height:44px}
.outline-width-control input[type="range"]{width:100%;height:6px;padding:0;border:0;border-radius:999px;background:#252b33;box-shadow:none;accent-color:#ff3347;cursor:pointer}
.outline-width-control input[type="range"]:focus{box-shadow:0 0 0 3px rgba(255,51,71,.12)}
.outline-width-control output{display:grid;place-items:center;height:32px;border:1px solid #343b47;border-radius:8px;background:#12161b;color:#fff;font:800 12px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:0;text-transform:none}
.text-accordion{display:grid;gap:10px}
.text-accordion-item{overflow:hidden;border:1px solid #303742;border-radius:12px;background:#101419}
.text-accordion-item.active{border-color:#4a5361;box-shadow:0 0 0 1px rgba(255,255,255,.025)}
.text-accordion-header{width:100%;min-height:58px;border:0;background:#151a20;color:#fff;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 13px;text-align:left;cursor:pointer}
.text-accordion-header:hover{background:#1a2027}
.text-accordion-header strong{font-size:14px;white-space:nowrap}
.text-accordion-preview{overflow:hidden;color:#8995a8;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.text-accordion-chevron{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#242b34;color:#cbd3df;font-size:16px}
.logo-accordion-header{display:grid;grid-template-columns:minmax(0,1fr) 38px 38px 38px;align-items:stretch;background:#151a20}
.logo-accordion-toggle{min-width:0;min-height:58px;border:0;background:transparent;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 8px 11px 13px;text-align:left;cursor:pointer}
.logo-accordion-toggle:hover,.logo-duplicate-button:hover,.logo-name-edit-button:hover,.logo-delete-button:hover{background:#1a2027}
.logo-accordion-toggle strong{overflow:hidden;font-size:16px;text-overflow:ellipsis;white-space:nowrap}
.text-accordion-label{min-width:0;display:flex;align-items:baseline;gap:9px;overflow:hidden}
.text-accordion-label strong{flex:none}
.text-accordion-label .text-accordion-preview{min-width:0}
.logo-duplicate-button,.logo-name-edit-button,.logo-delete-button{display:grid;place-items:center;border:0;border-left:1px solid #2b323c;background:transparent;color:#aab5c5;cursor:pointer}
.logo-duplicate-button svg,.logo-name-edit-button svg,.logo-delete-button svg{width:17px;height:17px;fill:currentColor}
.logo-delete-button:hover{color:#ff6677}
/* The bin drawn in strokes: lid, handle, tapered can, two lines (2026-10-09). */
.logo-delete-button svg.icon-stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}
.logo-duplicate-button:focus-visible,.logo-name-edit-button:focus-visible,.logo-delete-button:focus-visible,.logo-accordion-toggle:focus-visible{position:relative;z-index:1;outline:2px solid #ff4054;outline-offset:-3px}
.logo-duplicate-button:disabled,.logo-name-edit-button:disabled{opacity:.45;cursor:default}
.logo-duplicate-button:disabled:hover{background:transparent}
.logo-name-input{min-width:0;width:100%;height:38px;margin:10px 8px 10px 12px;padding:0 10px;border:1px solid #ff4054;border-radius:8px;background:#101419;color:#fff;font:750 15px/1 var(--font-sans);outline:none;box-shadow:0 0 0 3px rgba(255,64,84,.1)}
.text-accordion-body{display:grid;gap:14px;padding:14px;border-top:1px solid #2b323c}
/* A new text layer waits for its Text type (David, 2026-10-20): the menu
   reads "Choose a text type" in the accent colour, with a line saying why. */
#customTextRoleSelect.text-type-pending{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.text-type-hint{margin:-6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.add-text-button{width:100%;margin-top:12px;border-radius:10px;padding:11px 13px;font-size:12px;font-weight:850;cursor:pointer}
.add-text-button{border:1px dashed #4b5564;background:#151a20;color:#fff}
.add-text-button:hover:not(:disabled){border-color:#ff4558;background:#1b171c}
.add-text-button:disabled{cursor:not-allowed;color:#687384;opacity:.7}
.graphics-text-note{margin:10px 2px 0;color:#697487;font-size:10px;line-height:1.45}
.text-side-dialog{width:min(430px,calc(100vw - 32px));padding:0;border:1px solid #3b4451;border-radius:16px;background:#101419;color:#fff;box-shadow:0 28px 90px rgba(0,0,0,.62)}
.text-side-dialog::backdrop{background:rgba(2,4,7,.72);backdrop-filter:blur(5px)}
.text-side-dialog-card{position:relative;padding:24px}
.text-side-dialog-card h2{margin:6px 34px 8px 0;font-size:24px;line-height:1.08}
.text-side-dialog-card>p{margin:0 0 18px;color:#929daf;font-size:12px;line-height:1.5}
.text-side-dialog-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border:1px solid #3c4552;border-radius:9px;background:#1a2027;color:#d5dbe5;font-size:20px;line-height:1;cursor:pointer}
.text-side-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.text-side-options button{display:grid;gap:5px;min-height:92px;padding:16px;border:1px solid #3a4350;border-radius:12px;background:#151a20;color:#fff;text-align:left;cursor:pointer}
.text-side-options button:hover,.text-side-options button:focus-visible{border-color:#ff4558;background:#21171c;outline:none;box-shadow:0 0 0 3px rgba(255,51,71,.1)}
.text-side-options strong{font-size:17px}.text-side-options span{color:#8995a8;font-size:11px;line-height:1.35}
.text-side-cancel{width:100%;margin-top:12px;border:0;background:transparent;color:#8d98aa;padding:9px;cursor:pointer}
.design-mode-fieldset{margin:0;padding:0;border:0}
.design-mode-fieldset legend{margin:0 0 10px;color:#8e9ab0;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.design-mode-options{display:grid;gap:10px}
.design-mode-option{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;align-items:center;padding:15px;border:1px solid #303742;border-radius:12px;background:#12161b;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s}
.design-mode-option:hover{border-color:#4a5362;background:#151a20}
.design-mode-option:has(input:checked){border-color:#ff3347;background:#1b1418;box-shadow:0 0 0 2px rgba(255,51,71,.12)}
.design-mode-option input{position:absolute;opacity:0;pointer-events:none}
.design-mode-control{width:19px;height:19px;border:2px solid #596273;border-radius:50%;display:grid;place-items:center}
.design-mode-control::after{content:"";width:9px;height:9px;border-radius:50%;background:#ff3347;transform:scale(0);transition:transform .15s}
.design-mode-option input:checked+.design-mode-control{border-color:#ff5364}
.design-mode-option input:checked+.design-mode-control::after{transform:scale(1)}
.design-mode-option input:focus-visible+.design-mode-control{outline:3px solid rgba(97,153,255,.45);outline-offset:3px}
.design-mode-option strong{display:block;color:#fff;font-size:15px}
.design-mode-expert{margin-left:.45em;color:#ff4054;font-weight:400}
.start-path-panel{margin-top:20px;padding-top:20px;border-top:1px solid #292f38}
.start-path-title{margin:0 0 8px;color:#fff;font-size:19px}
.blank-design-panel>.eyebrow{margin-bottom:8px}
.blank-panel-color-list{display:grid;margin-top:20px;border-top:1px solid #252c34}
.blank-panel-color-row{display:grid;grid-template-columns:minmax(0,1fr) 42px 88px;gap:10px;align-items:center;min-height:62px;border-bottom:1px solid #252c34}
.blank-panel-color-row label{color:#fff;font-size:14px;font-weight:750}
.blank-panel-color-row input[type="color"]{width:42px;height:38px;padding:4px;border:1px solid #46515f;border-radius:9px;background:#151a20;cursor:pointer}
.blank-panel-color-row input[type="text"]{min-width:0;width:100%;height:38px;padding:0 10px;border:1px solid #3c4653;border-radius:9px;background:#11161c;color:#eef3fb;font:700 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
.blank-panel-color-row input[type="text"]:focus{border-color:#ff4054;outline:none;box-shadow:0 0 0 3px rgba(255,64,84,.1)}
.pdf-upload-zone{margin-top:14px}
.pdf-design-preview{display:grid;grid-template-columns:58px minmax(0,1fr) auto}
/* The PDF design keeps its square (the logo card's picture went wide, 2026-10-09). */
.pdf-design-preview img{width:58px;height:58px;min-width:0;max-width:none;padding:5px;background:white;object-fit:cover}
.pdf-design-preview .text-button{align-self:center}
.pdf-design-status{min-height:18px;margin:9px 2px 0;color:#9aa5b7;font-size:11px;line-height:1.4}
.pdf-design-status.busy{color:#d5dbe5}
.pdf-design-status.success{color:#5ce092}
.pdf-design-status.error{color:#ff8492}
/* Pattern template licence (lib/template-licenses.js): the key comes before the PDF. */
.template-license{margin:0 0 14px;padding:12px;border:1px solid #2c323b;border-radius:11px;background:#101317;font-size:12px;line-height:1.5;color:#c9d1dd}
.template-license-intro{margin:0 0 10px}
.template-license [hidden]{display:none}
.template-license-intro a{color:inherit;font-weight:700;text-decoration:underline}
.template-license-form{display:grid;gap:6px;margin:0 0 6px}
.template-license-form label{font-weight:700}
.template-license-row{display:flex;gap:6px}
.template-license-row input{flex:1;min-width:0;height:36px;padding:0 10px;border:1px solid #3a414b;border-radius:8px;background:#0b0d10;color:inherit;font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.template-license-row button{height:36px;padding:0 12px;border:0;border-radius:8px;background:#e13444;color:#fff;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.template-license-row button:disabled{opacity:.6;cursor:wait}
.template-license-status{min-height:16px;margin:4px 0 0;font-size:11px}
.template-license-status.is-error{color:#ff8492}
.template-license-status.is-success{color:#5ce092}
.upload-zone.is-locked{opacity:.45;cursor:not-allowed;pointer-events:none}
.concept-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.concept-card { position:relative; aspect-ratio:1.08; border-radius:10px; border:1px solid #292e36; overflow:hidden; background:#060708; cursor:pointer; padding:0; }
.concept-card img { width:100%; height:100%; object-fit:cover; display:block; }
.concept-card .concept-caption { position:absolute; left:0; right:0; bottom:0; padding:22px 9px 8px; background:linear-gradient(transparent,rgba(0,0,0,.82)); text-align:left; font-size:10px; font-weight:800; }
.concept-card.selected { border-color:#ff4454; box-shadow:0 0 0 2px rgba(238,32,52,.25); }
.concept-card.selected::after { content:"✓"; position:absolute; top:7px; right:7px; width:21px; height:21px; border-radius:50%; display:grid; place-items:center; background:#e92034; font-weight:900; font-size:11px; }
.viewer-panel { min-width:0; position:relative; display:grid; grid-template-rows:auto 1fr auto; background:radial-gradient(circle at 50% 42%, #20242a 0, #13161a 42%, #0d0f12 80%); }
.viewer-toolbar { min-height:70px; display:flex; justify-content:space-between; align-items:center; padding:0 24px; border-bottom:1px solid rgba(255,255,255,.06); }
.viewer-title { font-size:11px; font-weight:900; letter-spacing:.13em; }
.viewer-subtitle { color:#747c87; font-size:11px; margin-top:4px; }
.toolbar-actions { display:flex; gap:7px; }
.toolbar-actions [data-view][aria-pressed="true"]{color:#fff;box-shadow:inset 0 -3px #ff3347}
.reset-view-button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.reset-view-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.viewer { position:relative; min-height:0; overflow:hidden; }
.viewer canvas { display:block; width:100%; height:100%; }
.loading-state { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#e7eaf0; pointer-events:none; }
.loading-state span { color:#707783; font-size:11px; }
.spinner { width:31px; height:31px; border:3px solid #30353d; border-top-color:#e92a3d; border-radius:50%; animation:spin .8s linear infinite; margin-bottom:6px; }
.loading-progress{width:min(280px,62%);height:7px;margin-top:7px;overflow:hidden;border:1px solid #343b46;border-radius:999px;background:#181c22}
.loading-progress-bar{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e9243a,#ff5364);box-shadow:0 0 14px rgba(255,51,71,.38);transition:width .16s ease-out}
.loading-progress-text{color:#aab2bf;font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}
.retry-viewer-button{display:block;margin-top:14px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:#ff3347;color:#fff;padding:9px 15px;font:800 12px/1 var(--font-sans);cursor:pointer}
.retry-viewer-button:hover{background:#ff4658}
@keyframes spin { to { transform:rotate(360deg); } }
.graphic-history-controls{position:absolute;z-index:4;left:18px;bottom:18px;display:flex;gap:8px}
.graphic-history-controls button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #39414d;border-radius:11px;background:rgba(10,13,17,.88);color:#eef2f8;box-shadow:0 8px 24px rgba(0,0,0,.3);backdrop-filter:blur(10px);cursor:pointer}
.graphic-history-controls button:hover:not(:disabled){border-color:#ff4054;background:#1b2027;color:#fff}
.graphic-history-controls button:focus-visible{outline:2px solid #ff4054;outline-offset:2px}
.graphic-history-controls button:disabled{cursor:not-allowed;color:#667080;opacity:.48}
.graphic-history-controls svg{width:21px;height:21px;fill:currentColor}
.image-quality-badge{position:absolute;z-index:8;left:50%;bottom:78px;display:inline-flex;align-items:center;gap:6px;min-height:39px;padding:9px 13px;border:1px solid #53606f;border-radius:999px;background:rgba(10,13,17,.92);color:#e9eef5;box-shadow:0 10px 30px rgba(0,0,0,.32);backdrop-filter:blur(10px);font:inherit;font-size:12px;cursor:pointer;transform:translateX(-50%)}
.image-quality-badge:hover{border-color:#ff4054;background:#151a21}
.image-quality-badge:focus-visible{outline:2px solid #ff4054;outline-offset:2px}
.image-quality-badge[data-quality="excellent"],.image-quality-badge[data-quality="good"],.image-quality-badge[data-quality="vector"]{border-color:#3b9e69;color:#b9ffd5}
.image-quality-badge[data-quality="fair"]{border-color:#b99035;color:#ffe19a}
.image-quality-badge[data-quality="low"]{border-color:#df772b;color:#ffc08d}
.image-quality-badge[data-quality="poor"]{border-color:#e3495b;color:#ffb1ba}
.image-quality-badge-label{color:#aab5c5;font-weight:650}
.image-quality-badge strong{font-weight:900}
.graphic-nudge-tip{
  position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;width:max-content;max-width:min(620px,calc(100% - 360px));
  padding:11px 12px 11px 15px;border:1px solid rgba(255,64,84,.62);border-radius:12px;
  background:rgba(10,13,17,.92);color:#eef2f8;box-shadow:0 10px 30px rgba(0,0,0,.36),0 0 18px rgba(255,51,71,.08);
  backdrop-filter:blur(12px);pointer-events:auto
}
.graphic-nudge-tip-copy{display:flex;align-items:baseline;gap:9px;min-width:0}
.graphic-nudge-tip-copy strong{flex:none;color:#fff;font-size:12px;line-height:1.3}
.graphic-nudge-tip-copy span{color:#b9c2d0;font-size:11px;line-height:1.45}
.graphic-nudge-tip kbd{display:inline-block;padding:1px 5px;border:1px solid #46505e;border-bottom-width:2px;border-radius:5px;background:#1b2027;color:#fff;font:800 10px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}
.graphic-nudge-tip-close{flex:none;display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid #46505e;border-radius:8px;background:#1b2027;color:#d7dde7;font:700 18px/1 var(--font-sans);cursor:pointer}
.graphic-nudge-tip-close:hover{border-color:#ff4054;background:#2a171c;color:#fff}
.graphic-nudge-tip-close:focus-visible{outline:2px solid #ff4054;outline-offset:2px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.orbit-control{
  position:absolute;z-index:4;right:24px;bottom:18px;width:128px;
  display:grid;justify-items:center;gap:5px;color:#aeb7c6;
  pointer-events:none;user-select:none;-webkit-user-select:none
}
.orbit-control-label,.orbit-control-help{
  font:800 9px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  padding:3px 7px;border:1px solid rgba(255,255,255,.09);border-radius:999px;
  background:rgba(8,10,14,.66);backdrop-filter:blur(7px);
  letter-spacing:.13em;text-transform:uppercase;text-shadow:0 2px 7px rgba(0,0,0,.9)
}
.orbit-control-label{color:#eef2f7}
.orbit-control-help{color:#c2cad6;letter-spacing:.08em}
.orbit-trackball{
  --orbit-dot-x:0px;--orbit-dot-y:0px;
  position:relative;width:116px;height:116px;padding:0;border:1px solid rgba(145,157,176,.28);
  border-radius:50%;overflow:hidden;pointer-events:auto;touch-action:none;cursor:grab;
  background:radial-gradient(circle at 43% 38%,rgba(64,72,84,.52),rgba(14,17,22,.86) 54%,rgba(7,9,12,.94));
  box-shadow:0 14px 32px rgba(0,0,0,.38),inset 0 0 22px rgba(130,148,175,.08);
  transition:border-color .15s,box-shadow .15s,transform .15s
}
.orbit-trackball:hover{border-color:rgba(255,83,100,.62);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 18px rgba(255,51,71,.10),inset 0 0 22px rgba(130,148,175,.1)}
.orbit-trackball:focus-visible{outline:2px solid #ff5364;outline-offset:4px}
.orbit-trackball.dragging{cursor:grabbing;border-color:#ff5364;transform:scale(1.025);box-shadow:0 16px 38px rgba(0,0,0,.48),0 0 24px rgba(255,51,71,.18),inset 0 0 22px rgba(130,148,175,.12)}
.orbit-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-ring-outline,.orbit-ring{fill:none;vector-effect:non-scaling-stroke}
.orbit-ring-outline{stroke:rgba(170,181,198,.18);stroke-width:1}
.orbit-ring{stroke:#aab5c5;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.orbit-ring-back{opacity:.22;stroke-dasharray:2.2 3.2}
.orbit-ring-front{opacity:.72}
.orbit-ring-active{stroke:#ff4054;filter:drop-shadow(0 0 3px rgba(255,51,71,.45))}
.orbit-trackball.dragging .orbit-ring-front{opacity:1}
.orbit-trackball.dragging .orbit-ring-back{opacity:.34}
.orbit-arrow{fill:#aeb7c6;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.orbit-arrow-active{fill:#ff4054}
.orbit-sphere{
  position:absolute;left:50%;top:50%;width:39px;height:39px;transform:translate(-50%,-50%);
  border:1px solid rgba(213,221,232,.32);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#697483 0,#303640 32%,#15191f 72%,#090b0f 100%);
  box-shadow:0 8px 16px rgba(0,0,0,.55),inset -6px -7px 12px rgba(0,0,0,.34),inset 4px 4px 9px rgba(255,255,255,.08)
}
.orbit-sphere-dot{
  position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  transform:translate(var(--orbit-dot-x),var(--orbit-dot-y));
  background:linear-gradient(145deg,#ff7482,#f41f37);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 0 9px rgba(255,51,71,.75);transition:transform .05s linear
}
@media(max-width:1200px){
  .graphic-nudge-tip{max-width:min(520px,calc(100% - 280px))}
  .graphic-nudge-tip-copy{display:block}
  .graphic-nudge-tip-copy strong,.graphic-nudge-tip-copy span{display:block}
  .graphic-nudge-tip-copy span{margin-top:2px}
  .orbit-control{right:14px;bottom:14px;width:102px}
  .orbit-trackball{width:92px;height:92px}
  .orbit-control-label,.orbit-control-help{font-size:8px}
  .orbit-sphere{width:33px;height:33px}
}
.viewer-footer { height:44px; border-top:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:space-between; padding:0 20px; color:#747c86; font-size:10px; }
.status { display:flex; align-items:center; gap:7px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#31cd6f; box-shadow:0 0 10px rgba(49,205,111,.5); }
@media (max-width: 900px) {
  body { overflow:auto; }
  .topbar { position:sticky; top:0; z-index:20; }
  .workspace { height:auto; display:flex; flex-direction:column-reverse; }
  .viewer-panel { height:64vh; min-height:500px; position:sticky; top:64px; z-index:5; }
  .controls-panel { border-right:0; border-top:1px solid #20232a; overflow:visible; padding:25px 20px 60px; position:relative; z-index:7; }
  h1 { font-size:39px; }
  .viewer-toolbar { padding:0 14px; }
  .toolbar-actions button:nth-child(3) { display:none; }
  .mobile-hint { display:none; }
}


/* Premade design library */
.concept-tabs{display:flex;gap:8px;margin:14px 0 12px}
.concept-tab{border:1px solid #303743;background:#11151b;color:#aeb7c6;border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer}
.concept-tab.active{background:#f3263d;color:#fff;border-color:#f3263d}
.premade-card{position:relative}
.premade-card .premade-badge,.blank-design-card .premade-badge{position:absolute;top:8px;left:8px;padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em}

.editing-design-label{
  margin:10px 0 12px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:#aeb8cb;
  font-size:12px;
  font-weight:700;
}

.edit-status-row{display:flex;gap:8px;align-items:stretch;margin:10px 0 12px}
.edit-status-row .editing-design-label{margin:0;flex:1;min-width:0}
.history-controls{display:flex;gap:6px}
.history-controls button{
  border:1px solid rgba(255,255,255,.13);background:#15191f;color:#d7ddea;
  border-radius:10px;padding:0 11px;font-size:12px;font-weight:700;white-space:nowrap;
  cursor:pointer
}
.history-controls button:hover:not(:disabled){border-color:rgba(255,57,76,.7);color:#fff}
.history-controls button:disabled{opacity:.32;cursor:not-allowed}

.design-toolbar{display:flex;gap:10px;align-items:center;margin:0 0 10px}
.tool-button{
  border:1px solid rgba(255,255,255,.14);background:#15191f;color:#dce3ef;
  border-radius:10px;padding:9px 12px;font-weight:800;font-size:12px;cursor:pointer
}
.tool-button:hover{border-color:#ff394c;color:#fff}
.tool-button.active{background:#ff3347;border-color:#ff3347;color:#fff;box-shadow:0 0 0 3px rgba(255,51,71,.15)}
.tool-icon{font-size:15px;margin-right:4px}
.tool-hint{font-size:11px;color:#7f8aa0;line-height:1.35}
.color-replace-panel{
  display:grid;grid-template-columns:minmax(120px,1fr) 24px minmax(140px,1fr);
  gap:10px;align-items:end;margin:0 0 14px;padding:12px;border:1px solid rgba(255,255,255,.1);
  border-radius:12px;background:#11151a
}
.color-replace-panel.hidden{display:none}
.color-field label,.match-field label{display:block;font-size:10px;color:#8490a5;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.color-input-wrap{display:flex;align-items:center;gap:7px}
.color-input-wrap input[type="text"]{width:100%;min-width:0;background:#0c0f13;border:1px solid #303642;color:#fff;border-radius:8px;padding:8px;font:700 12px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
.color-input-wrap input[type="color"]{width:36px;height:34px;border:0;padding:0;background:transparent;cursor:pointer}
.color-swatch{width:28px;height:28px;border-radius:7px;border:1px solid rgba(255,255,255,.25);background:#000;flex:0 0 auto}
.color-arrow{color:#748096;text-align:center;padding-bottom:9px;font-weight:900}
.match-field{grid-column:1 / span 2}
.match-field input[type="range"]{width:100%}
#colorToleranceLabel{font-size:10px;color:#aab4c5}
.apply-color-button{align-self:end;border:0;border-radius:9px;background:#ff3347;color:#fff;font-weight:900;padding:10px 13px;cursor:pointer}
.apply-color-button:hover{filter:brightness(1.08)}
.stitch-color-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding:13px;border:1px solid #303642;border-radius:12px;
  background:#11151a;overflow:hidden
}
.stitch-color-label h3{margin:0;font-size:12px;color:#dbe2ee;font-weight:700}
.stitch-color-label p{margin:0;color:#8e9ab0;font-size:11px;line-height:1.4}
.stitch-color-swatches{display:flex;gap:6px;flex:0 0 auto}
.stitch-color-swatch{
  display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #303642;
  border-radius:8px;background:#0c0f13;color:#cfd7e4;font-size:11px;font-weight:800;cursor:pointer
}
.stitch-color-swatch:hover{border-color:#68758b;color:#fff}
.stitch-color-swatch.active{border-color:#ff3347;box-shadow:0 0 0 2px rgba(255,51,71,.14);color:#fff}
.stitch-color-chip{width:15px;height:15px;border-radius:5px;border:1px solid rgba(255,255,255,.28);flex:0 0 auto}
.stitch-color-chip-white{background:#fff}
.stitch-color-chip-black{background:#000}
@media(max-width:650px){
  .color-replace-panel{grid-template-columns:1fr}
  .color-arrow{display:none}.match-field{grid-column:auto}
  .stitch-color-row{align-items:flex-start;flex-direction:column}
}

.viewer{position:relative!important}
.eyedropper-svg{display:grid;place-items:center;color:inherit}
.build-version{
  position:fixed;top:8px;right:9px;z-index:1000;
  padding:3px 7px;border-radius:6px;
  background:rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.13);
  color:#8d98aa;font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  pointer-events:none
}

/* V15 positioning corrections */
.viewer-panel .viewer{
  position:relative!important;
}
.header-right{
  display:flex;
  align-items:center;
  gap:9px;
  margin-left:auto;
}
.help-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid #343b47;background:#15191f;color:#d7dee8;border-radius:7px;
  padding:5px 9px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap
}
.help-button:hover,.help-button[aria-expanded="true"],.share-design-button:hover:not(:disabled),.install-app-button:hover{border-color:#ff5364;background:#211318;color:#fff}
.help-button:focus-visible{outline:2px solid #ff5364;outline-offset:2px}
.help-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.help-button .help-icon-dot{fill:currentColor;stroke:none}
.share-design-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid #62434a;background:#211318;color:#fff;border-radius:7px;
  padding:5px 9px;font-size:11px;font-weight:850;cursor:pointer;white-space:nowrap
}
.share-design-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.share-design-button:focus-visible{outline:2px solid #ff5364;outline-offset:2px}
.share-design-button:disabled{cursor:not-allowed;opacity:.42}
.install-app-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid #62434a;background:#211318;color:#fff;border-radius:7px;
  padding:5px 9px;font-size:11px;font-weight:850;cursor:pointer;white-space:nowrap
}
.install-app-button[hidden]{display:none!important}
.install-app-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.install-app-button:focus-visible{outline:2px solid #ff5364;outline-offset:2px}
@media(display-mode:standalone){.install-app-button{display:none!important}}
.version-update-notice{
  position:fixed;left:50%;right:auto;bottom:82px;z-index:1600;display:flex;align-items:center;gap:12px;
  width:max-content;max-width:calc(100vw - 36px);padding:12px 14px 12px 20px;border:2px solid #536071;border-radius:999px;
  background:rgba(16,21,27,.97);color:#e8edf5;box-shadow:0 18px 52px rgba(0,0,0,.52);
  font-size:20px;font-weight:750;line-height:1;white-space:nowrap;backdrop-filter:blur(8px);transform:translateX(-50%)
}
.version-update-notice[hidden]{display:none!important}
.version-update-notice button{min-height:48px;border:0;border-radius:999px;background:#ff3347;color:#fff;padding:12px 20px;font-size:18px;font-weight:900;line-height:1;cursor:pointer}
.version-update-notice button:hover{background:#ff5263}
.version-update-notice button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.share-design-dialog{width:min(620px,calc(100vw - 32px));max-width:none;padding:0;border:1px solid #465160;border-radius:16px;background:#10151b;color:#f7f8fa;box-shadow:0 28px 90px rgba(0,0,0,.7);overflow:hidden}
.share-design-dialog::backdrop{background:rgba(3,6,9,.78);backdrop-filter:blur(5px)}
.share-design-dialog-card{display:grid;background:#10151b}
.share-design-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px 18px;border-bottom:1px solid #2d3540}
.share-design-dialog-eyebrow{margin-bottom:7px;color:#ff4054;font-size:11px;font-weight:900;letter-spacing:.14em}
.share-design-dialog-header h2{margin:0;color:#fff;font-size:27px;line-height:1.08;letter-spacing:-.02em}
.share-design-dialog-header p{max-width:500px;margin:9px 0 0;color:#9ba7b8;font-size:12px;line-height:1.5}
.share-design-dialog-close{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #3b4553;border-radius:8px;background:#192028;color:#e9edf3;font-size:22px;line-height:1;cursor:pointer}
.share-design-dialog-close:hover{border-color:#ff5364;color:#fff}
.share-design-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:20px 24px 0}
.share-design-link-row input{min-width:0;height:44px;padding:0 12px;border:1px solid #3b4553;border-radius:9px;background:#0c1015;color:#edf2f8;font:700 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;outline:none}
.share-design-link-row input:focus{border-color:#ff5364;box-shadow:0 0 0 3px rgba(255,64,84,.1)}
.share-design-link-row button,.share-design-dialog-actions button{min-height:42px;padding:10px 16px;border-radius:9px;font-size:12px;font-weight:850;cursor:pointer}
.share-design-link-row button{border:1px solid #ff5364;background:#2b141a;color:#fff}
.share-design-status{min-height:19px;margin:10px 24px 0;color:#7ee2a5;font-size:11px;line-height:1.45}
.share-design-status.error{color:#ff8e9b}
.share-design-dialog-actions{display:flex;justify-content:flex-end;gap:9px;padding:17px 24px 22px}
.share-design-native{border:1px solid #465160;background:#192028;color:#eef3f8}
.share-design-done{border:0;background:#ff3347;color:#fff}
.help-dialog{
  width:min(760px,calc(100vw - 36px));max-width:none;padding:0;border:1px solid #465160;border-radius:16px;
  background:#10151b;color:#f7f8fa;box-shadow:0 28px 90px rgba(0,0,0,.7);overflow:hidden
}
.image-quality-dialog{width:min(460px,calc(100vw - 28px));max-width:none;padding:0;border:1px solid #414b58;border-radius:16px;background:#10151b;color:#eef3f8;box-shadow:0 28px 90px rgba(0,0,0,.62)}
.image-quality-dialog::backdrop{background:rgba(3,6,9,.76);backdrop-filter:blur(5px)}
.image-quality-dialog-card{display:grid;background:#10151b}
.image-quality-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:21px 22px 17px;border-bottom:1px solid #2d3540}
.image-quality-dialog-eyebrow{margin-bottom:6px;color:#ff4054;font-size:10px;font-weight:900;letter-spacing:.14em}
.image-quality-dialog-header h2{margin:0;color:#fff;font-size:25px;line-height:1.08}
.image-quality-dialog-close{display:grid;place-items:center;width:33px;height:33px;padding:0;border:1px solid #3b4553;border-radius:8px;background:#192028;color:#e9edf3;font-size:21px;cursor:pointer}
.image-quality-details{display:grid;margin:0;padding:10px 22px}
.image-quality-details div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:12px 0;border-bottom:1px solid #28313c}
.image-quality-details div:last-child{border-bottom:0}
.image-quality-details dt{color:#9eabba;font-size:12px;font-weight:700}
.image-quality-details dd{margin:0;color:#fff;font-size:12px;font-weight:850;text-align:right}
.image-quality-warning{margin:5px 22px 0;padding:15px;border:1px solid #9a4852;border-radius:11px;background:#2d1218}
.image-quality-warning h3{margin:0 0 7px;color:#ff9daa;font-size:16px}
.image-quality-warning p,.image-quality-vector-note,.low-resolution-checkout-card>p{margin:0;color:#c8d0dc;font-size:12px;line-height:1.55}
.image-quality-vector-note{margin:8px 22px 0;padding:14px;border:1px solid #38795a;border-radius:11px;background:#10271d;color:#baffd2}
.image-quality-dialog-actions{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 21px}
.image-quality-dialog-actions button{min-height:40px;padding:10px 16px;border-radius:9px;font:inherit;font-size:12px;font-weight:850;cursor:pointer}
.image-quality-replace{border:1px solid #475363;background:#151b22;color:#eef3f8}
.image-quality-accept{border:0;background:#ff3347;color:#fff}
.image-quality-continue{border:0;background:#ff3347;color:#fff}
.low-resolution-checkout-card>p{padding:17px 22px 0}
.low-resolution-checkout-list{display:grid;gap:7px;margin:14px 22px 0;padding:0;list-style:none}
.low-resolution-checkout-list li{padding:10px 12px;border:1px solid #743842;border-radius:9px;background:#261117;color:#ffd1d6;font-size:12px;font-weight:800}
.low-resolution-checkout-note{color:#9faaba!important}
.help-dialog::backdrop{background:rgba(3,6,9,.78);backdrop-filter:blur(4px)}
/* The dialog never runs past the window (David, 2026-10-09: the last row's
   text was cut off): the header and footer stay, the guide scrolls between
   them, and a short window gets tighter tiles first. */
.help-dialog{max-height:calc(100dvh - 24px)}
.help-dialog-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:calc(100dvh - 26px);background:#10151b}
.help-dialog-card>.help-guide-grid{overflow-y:auto;overscroll-behavior:contain}
@media(min-width:721px) and (max-height:860px){
  .help-dialog-header{padding:16px 24px 14px}
  .help-dialog-header h2{font-size:26px}
  .help-guide-item{min-height:0;padding:14px 14px 13px}
  .help-dialog-footer{padding:12px 24px}
}
.help-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px 18px;border-bottom:1px solid #2d3540}
.help-dialog-eyebrow{margin-bottom:7px;color:#ff4054;font-size:11px;font-weight:900;letter-spacing:.14em}
.help-dialog-header h2{margin:0;color:#fff;font-size:30px;line-height:1.05;letter-spacing:-.025em}
.help-dialog-header p{margin:8px 0 0;color:#9ba7b8;font-size:13px;line-height:1.45}
.help-dialog-close{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #3b4553;border-radius:8px;background:#192028;color:#e9edf3;font-size:22px;line-height:1;cursor:pointer}
.help-dialog-close:hover{border-color:#ff5364;color:#fff}
.help-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#2d3540}
.help-guide-item{display:flex;min-height:178px;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 15px 17px;background:#141a21;text-align:center}
.help-guide-item h3{margin:13px 0 0;color:#fff;font-size:15px;line-height:1.2}
.help-guide-item p{margin:6px 0 0;color:#9aa6b7;font-size:12px;line-height:1.4}
.help-keyboard-icon{display:flex;align-items:center;justify-content:center;gap:7px;height:68px;color:#dbe1e9}
.help-keyboard-icon kbd{display:grid;place-items:center;height:28px;border:1px solid #aab4c3;border-bottom-width:3px;border-radius:5px;background:#192028;font-family:inherit;font-size:17px;font-weight:700;line-height:1}
.help-arrow-keys{display:grid;grid-template-columns:repeat(3,28px);gap:4px}
.help-arrow-keys kbd:first-child{grid-column:2}
.help-arrow-keys kbd:nth-child(2){grid-column:1}
.help-keyboard-icon .help-shift-key{padding:0 7px;color:#ff4054;border-color:#ff4054;font-size:11px}
.help-mouse{position:relative;width:44px;height:62px;border:2px solid #e9edf3;border-radius:22px;color:#ff4054;background:transparent}
.help-mouse::before{content:"";position:absolute;left:50%;top:0;width:1px;height:19px;background:#e9edf3;transform:translateX(-50%)}
.help-mouse span{position:absolute;left:50%;top:8px;width:5px;height:13px;border:2px solid currentColor;border-radius:5px;transform:translateX(-50%)}
.help-mouse-left{background:linear-gradient(90deg,rgba(255,64,84,.28) 0 50%,transparent 50%)}
.help-mouse-right{background:linear-gradient(90deg,transparent 0 50%,rgba(255,64,84,.28) 50%)}
.help-control-icon{position:relative;display:flex;align-items:center;justify-content:center;width:104px;height:62px;color:#dbe1e9}
.help-control-icon>.help-mouse{position:absolute;left:11px;top:0}
.help-control-icon>svg{position:absolute;right:5px;width:42px;height:52px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.help-select-icon>svg{right:5px;bottom:-2px;width:34px;height:40px;fill:#b8c1ce;stroke:#0d1116;stroke-width:1.4}
.help-move-icon>svg{right:0;width:48px;height:48px}
.help-resize-icon{position:relative;width:68px;height:68px;border:1px dashed #aab4c3;color:#dbe1e9}
.help-resize-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.help-resize-handle{position:absolute;width:8px;height:8px;background:#e8ecf2}
.help-resize-handle.handle-one{left:-4px;top:-4px}.help-resize-handle.handle-two{right:-4px;top:-4px}.help-resize-handle.handle-three{left:-4px;bottom:-4px}.help-resize-handle.handle-four{right:-4px;bottom:-4px;background:#ff4054}
.help-graphic-rotate-icon{position:relative;width:68px;height:68px;border:1px dashed #aab4c3;color:#55ff3b}
.help-graphic-rotate-icon>span{position:absolute;left:50%;top:-26px;width:1px;height:26px;background:#55ff3b;transform:translateX(-50%)}
.help-graphic-rotate-icon>svg{position:absolute;left:50%;top:-44px;width:42px;height:48px;overflow:visible;fill:#141a21;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transform:translateX(-50%)}
.help-dialog-footer{display:flex;justify-content:center;padding:18px 24px;background:#0f141a}
.help-dialog-footer button{min-width:250px;border:0;border-radius:9px;background:#ff3347;color:#fff;padding:12px 24px;font-size:13px;font-weight:900;cursor:pointer}
.help-dialog-footer button:hover{background:#ff4b5e}
.draft-save-status{
  display:inline-flex;align-items:center;gap:6px;color:#8f9bad;
  font-size:10px;font-weight:750;white-space:nowrap
}
.draft-save-status::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#e2b34d;
  box-shadow:0 0 8px rgba(226,179,77,.35)
}
.draft-save-status[data-state="saved"]{color:#a9c8b5}
.draft-save-status[data-state="saved"]::before{background:#39d47a;box-shadow:0 0 8px rgba(57,212,122,.45)}
.draft-save-status[data-state="restored"]{color:#c2d3ff}
.draft-save-status[data-state="restored"]::before{background:#6e9dff;box-shadow:0 0 8px rgba(110,157,255,.45)}
.draft-save-status[data-state="error"]{color:#ff9aa5}
.draft-save-status[data-state="error"]::before{background:#ff5364;box-shadow:0 0 8px rgba(255,83,100,.45)}
.start-over-button{
  border:1px solid #343b47;background:#15191f;color:#aeb8c9;border-radius:7px;
  padding:5px 8px;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap
}
.start-over-button:hover{border-color:#ff5364;color:#fff}
.header-right .build-version{
  position:static!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:4px 7px;
  border-radius:6px;
  background:#171b21;
  border:1px solid #323844;
  color:#9ca7b9;
  font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.04em;
  pointer-events:none;
}

/* V16 bottom workflow navigation */
body{padding-bottom:var(--workflow-nav-height)!important}
.workspace{height:calc(100vh - var(--topbar-height) - var(--workflow-nav-height))!important;height:calc(100dvh - var(--topbar-height) - var(--workflow-nav-height))!important}
.tabbed-controls{position:relative;overflow-y:auto!important}
.tabbed-controls.products-scroll-isolated{overflow:hidden!important}
.control-view{display:none;min-height:100%;padding-bottom:24px}
.control-view.active{display:block}
.control-view.active.products-view{display:flex;flex-direction:column;height:100%;min-height:0;padding-bottom:0;overflow:hidden}
.control-view.active.products-view>*{flex:0 0 auto}.control-view.active.products-view>.product-browser-scroll{flex:1 1 auto}
.product-browser-heading{min-width:0}
/* The scrollbar is drawn with ::-webkit-scrollbar so Chrome and Safari keep it
   showing: a scrollbar-width or scrollbar-color on the element, its own or the
   one it inherits from .controls-panel, turns those rules off (Chrome 121+) and
   macOS then hides an overlay scrollbar until the list is scrolled. Only a
   browser without them (Firefox) gets the standard ones. */
.product-browser-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 18px 0;scrollbar-color:auto}
@supports not selector(::-webkit-scrollbar){.product-browser-scroll{scrollbar-width:thin;scrollbar-color:#596372 #171c22}}
.product-browser-scroll::-webkit-scrollbar{width:9px}
.product-browser-scroll::-webkit-scrollbar-track{background:#171c22;border-radius:999px}
.product-browser-scroll::-webkit-scrollbar-thumb{background:#596372;border:2px solid #171c22;border-radius:999px}
.product-browser-scroll::-webkit-scrollbar-thumb:hover{background:#778292}
/* More products below the fold (app.js updateProductMoreCue; David, 2026-10-06:
   option A): a strip of no height after the list that fades the list's bottom
   edge under a button naming what is below. Clear of the 9px scrollbar. */
.product-more-cue{position:relative;z-index:2;height:0;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s}
.product-more-cue.visible{opacity:1;visibility:visible}
.product-more-fade{position:absolute;left:0;right:12px;bottom:0;height:88px;background:linear-gradient(rgba(12,14,17,0),#0c0e11 78%);pointer-events:none}
.product-more-button{position:absolute;left:calc(50% - 6px);bottom:14px;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:8px 16px;border:0;border-radius:999px;background:#f5f7fa;color:#08090b;font:inherit;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;transform:translateX(-50%);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.product-more-button:hover{background:#fff}
.product-more-button:focus-visible{outline:2px solid #ff3347;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.product-more-cue{transition:none}}
.view-title{font-size:31px;font-weight:800;line-height:1.05;margin:8px 0 10px;color:#fff;letter-spacing:-.03em}
.view-intro{color:#b2bdcf;font-size:13px;line-height:1.55;margin:0 0 18px;max-width:370px}
/* Every step's header (David, 2026-10-09): label, title, then this line, the
   Text step's card line (1px, 22px below). The step's own first line goes. */
.view-divider{display:block;height:0;margin:14px 0 22px;border:0;border-top:1px solid #252931}
.premade-library-header .view-divider{margin-bottom:18px}
.control-view[data-control-view="text"] .step-card.graphics-text-card{border-top:0;padding-top:0}
.control-view[data-control-view="colors"] .colors-toolbar{border-top:0;padding-top:0}
.design-filter-row{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.filter-chip{border:1px solid #343b47;background:#15191f;color:#aeb9ca;border-radius:999px;padding:6px 10px;font-size:11px;cursor:pointer}
.filter-chip.active,.filter-chip:hover{border-color:#ff3347;color:#fff}
.design-tab-grid{padding-bottom:20px}
.start-path-panel{margin-top:20px;padding-top:20px;border-top:1px solid #292f38}
.colors-toolbar{display:flex;justify-content:flex-end;margin:0 0 10px;padding-top:22px;border-top:1px solid #252931}
.colors-panel{display:grid!important;margin-top:0!important}
.tolerance-scale{display:flex;justify-content:space-between;color:#6f7c91;font-size:9px;margin-top:2px}
.color-empty-state{
  display:grid;gap:11px
}
.color-empty-copy h3{margin:0}
.color-empty-copy p,.color-empty-note{color:#8e9ab0;line-height:1.4}
.color-empty-copy p{margin-bottom:0}
.color-empty-note{margin:0;font-size:11px}
.color-empty-note{text-align:center}
.pick-color-button{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 14px;
  border:1px dashed #39414f;border-radius:10px;background:#151a21;color:#fff;
  font-size:14px;font-weight:850;line-height:20px;text-align:center;cursor:pointer
}
.pick-color-button:hover{background:#192029;border-color:#68758b}
.pick-color-button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pick-color-icon{
  flex:0 0 auto;display:grid;place-items:center;width:18px;height:18px
}
.pick-color-icon svg{width:16px;height:16px;fill:currentColor}
/* Armed: the button steps back so the garment is the thing to look at. */
.pick-color-button[aria-pressed="true"]{
  background:#211318;border-color:#ff5365;color:#fff
}
.order-card{border:1px solid #2b323d;border-radius:14px;background:#11151a;padding:16px}
.order-card-title{font-size:13px;font-weight:900;color:#fff;margin-bottom:10px}
.order-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px;color:#8692a7}
.order-line strong{color:#e7ebf2;text-align:right;font-weight:700}
.editable-order input{width:60px;background:#0b0e12;border:1px solid #343b47;border-radius:7px;color:#fff;padding:5px;text-align:right}
.order-divider{height:1px;background:#353c47;margin:14px 0}
.order-total{display:flex;justify-content:space-between;align-items:center;color:#d9dfeb;font-size:12px;margin:0 0 13px}
.order-total strong{font-size:19px;color:#fff}
.order-now-button{width:100%;border:0;border-radius:10px;padding:13px;background:#ff3347;color:#fff;font-size:13px;font-weight:900;cursor:pointer}
.secure-note{text-align:center;color:#657186;font-size:9px;margin-top:9px}
.bottom-workflow-nav{
  position:fixed;left:0;right:0;bottom:0;height:var(--workflow-nav-height);z-index:900;
  display:grid;grid-template-columns:repeat(6,1fr);
  background:#11151a;border-top:1px solid #303742;box-shadow:0 -8px 24px rgba(0,0,0,.28)
}
.workflow-nav-item{
  appearance:none;border:0;border-right:1px solid rgba(255,255,255,.055);
  background:transparent;color:#aab4c5;display:flex;align-items:center;justify-content:center;
  gap:9px;font-size:12px;font-weight:750;cursor:pointer;position:relative
}
.workflow-nav-item:hover{background:#161b21;color:#fff}
.workflow-nav-item.active{color:#fff;background:#151a20}
.workflow-nav-item.active::after{content:"";position:absolute;left:18px;right:18px;bottom:5px;height:2px;border-radius:3px;background:#ff3347}
.workflow-nav-item.order-nav{color:#d8dee9}
.workflow-nav-item.order-nav.active{color:#ff5365}
.nav-icon{font-size:16px}

/* Product collection */
/* The product list (David, 2026-10-06: option C): search and a category menu
   above one slim list of every category, then one bar with the chosen product
   and Next. About seven products show at once on a laptop. */
.product-category-tabs{display:flex;gap:8px;margin:0 0 4px;padding:2px 8px 10px 0;border-bottom:1px solid #2a3038}
.product-search{display:flex;flex:1 1 auto;align-items:center;gap:8px;min-width:0;height:38px;padding:0 10px;border:1px solid #303743;border-radius:9px;background:#12171d;color:#8895a8}
.product-search:focus-within{border-color:#586372}
.product-search svg{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.product-search input{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:13px}
.product-search input::placeholder{color:#8895a8;opacity:1}
.product-category-picker{flex:0 0 auto;display:flex}
.product-category-picker select{height:38px;max-width:190px;padding:0 44px 0 12px;border:1px solid #303743;border-radius:9px;background-color:#12171d;color:#fff;font:inherit;font-size:13px;font-weight:750;cursor:pointer}
.product-category-picker select:focus-visible,.product-search:has(input:focus-visible){outline:2px solid #ff3347;outline-offset:1px}
.product-coming-soon-badge{display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:3px 7px;border:1px solid #3d4652;border-radius:999px;background:#1a2027;color:#abb6c6;font-size:9px;font-weight:800;white-space:nowrap}
.shorts-product-list{display:grid;gap:2px}
.shorts-product-list>[role="listitem"]{min-width:0}
.product-group-no-match{display:none}
.product-group-label{display:flex;justify-content:space-between;gap:8px;margin:14px 8px 4px;color:#8895a8;font-size:10px;font-weight:900;letter-spacing:.12em;line-height:1.2;text-transform:uppercase}
.product-group:first-child .product-group-label,.product-group.hidden+.product-group .product-group-label{margin-top:6px}
.shorts-product-row{display:grid;width:100%;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:40px;padding:4px 8px;border:1px solid transparent;border-radius:9px;background:transparent;color:#fff;text-align:left;cursor:pointer}
.shorts-product-row:hover{background:#151b22}
.shorts-product-row.selected{border-color:#ff3347;background:#12171d;box-shadow:0 0 0 1px rgba(255,51,71,.18)}
/* The product thumbnails are black garments on a clear background, so on a
   dark page they sit on a soft light-grey tile (David, 2026-10-10, option B);
   a light store look keeps its own tile (build-customizer-look.mjs leaves
   these rules as they are). */
.shorts-row-thumbnail{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#e4e7eb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.shorts-row-thumbnail img{display:block;width:26px;height:26px;object-fit:contain}
html.cz-store.cz-scheme-light .shorts-row-thumbnail{background:radial-gradient(circle at 50% 35%,color-mix(in srgb, var(--sf-text) 19%, var(--sf-background)) 0,color-mix(in srgb, var(--sf-text) 8%, var(--sf-background)) 70%);box-shadow:none}
html.cz-store.cz-scheme-light .shorts-row-thumbnail img{width:28px;height:28px}
.shorts-row-name{min-width:0;overflow:hidden;font-size:13px;font-weight:650;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.product-row-tag{color:#8895a8;font-size:11px;font-weight:650;white-space:nowrap}
.product-search-empty{margin:18px 8px;color:#98a4b5;font-size:13px;line-height:1.4}
.viewer-product-heading{display:flex;align-items:center;gap:16px;min-width:0}
/* "Loading design…": a small pill on the stage while a design's artwork
   loads (David, 2026-10-10). On the stage, so it keeps its own colours in
   every look (build-customizer-look.mjs SKIP_SELECTOR). */
.design-loading-pill{position:absolute;top:16px;left:50%;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(17,20,25,.84);color:#fff;font:600 13px/1.2 var(--font-sans,Inter,system-ui,sans-serif);transform:translateX(-50%);box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}
.design-loading-pill[hidden],body.design-not-chosen .design-loading-pill{display:none}
.design-loading-pill-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:design-loading-pill-spin .8s linear infinite}
@keyframes design-loading-pill-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.design-loading-pill-spinner{animation:none}}
.product-empty-state,.product-coming-soon-state{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;flex-direction:column}
.product-coming-soon-state{background:radial-gradient(circle at 50% 48%,#262b31 0,#171b20 52%,#111419 100%);color:#fff}
.product-coming-soon-state img{display:block;width:240px;max-width:44%;height:220px;object-fit:contain;margin-bottom:18px;filter:drop-shadow(0 16px 15px rgba(0,0,0,.5))}
.product-coming-soon-state strong{font-size:22px;letter-spacing:.035em}
.product-coming-soon-state span{margin-top:9px;color:#9aa6b7;font-size:13px}
/* Choose a product first: on the stage itself (its Studio, Black or Showcase
   background shows through), a faint garment behind a card pointing at the
   products on the left. The card keeps the stage's own colours in every look;
   the arrow wears the store's accent. */
/* The point-cloud garment behind the card: dots and a scan line in the
   accent (David, 2026-10-09, option C). No corner frame, and it never grows
   taller than the stage, so nothing is cut off and the card stays centred. */
.product-empty-ghost{position:absolute;top:50%;left:50%;width:min(64%,480px);height:auto;max-height:calc(100% - 48px);transform:translate(-50%,-50%);color:rgba(17,20,25,.34);overflow:visible}
.viewer[data-viewer-background="black"] .product-empty-ghost,.viewer[data-viewer-background="showcase"] .product-empty-ghost{color:rgba(255,255,255,.3)}
.product-empty-ghost circle{fill:currentColor}
.product-empty-ghost-label{fill:currentColor;font:600 6px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em}
.product-empty-ghost-scan{animation:product-empty-scan 3.2s ease-in-out infinite alternate}
.product-empty-ghost-scan rect{fill:var(--sf-accent-line,#ee2034);opacity:.12}
.product-empty-ghost-scan line{stroke:var(--sf-accent-line,#ee2034);stroke-width:.8}
@keyframes product-empty-scan{from{transform:translateY(-66px)}to{transform:translateY(66px)}}
@media (prefers-reduced-motion:reduce){.product-empty-ghost-scan{animation:none}}
/* A product is chosen but no design yet: the scan stays, the garment and the
   stage's tools wait (David, 2026-10-09). */
body.design-not-chosen #viewer canvas{visibility:hidden}
body.design-not-chosen .toolbar-actions,body.design-not-chosen .viewer-pick-color,body.design-not-chosen .viewer-left-tools,body.design-not-chosen .orbit-control,body.design-not-chosen .graphic-history-controls,body.design-not-chosen .image-quality-badge,body.design-not-chosen .graphic-nudge-tip,body.design-not-chosen #viewer .loading-state,body.design-not-chosen #conceptLabel{display:none!important}
.product-empty-card{position:relative;display:flex;align-items:center;gap:14px;padding:16px 22px;border:1px solid #d6d9de;border-radius:14px;background:#fff;color:#111419;text-align:left;box-shadow:0 10px 30px rgba(17,20,25,.12)}
.product-empty-card strong{display:block;font-size:20px;letter-spacing:0;color:#111419}
.product-empty-card span{display:block;margin-top:3px;color:#5a5f68;font-size:13px}
.product-empty-arrow{flex:none;width:30px;height:30px;fill:none;stroke:#ee2034;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.viewer.product-preview-empty .loading-state,.viewer.product-preview-empty .graphic-history-controls,.viewer.product-preview-unavailable .viewer-pick-color,.viewer.product-preview-unavailable .graphic-history-controls,.viewer.product-preview-unavailable .image-quality-badge,.viewer.product-preview-unavailable .graphic-nudge-tip,.viewer.product-preview-unavailable .loading-state{display:none!important}
body.product-not-selected .toolbar-actions,body.product-not-selected .viewer-pick-color,body.product-not-selected .viewer-left-tools,body.product-not-selected .orbit-control,body.product-not-selected .graphic-history-controls,body.product-not-selected .image-quality-badge,body.product-not-selected .graphic-nudge-tip{display:none!important}
body.product-not-selected #conceptLabel{display:none!important}
.workflow-nav-item:disabled{cursor:not-allowed!important;color:#5e6876!important;background:#0e1216!important;opacity:.55}
.workflow-nav-item:disabled:hover{color:#5e6876!important;background:#0e1216!important}
.workflow-intro{
  --workflow-arrow-left:42px;
  position:fixed;left:16px;bottom:92px;z-index:980;width:min(350px,calc(100vw - 24px));
  padding:18px 18px 15px;border:1px solid rgba(255,74,91,.62);border-radius:15px;
  background:linear-gradient(145deg,rgba(31,20,24,.98),rgba(14,17,22,.98));
  box-shadow:0 22px 65px rgba(0,0,0,.55),0 0 0 1px rgba(255,64,83,.08),0 0 30px rgba(255,51,71,.12);
  animation:workflowIntroReveal .36s cubic-bezier(.2,.85,.35,1) both
}
.workflow-intro-kicker{display:block;margin:0 32px 7px 0;color:#ff4a5b;font-size:11px;font-weight:950;letter-spacing:.18em}
.workflow-intro>strong{display:block;margin-right:28px;color:#fff;font-size:17px;line-height:1.2}
.workflow-intro>p{margin:8px 0 14px;color:#aeb7c6;font-size:12px;line-height:1.5}
.workflow-intro-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border:1px solid #404854;border-radius:8px;background:#1b2027;color:#cbd3df;font-size:19px;line-height:1;cursor:pointer}
.workflow-intro-close:hover{border-color:#ff5365;color:#fff}
.workflow-intro-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}
.workflow-intro-actions label{display:flex;align-items:center;gap:7px;color:#c3cbd7;font-size:11px;font-weight:700;cursor:pointer}
.workflow-intro-actions input{width:16px;height:16px;margin:0;accent-color:#ff3347}
.workflow-intro-actions>button{border:0;border-radius:8px;background:#ff3347;color:#fff;padding:9px 16px;font-size:11px;font-weight:900;cursor:pointer}
.workflow-intro-actions>button:hover{background:#ff4b5e}
.workflow-intro-arrow{position:absolute;left:var(--workflow-arrow-left);bottom:-48px;width:28px;height:48px;pointer-events:none;animation:workflowArrowBounce 1.05s ease-in-out infinite}
.workflow-intro-arrow::before{content:"";position:absolute;left:12px;top:2px;width:4px;height:31px;border-radius:4px;background:#ff3347;box-shadow:0 0 14px rgba(255,51,71,.72)}
.workflow-intro-arrow::after{content:"";position:absolute;left:4px;bottom:2px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:13px solid #ff3347;filter:drop-shadow(0 4px 6px rgba(255,51,71,.35))}
.workflow-nav-item.workflow-intro-target{z-index:902!important;color:#fff!important;animation:workflowTargetPulse 1.45s ease-in-out infinite}
@keyframes workflowArrowBounce{0%,100%{transform:translateY(-3px)}50%{transform:translateY(7px)}}
@keyframes workflowTargetPulse{0%,100%{background:#151a20;box-shadow:inset 0 0 0 1px rgba(255,70,88,.25)}50%{background:#25171c;box-shadow:inset 0 0 0 2px #ff3347,0 0 22px rgba(255,51,71,.35)}}
@keyframes workflowIntroReveal{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.viewer-panel{height:100%!important}
.viewer-footer{bottom:0}
@media(max-width:800px){
  :root{--workflow-nav-height:58px}
  body{padding-bottom:var(--workflow-nav-height)!important}
  .bottom-workflow-nav{height:var(--workflow-nav-height)}
  .workflow-nav-item{font-size:10px;gap:5px}
  .workflow-nav-item span:last-child{display:none}
  .nav-icon{font-size:18px}
  .draft-save-status{font-size:0}
  .draft-save-status::before{width:7px;height:7px}
  .start-over-button{padding:5px 7px}
  .workflow-intro{width:min(300px,calc(100vw - 16px));padding:15px;bottom:82px}
  .workflow-intro>strong{font-size:15px}
  .workflow-intro>p{font-size:11px}
  .workflow-intro-actions{align-items:flex-end;flex-direction:column}
  .workflow-intro-actions>button{width:100%}
}
@media(prefers-reduced-motion:reduce){.workflow-intro,.workflow-intro-arrow,.workflow-nav-item.workflow-intro-target{animation:none}}

/* Version 1.03 release badge */
.header-right .build-version{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:5px 8px!important;
  border-radius:7px!important;
  background:#171b21!important;
  border:1px solid #343b47!important;
  color:#aeb8c9!important;
  font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  letter-spacing:.035em!important;
  white-space:nowrap!important;
}

/* Version 1.04 bottom nav reliability */
.bottom-workflow-nav{
  pointer-events:auto!important;
}
.workflow-nav-item{
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:2!important;
  position:relative!important;
}
.workflow-nav-item *{
  pointer-events:none!important;
}
.control-view{
  width:100%;
}

/* Version 1.06 interaction fixes */
.error-panel{position:relative!important;padding-right:46px!important}
.error-close{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:20px;
  line-height:24px;
  font-weight:500;
  cursor:pointer;
}
.error-close:hover{background:rgba(255,255,255,.14)}
/* Version 1.07 color-processing feedback */
.apply-color-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:40px!important;
}
.apply-color-button:disabled{
  opacity:.72!important;
  cursor:wait!important;
}
.apply-color-spinner{
  display:none;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:pace-spin .7s linear infinite;
}
.apply-color-button.processing .apply-color-spinner{display:inline-block}
@keyframes pace-spin{to{transform:rotate(360deg)}}

.error-panel{
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(520px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  min-width:0!important;
  box-sizing:border-box!important;
  z-index:1200!important;
  transform:translate(-50%,-50%)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.52)!important;
}
.error-panel code{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.error-close{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:3!important;
}
@media(max-width:700px){
  .error-panel{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important}
}

/* Version 1.11 order summary */
.control-view[data-control-view="order"]{
  padding:14px 14px 26px!important;
}
.order-summary-card{
  border:1px solid #2a313c;
  border-radius:14px;
  background:#14181e;
  /* clip, not hidden: hidden would stop the Add to cart bar from sticking. */
  overflow:clip;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.order-summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 12px;
}
.order-summary-head h2{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1;
  letter-spacing:-.02em;
}
.order-draft-badge{
  padding:6px 10px;
  border-radius:6px;
  background:#38131c;
  color:#ff3850;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.order-meta{
  padding:6px 20px 18px;
}
.order-meta>div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:5px 0;
  font-size:12px;
}
.order-meta span{
  color:#86a7dc;
}
.order-meta strong{
  color:#fff;
  text-align:right;
  font-weight:800;
}
.order-contact-field{
  display:grid;
  gap:7px;
  padding:0 20px 18px;
  color:#86a7dc;
  font-size:11px;
  font-weight:800;
}
.order-contact-field input{
  box-sizing:border-box;
  width:100%;
  border:1px solid #303742;
  border-radius:8px;
  background:#10141a;
  color:#fff;
  padding:10px 11px;
  font:500 13px/1.2 var(--font-sans);
  outline:none;
}
.order-contact-field input:focus{border-color:#ff3347;box-shadow:0 0 0 1px #ff3347}
.order-contact-field input:user-invalid{border-color:#ff5365}
.order-contact-field small{color:#76849a;font-size:10px;font-weight:500;line-height:1.35}
.order-contact-field .order-contact-requirement{color:#ff8b98}
.order-contact-field .order-contact-requirement.satisfied{display:none}
.size-order-table{
  border-top:1px solid #303640;
}
.size-order-header,
.size-order-row,
.size-order-total-row{
  display:grid;
  grid-template-columns:1.55fr .72fr .7fr .72fr;
  align-items:center;
  column-gap:10px;
}
.size-order-header{
  padding:10px 20px;
  background:#1b2027;
  border-bottom:1px solid #303640;
  color:#7f9ccc;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
}
.size-order-header span:nth-child(2),
.size-order-header span:nth-child(3),
.size-order-header span:nth-child(4){text-align:right}
.size-order-row{
  min-height:52px;
  padding:0 20px;
  border-bottom:1px solid #272d36;
}
.size-order-row>strong:first-child{
  color:#fff;
  font-size:13px;
}
.size-qty-input{
  width:58px;
  justify-self:end;
  box-sizing:border-box;
  background:#10141a;
  border:1px solid #303742;
  border-radius:8px;
  color:#fff;
  padding:8px 7px;
  text-align:center;
  font-size:12px;
  font-weight:850;
  outline:none;
}
.size-qty-input:focus{
  border-color:#ff3347;
  box-shadow:0 0 0 1px #ff3347;
}
.unit-price{
  color:#7d9ed1;
  text-align:right;
  font-size:12px;
}
.line-total{
  color:#fff;
  text-align:right;
  font-size:12px;
}
.size-order-total-row{
  min-height:52px;
  padding:0 20px;
  background:#1b2027;
  color:#fff;
}
.size-order-total-row strong:nth-child(2),
.size-order-total-row strong:nth-child(4){
  text-align:right;
}
/* A Design submissions store (html.quote-store, app.js) shows no prices: the
   size table keeps its size and quantity columns, and the totals keep the
   piece count only. */
html.quote-store .size-order-header,html.quote-store .size-order-row,html.quote-store .size-order-total-row{grid-template-columns:1.55fr .72fr}
html.quote-store .size-order-header span:nth-child(n+3),html.quote-store .unit-price,html.quote-store .line-total,
html.quote-store .size-order-total-row>:nth-child(n+3),html.quote-store #orderButtonTotal{display:none}
.order-checkout-area{
  padding:18px 20px 20px;
}
.order-now-button{
  width:100%;
  border:0;
  border-radius:10px;
  background:#ff2e43;
  color:#fff;
  padding:15px 14px;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}
.order-now-button:hover{filter:brightness(1.06)}
.order-now-button:disabled{cursor:not-allowed;filter:none;opacity:.42}
.secure-note.checkout-error{color:#ff8b98}
.order-quantity-requirement{margin-top:10px;text-align:center;color:#ff8b98;font-size:11px;line-height:1.35}
.order-quantity-requirement.satisfied{display:none}
.secure-note{
  margin-top:13px;
  text-align:center;
  color:#657995;
  font-size:10px;
}

/* Add to cart stays pinned to the bottom of the order panel while sizes scroll. */
.order-checkout-area{position:sticky;bottom:0;z-index:5;background:#151820;border-top:1px solid #2b303a;padding:12px 16px 14px}
.order-sticky-row{display:flex;align-items:center;gap:12px}
.order-sticky-summary{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#orderStickyPieces{color:#8b93a1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#orderButtonTotal{color:#fff;font-size:18px;font-weight:800}
.order-sticky-row .order-now-button{width:auto;flex:0 0 auto;padding:13px 22px}
.order-checkout-area .order-quantity-requirement{margin-top:8px}
.order-checkout-area .secure-note:empty{display:none}
/* Sticky elements stop at the scroller's padding, so drop it to pin the bar
 * flush. On phones the panel runs slightly under the fixed bottom navigation,
 * so the bar gets extra bottom padding to keep the button clear of it. */
.controls-panel:has(.control-view.active[data-control-view="order"]){padding-bottom:0}
/* The product list's Selected bar ends the panel on a laptop: 12px above and
   below Next, not the panel's 50px below (David, 2026-10-06 mockup). Phones
   keep the padding that clears the bottom menu. */
@media(min-width:901px){.controls-panel:has(.products-view.active){padding-bottom:0}}
/* Its sides on a laptop (David, 2026-10-06 mockup): 12px left and right of the
   search, the rows and Next. The list's 9px scrollbar sits in the right-hand
   12px (always reserved, so the rows never shift), no longer pushing the rows
   in; they ended 46px from the edge with 28px on the left. Its top lines up
   with the 3D view's header (David, 2026-10-06): the search box's top with the
   top of a two-line garment title's letters (11px down), and the line above
   the list with the top of the 3D view (70px down, the header's height). */
@media(min-width:901px){
  .controls-panel:has(.products-view.active){padding-top:11px;padding-left:12px;padding-right:0}
  .products-view.active .product-category-tabs{margin-right:12px;padding-right:0;padding-bottom:18px}
  .products-view.active .product-browser-scroll{padding-right:3px;scrollbar-gutter:stable}
}
@media (max-width:900px){.order-checkout-area{padding-bottom:24px}}

/* Version 1.43 selectable mockup environments */
.viewer[data-viewer-background="studio"]{
  background:
    radial-gradient(ellipse at 50% 44%,rgba(255,255,255,1) 0%,rgba(247,250,252,.98) 29%,rgba(222,228,234,.98) 60%,rgba(169,178,188,1) 100%);
}
.viewer[data-viewer-background="black"]{
  background:radial-gradient(ellipse at 50% 48%,#3b3d3f 0%,#292b2d 36%,#191a1c 68%,#0e0f11 100%);
}
.viewer[data-viewer-background="showcase"]{
  background:#0b0d10 url("./assets/backgrounds/showcase.webp?v=2") no-repeat;
  background-size:var(--showcase-size,cover);
  background-position:var(--showcase-position,center bottom);
}
.viewer>canvas{background:transparent!important;opacity:1;transition:opacity .14s ease-out}
.viewer.product-switching>canvas{opacity:0;transition:none}
.viewer>canvas.viewer-capture-freeze{position:absolute;inset:0;z-index:2;pointer-events:none}
.viewer[data-viewer-background="studio"] .loading-state strong{color:#171b20}
.viewer[data-viewer-background="studio"] .loading-state span,
.viewer[data-viewer-background="studio"] .loading-progress-text{color:#4e5967}
.viewer-left-tools{
  position:absolute;
  top:15px;
  right:16px;
  z-index:210;
  display:flex;
  align-items:center;
  gap:2px;
  padding:4px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(11,14,18,.94);
  box-shadow:0 8px 26px rgba(0,0,0,.28);
}
@media(min-width:901px){
  .viewer-panel>.viewer-toolbar>.toolbar-actions{
    position:static;
    align-self:flex-end;
    margin-left:auto;
    margin-bottom:-1px;
    gap:0;
    overflow:hidden;
    padding:0;
    border:1px solid #3a4653;
    border-bottom:0;
    border-radius:10px 10px 0 0;
    background:#242c35;
    box-shadow:0 5px 16px rgba(0,0,0,.22);
  }
  .viewer-panel>.viewer-toolbar>.toolbar-actions button{
    position:relative;
    min-height:46px;
    padding:9px 20px;
    border:0;
    border-left:1px solid transparent;
    border-radius:0;
    background:transparent;
    color:#b9c3cf;
    font-weight:800;
  }
  .viewer-panel>.viewer-toolbar>.toolbar-actions button+button{
    border-left-color:#3a4653;
  }
  .viewer-panel>.viewer-toolbar>.toolbar-actions button:hover,
  .viewer-panel>.viewer-toolbar>.toolbar-actions button:focus-visible{
    background:#34404c;
    color:#fff;
    outline:none;
  }
  .viewer-panel>.viewer-toolbar>.toolbar-actions [data-view][aria-pressed="true"]{
    background:#1d252e;
    color:#fff;
    box-shadow:inset 0 -3px #ff3347;
  }
  .viewer-panel>.viewer-toolbar>.toolbar-actions .reset-view-button{min-width:132px}
  .viewer-left-tools{
    top:16px;
    right:auto;
    left:16px;
    flex-direction:column;
  }
  .viewer-lighting-panel{
    left:var(--viewer-lighting-panel-left,72px);
    right:auto;
  }
  /* Desktop tools sit on the left, so the panel opens beside the toolbar.
     Scoped one level deeper than the base rule below so it wins the cascade. */
  .viewer-left-tools .viewer-background-panel{
    top:-4px;
    right:auto;
    bottom:auto;
    left:calc(100% + 8px);
  }
  .viewer-capture-status{
    top:0;
    right:auto;
    left:calc(100% + 8px);
  }
}
.viewer-capture-button,
.viewer-pick-color,
.viewer-lighting-button,
.viewer-background-button{
  position:relative;
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 auto;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#eef2f7;
  cursor:pointer;
}
.viewer-capture-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.viewer-pick-color svg{width:20px;height:20px;fill:currentColor;stroke:none}
.viewer-capture-button:hover,.viewer-capture-button:focus-visible,
.viewer-pick-color:hover,.viewer-pick-color:focus-visible,
.viewer-lighting-button:hover,.viewer-lighting-button:focus-visible,.viewer-lighting-button[aria-expanded="true"],
.viewer-background-button:hover,.viewer-background-button:focus-visible,.viewer-background-button[aria-expanded="true"]{
  border-color:#505b68;
  color:#fff;
  outline:none;
  background:#242b33;
}
.viewer-lighting-button[aria-expanded="true"],.viewer-background-button[aria-expanded="true"]{border-color:#ff5365;background:#21161a}
.viewer-pick-color.active{border-color:#ff5365;background:#21161a;color:#fff;box-shadow:0 0 0 1px rgba(255,51,71,.2)}
.viewer-capture-button:disabled{cursor:not-allowed;opacity:.45}
.viewer-capture-button.capturing:disabled{opacity:1}
.viewer-lighting-control{position:relative;flex:0 0 auto}
.viewer-lighting-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.viewer-lighting-button:disabled{cursor:not-allowed;opacity:.45}
.viewer-lighting-panel{
  position:fixed;
  top:var(--viewer-lighting-panel-top,150px);
  right:16px;
  width:340px;
  max-height:min(720px,calc(100dvh - var(--viewer-lighting-panel-top,150px) - var(--workflow-nav-height) - 12px));
  overflow:auto;
  padding:15px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(13,17,22,.97);
  color:#f2f5f8;
  box-shadow:0 18px 42px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
  scrollbar-width:thin;
  scrollbar-color:#596575 #171d24;
}
.viewer-lighting-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.viewer-lighting-panel-head strong{font-size:12px;font-weight:900;letter-spacing:.06em}
.viewer-lighting-panel-head span{color:#9ca8b7;font-size:10px;font-weight:700}
.viewer-lighting-section{min-width:0;margin:0;padding:13px 0 0;border:0;border-top:1px solid #2b333d}
.viewer-lighting-section+.viewer-lighting-section{margin-top:13px}
.viewer-lighting-section legend{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:0 0 9px;color:#e9edf2;font-size:10px;font-weight:900}
.viewer-lighting-section legend output{color:#99a6b6;font-size:10px;font-weight:700}
.viewer-lighting-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.viewer-lighting-preset-grid button{
  min-height:58px;
  padding:8px 9px;
  border:1px solid #343d48;
  border-radius:8px;
  background:#171d24;
  color:#eef2f6;
  text-align:left;
  cursor:pointer;
}
.viewer-lighting-preset-grid button strong{display:block;font-size:10px;font-weight:900}
.viewer-lighting-preset-grid button small{display:block;margin-top:3px;color:#95a2b2;font-size:9px;line-height:1.25}
.viewer-lighting-preset-grid button:hover,.viewer-lighting-preset-grid button:focus-visible,.viewer-lighting-source-options button:hover,.viewer-lighting-source-options button:focus-visible,.viewer-lighting-direction button:hover,.viewer-lighting-direction button:focus-visible{border-color:#606c7b;color:#fff;outline:none}
.viewer-lighting-preset-grid button[aria-pressed="true"],.viewer-lighting-source-options button[aria-pressed="true"]{border-color:#ff4357;background:#25171c;box-shadow:0 0 0 1px rgba(255,51,71,.22)}
.viewer-lighting-direction{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);justify-content:center;gap:4px}
.viewer-lighting-direction button{
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #3b4551;
  border-radius:50%;
  background:#171d24;
  color:#c9d1dc;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}
.viewer-lighting-direction button[aria-pressed="true"]{border-color:#ff4357;background:#ff3347;color:#fff;box-shadow:0 0 0 3px rgba(255,51,71,.13)}
.viewer-lighting-direction button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.viewer-lighting-direction .lighting-direction-top{grid-column:2;grid-row:1}
.viewer-lighting-direction .lighting-direction-front{grid-column:3;grid-row:1}
.viewer-lighting-direction .lighting-direction-left{grid-column:1;grid-row:2}
.viewer-lighting-direction .lighting-direction-center{grid-column:2;grid-row:2;display:grid;place-items:center;color:#778394}
.viewer-lighting-direction .lighting-direction-center svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.viewer-lighting-direction .lighting-direction-right{grid-column:3;grid-row:2}
.viewer-lighting-direction .lighting-direction-bottom{grid-column:2;grid-row:3}
.viewer-lighting-source-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.viewer-lighting-source-options button{min-height:34px;padding:5px;border:1px solid #343d48;border-radius:8px;background:#171d24;color:#b9c3d0;font-size:9px;font-weight:900;cursor:pointer}
.viewer-lighting-range{display:grid;gap:7px;margin-top:13px;color:#edf1f5;font-size:10px;font-weight:900}
.viewer-lighting-range>span{display:flex;align-items:center;justify-content:space-between;gap:12px}
.viewer-lighting-range output{color:#a2afbe;font-weight:700}
.viewer-lighting-range input{width:100%;margin:0;accent-color:#ff3347;cursor:pointer}
.viewer-lighting-follow{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid #2b333d;color:#d8dee6;font-size:10px;font-weight:800;cursor:pointer}
.viewer-lighting-follow input{width:17px;height:17px;margin:0;accent-color:#ff3347}
.viewer-capture-status{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:max-content;
  max-width:260px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:8px;
  background:rgba(11,14,18,.94);
  color:#e9eef5;
  font-size:10px;
  font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
}
.viewer-capture-status[data-state="error"]{border-color:rgba(255,83,101,.55);color:#ff9cab}
.viewer-background-control{position:relative;flex:0 0 auto}
.viewer-background-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.viewer-background-indicator{
  position:absolute;
  right:5px;
  bottom:5px;
  width:8px;
  height:8px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:50%;
  background:#f3f6f8;
  box-shadow:0 1px 3px rgba(0,0,0,.55);
}
.viewer-background-button[data-current-background="black"] .viewer-background-indicator{background:#151719}
.viewer-background-button[data-current-background="showcase"] .viewer-background-indicator{background:radial-gradient(circle at 50% 62%,#ff9a2e 0 24%,#151719 34%)}
.viewer-background-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:-4px;
  bottom:auto;
  left:auto;
  width:236px;
  padding:0;
  border:1px solid #2b3039;
  border-radius:12px;
  background:#11161c;
  color:#f2f5f8;
  box-shadow:0 20px 48px rgba(0,0,0,.6);
  overflow:hidden;
}
.viewer-background-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 8px}
.viewer-background-panel-head strong{font-size:11px;font-weight:900;letter-spacing:.1em;color:#9ca8b7}
.viewer-background-panel-head span{color:#f2f5f8;font-size:11px;font-weight:700}
.viewer-background-options{display:flex;flex-direction:column}
.viewer-background-options button{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  padding:0 14px;
  border:0;
  border-top:1px solid #1f262e;
  border-radius:0;
  background:transparent;
  color:#c5ced9;
  font-size:13px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.viewer-background-options button>span:last-child{flex:1}
.viewer-background-options button::after{
  content:"";
  width:16px;
  height:16px;
  flex:0 0 auto;
  opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4b5e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;
}
.viewer-background-options button:hover,
.viewer-background-options button:focus-visible{
  background:#171d24;
  color:#fff;
  outline:none;
}
.viewer-background-options button:focus-visible{box-shadow:inset 0 0 0 2px #95bbff}
.viewer-background-options button.active{
  background:#1c2027;
  color:#fff;
  font-weight:800;
  box-shadow:inset 3px 0 #ee2034;
}
.viewer-background-options button.active::after{opacity:1}
.viewer-bg-swatch{
  width:22px;
  height:22px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  box-sizing:border-box;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.viewer-bg-swatch-studio{background:radial-gradient(circle at 35% 30%,#fff 0 25%,#c8d0d8 70%,#858e99)}
.viewer-bg-swatch-black{background:radial-gradient(circle at 40% 38%,#4a4c4e,#0e0f11 78%)}
.viewer-bg-swatch-showcase{background:radial-gradient(ellipse at 50% 66%,#ffb347 0 20%,#ff7a1a 26%,#0b0d10 36%,#1a1d22 100%)}
.viewer-bg-swatch-custom{display:grid;place-items:center;border-style:dashed;border-color:#6b7684;background:#0e1319 var(--custom-background-swatch,none) center/cover no-repeat;color:#c5ced9}
.viewer-bg-swatch-custom svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.viewer-bg-swatch-custom.has-image{border-style:solid;border-color:rgba(255,255,255,.3)}
.viewer-bg-swatch-custom.has-image svg{display:none}
.viewer-background-replace{min-height:36px;padding:0 14px 0 48px;border:0;border-top:1px solid #1f262e;background:transparent;color:#86b4ff;font-size:12px;font-weight:700;text-align:left;cursor:pointer}
.viewer-background-replace:hover,.viewer-background-replace:focus-visible{background:#171d24;color:#a9c8ff;outline:none}
.viewer-background-replace[hidden]{display:none}
.viewer-background-hint{margin:0;padding:8px 14px 11px;border-top:1px solid #1f262e;color:#7f8a99;font-size:10px;line-height:1.45;font-weight:600}
.viewer[data-viewer-background="custom"]{background:#0b0d10 var(--custom-background,none) center/cover no-repeat}
@media(max-width:760px){
  .viewer-left-tools{top:12px;right:10px}
  .viewer-lighting-panel{position:fixed;top:66px;right:10px;left:10px;width:auto;max-height:calc(100vh - 142px)}
  .viewer-background-panel{width:224px}
}
/* Version 1.42 blocking design-processing feedback */
.processing-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(3,5,8,.78);
  backdrop-filter:blur(8px) saturate(.75);
}
.processing-card{
  width:min(460px,100%);
  padding:30px;
  border:1px solid rgba(255,69,88,.42);
  border-radius:18px;
  background:linear-gradient(155deg,rgba(25,29,36,.98),rgba(12,15,20,.99));
  box-shadow:0 28px 100px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.025) inset;
  text-align:center;
}
.processing-orbit{
  position:relative;
  width:58px;
  height:58px;
  margin:0 auto 18px;
  border:3px solid #323843;
  border-top-color:#ff3449;
  border-right-color:#ff7180;
  border-radius:50%;
  animation:processing-spin .9s linear infinite;
}
.processing-orbit::before{
  content:"";
  position:absolute;
  inset:8px;
  border:2px solid rgba(255,255,255,.08);
  border-bottom-color:#fff;
  border-radius:50%;
  animation:processing-spin .65s linear infinite reverse;
}
.processing-orbit span{
  position:absolute;
  inset:50%;
  width:7px;
  height:7px;
  margin:-3.5px;
  border-radius:50%;
  background:#ff3347;
  box-shadow:0 0 18px rgba(255,51,71,.75);
}
.processing-kicker{
  color:#ff5b6d;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
}
.processing-card h2{
  margin:8px 0 7px;
  color:#fff;
  font-size:25px;
  line-height:1.12;
  letter-spacing:-.025em;
}
.processing-detail{
  min-height:22px;
  margin:0;
  color:#aeb8c8;
  font-size:13px;
  line-height:1.55;
}
.processing-progress-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  align-items:center;
  gap:12px;
  margin:22px 0 12px;
}
.processing-progress{
  height:10px;
  overflow:hidden;
  border:1px solid #3a414d;
  border-radius:999px;
  background:#090c10;
}
.processing-progress-bar{
  position:relative;
  width:8%;
  height:100%;
  overflow:hidden;
  border-radius:inherit;
  background:linear-gradient(90deg,#e91f34,#ff5264);
  box-shadow:0 0 18px rgba(255,51,71,.42);
  transition:width .32s ease-out;
}
.processing-progress-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 10%,rgba(255,255,255,.55) 46%,transparent 82%);
  transform:translateX(-120%);
  animation:processing-shimmer 1.15s ease-in-out infinite;
}
.processing-progress-text{
  color:#fff;
  font:800 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-align:right;
}
.processing-lock-note{
  margin:0 0 18px;
  color:#778294;
  font-size:11px;
  line-height:1.45;
}
.stop-processing-button{
  width:100%;
  min-height:44px;
  border:1px solid #596270;
  border-radius:10px;
  background:#171c23;
  color:#f4f6f9;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
}
.stop-processing-button:hover,.stop-processing-button:focus-visible{
  border-color:#ff4a5d;
  background:#24171c;
  outline:none;
  box-shadow:0 0 0 3px rgba(255,51,71,.12);
}
.stop-processing-button:disabled{cursor:wait;opacity:.55}
body.design-processing{cursor:wait}
@keyframes processing-spin{to{transform:rotate(360deg)}}
@keyframes processing-shimmer{to{transform:translateX(120%)}}

@media(max-width:600px){
  .processing-overlay{padding:16px}
  .processing-card{padding:24px 20px}
  .processing-card h2{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  .processing-orbit,.processing-orbit::before,.processing-progress-bar::after{animation:none}
  .processing-progress-bar{transition:none}
}

/* Version 1.39 readability pass */
.brand{font-size:18px}
.eyebrow{font-size:12px}
.view-intro,.intro{font-size:15px;color:#c0cad9}
.step-heading strong,.color-empty-copy h3{font-size:16px}
.step-heading small,.color-empty-copy p{font-size:13px;color:#929daf;line-height:1.35}
.upload-empty,#uploadEmpty{font-size:14px}
.upload-preview span{font-size:14px}
.upload-preview small{font-size:12px;color:#909bad}
.text-button{font-size:13px}
.graphics-field{font-size:13px}
.text-accordion-header strong{font-size:16px}
.text-accordion-preview{font-size:13px;color:#9aa6b8}
.add-text-button{font-size:14px;padding:13px 14px}
.graphics-text-note{font-size:12px;color:#8794a8;line-height:1.5}
.chips button,.toolbar-actions button{font-size:11px}
.generate-button{font-size:14px}
.prototype-note{font-size:11px;color:#788497}
.viewer-title{font-size:13px}
.viewer-subtitle{font-size:12px;color:#909bad}
.loading-state span{font-size:12px}
.filter-chip{font-size:12px}
.tool-hint{font-size:12px;color:#929daf}
.workflow-nav-item{font-size:14px}
.nav-icon{font-size:18px}
.draft-save-status,.start-over-button{font-size:11px}
.header-right .build-version{font-size:11px!important}

@media(max-width:800px){
  .view-intro,.intro{font-size:14px}
  .step-heading strong,.color-empty-copy h3{font-size:15px}
  .step-heading small,.color-empty-copy p{font-size:12px}
  .workflow-nav-item{font-size:11px}
}
@media(max-width:520px){
  .viewer-product-heading{gap:8px}
}
@media(max-width:900px){
  body.product-not-selected .mobile-viewer-preview{display:none!important}
  body.product-not-selected.mobile-main-menu-active .control-view.active>.eyebrow,
  body.product-not-selected.mobile-main-menu-active .control-view.active>.view-title,
  body.product-not-selected.mobile-main-menu-active .control-view.active>.view-intro{max-width:none}
}

/* Version 1.58 mobile-first design library and expandable mockup */
.mobile-viewer-preview,
.mobile-library-sheet-handle{display:none}

@media(max-width:900px){
  .graphic-nudge-tip{display:none!important}
  .viewer canvas{touch-action:none}
  .orbit-control{right:10px;bottom:10px;width:86px;gap:0}
  .orbit-trackball{width:82px;height:82px}
  .orbit-control-label,.orbit-control-help{display:none}
  .orbit-sphere{width:29px;height:29px}
  body.mobile-main-menu-active{
    --mobile-nav-height:66px;
    overflow:hidden!important;
  }
  body.mobile-main-menu-active .workspace{
    position:relative!important;
    display:block!important;
    /* The top bar's real height (116-120px on phones, not 64) and the
       fixed bottom nav with any home-indicator inset: the expanded viewer's
       collapsed sheet sits at this box's bottom edge, above the nav. */
    height:calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.mobile-main-menu-active .controls-panel{
    position:absolute!important;
    inset:0!important;
    z-index:7!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    padding:20px 16px 46px!important;
    border:0!important;
    background:#0c0e11!important;
  }
  body.mobile-main-menu-active .controls-panel.products-scroll-isolated{overflow:hidden!important}
  body.mobile-main-menu-active .viewer-panel{
    position:absolute!important;
    inset:0!important;
    z-index:6!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
  }
  body.mobile-main-menu-active .mobile-upload-design-option,
  body.mobile-main-menu-active #uploadDesignPanel{
    display:none!important;
  }
  body.mobile-main-menu-active .design-mode-fieldset{
    margin-top:30px;
  }
  body.mobile-main-menu-active #premadeDesignPanel:not(.hidden){
    display:block!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  body.mobile-main-menu-active .premade-library-header{
    position:sticky;
    top:-20px;
    z-index:8;
    display:block;
    margin:0 -2px 12px;
    padding:20px 122px 12px 2px;
    background:linear-gradient(180deg,#0c0e11 0%,#0c0e11 82%,rgba(12,14,17,.94) 100%);
  }
  body.mobile-main-menu-active .premade-library-heading .start-path-title{
    margin:0 0 5px;
    color:#fff;
    font-size:25px;
    line-height:1.08;
  }
  body.mobile-main-menu-active .premade-library-heading .view-intro{
    margin:0;
    color:#aeb9c9;
    font-size:12px;
    line-height:1.45;
  }
  body.mobile-main-menu-active .mobile-viewer-preview{
    position:sticky;
    top:12px;
    z-index:15;
    display:grid;
    gap:5px;
    width:108px;
    margin:0 0 -130px auto;
    padding:6px;
    border:1px solid #48515e;
    border-radius:15px;
    background:#171b21;
    color:#d8dee8;
    box-shadow:0 9px 28px rgba(0,0,0,.4);
    cursor:pointer;
  }
  body.mobile-main-menu-active .mobile-viewer-preview img{
    display:block;
    width:100%;
    aspect-ratio:1;
    border-radius:9px;
    object-fit:cover;
    background:#d7dde4;
  }
  body.mobile-main-menu-active .mobile-viewer-preview span{
    padding:1px 0 3px;
    font-size:11px;
    font-weight:850;
    text-align:center;
    letter-spacing:.015em;
  }
  body.mobile-main-menu-active .control-view.active > .eyebrow,
  body.mobile-main-menu-active .control-view.active > .view-title,
  body.mobile-main-menu-active .control-view.active > h1,
  body.mobile-main-menu-active .control-view.active > .view-intro,
  body.mobile-main-menu-active .control-view.active > .intro{
    max-width:calc(100% - 126px);
  }
  body.mobile-main-menu-active .control-view[data-control-view="order"].active{
    padding-top:142px!important;
  }
  body.mobile-main-menu-active .design-filter-row{
    position:relative;
    z-index:4;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    margin:0 -16px 14px;
    padding:0 16px 2px;
  }
  body.mobile-main-menu-active .design-filter-row::-webkit-scrollbar{display:none}
  body.mobile-main-menu-active .filter-chip{flex:0 0 auto;min-height:34px;padding:7px 11px;font-size:11px}
  body.mobile-main-menu-active .design-tab-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    padding-bottom:24px;
  }
  body.mobile-main-menu-active .premade-card{
    min-width:0;
    border-radius:13px;
  }
  body.mobile-main-menu-active .premade-card img{aspect-ratio:1;object-fit:cover}
  body.mobile-main-menu-active .viewer-background-switcher{display:none!important}

  body.mobile-main-menu-active.mobile-viewer-expanded .viewer-panel{
    z-index:10!important;
    inset:0 0 92px!important;
    height:auto!important;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  body.mobile-main-menu-active.mobile-viewer-expanded .controls-panel{
    inset:auto 0 0!important;
    z-index:12!important;
    height:var(--mobile-sheet-current-height,92px)!important;
    padding:0!important;
    overflow:hidden!important;
    border-top:1px solid #3a424e!important;
    border-radius:20px 20px 0 0;
    background:rgba(14,17,22,.98)!important;
    box-shadow:0 -18px 45px rgba(0,0,0,.46);
    transition:height .3s cubic-bezier(.2,.8,.25,1);
  }
  body.mobile-main-menu-active.mobile-viewer-expanded .controls-panel > .control-view{
    display:none!important;
  }
  body.mobile-main-menu-active.mobile-viewer-expanded .mobile-viewer-preview{display:none!important}
  body.mobile-main-menu-active.mobile-viewer-expanded .mobile-library-sheet-handle{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    width:100%;
    height:92px;
    padding:18px 20px 12px;
    border:0;
    background:transparent;
    color:#fff;
    text-align:left;
    touch-action:none;
    cursor:ns-resize;
  }
  .mobile-sheet-grabber{
    position:absolute;
    top:9px;
    left:50%;
    width:42px;
    height:5px;
    border-radius:999px;
    background:#606a78;
    transform:translateX(-50%);
  }
  .mobile-sheet-copy{display:grid;gap:4px}
  .mobile-sheet-copy strong{font-size:15px;line-height:1.15}
  .mobile-sheet-copy small{color:#9ca8b9;font-size:11px}
  .mobile-sheet-preview{display:none;align-items:center;gap:7px;color:#aeb9c9;font-size:9px;font-weight:750}
  .mobile-sheet-preview img{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#d7dde4}

  body.mobile-main-menu-active.mobile-viewer-expanded.mobile-sheet-revealing .controls-panel > .control-view.active{
    display:block!important;
    min-height:calc(100% - 92px)!important;
    padding:8px 16px 50px!important;
    overflow:visible;
  }
  body.mobile-main-menu-active.mobile-viewer-expanded.mobile-sheet-revealing .mobile-sheet-preview{display:flex}
  body.mobile-main-menu-active.mobile-viewer-expanded.mobile-sheet-revealing .premade-library-header{top:0;padding-top:8px}
  body.mobile-main-menu-active.mobile-viewer-expanded.mobile-sheet-revealing .mobile-viewer-preview{display:none}
  body.mobile-main-menu-active.mobile-sheet-dragging .controls-panel{transition:none!important}
  body.mobile-main-menu-active.mobile-viewer-expanded .viewer-toolbar{
    padding:10px 12px;
    gap:8px;
  }
  body.mobile-main-menu-active.mobile-viewer-expanded .toolbar-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end}
  body.mobile-main-menu-active.mobile-viewer-expanded .toolbar-actions button{padding:7px 9px;font-size:10px}
}

@media(max-width:700px){
  .image-quality-badge{left:12px;bottom:104px;min-height:36px;padding:8px 11px;font-size:11px;transform:none}
  .image-quality-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);overflow:auto}
  .image-quality-dialog-header{padding:18px 17px 15px}
  .image-quality-dialog-header h2{font-size:23px}
  .image-quality-details{padding:9px 17px}
  .image-quality-warning,.image-quality-vector-note{margin-left:17px;margin-right:17px}
  .image-quality-dialog-actions{padding:16px 17px 18px}
  .help-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);overflow:auto}
  .help-dialog-header{padding:18px 17px 15px}
  .help-dialog-header h2{font-size:25px}
  .help-dialog-header p{font-size:12px}
  .help-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .help-guide-item{min-height:158px;padding:16px 10px 14px}
  .help-guide-item h3{font-size:14px}
  .help-guide-item p{font-size:11px}
  .help-dialog-footer{padding:14px 17px}
  .help-dialog-footer button{width:100%;min-width:0}
}

@media(max-width:460px){
  .header-right{gap:6px}
  .help-button,.share-design-button,.start-over-button{padding:5px 7px;font-size:10px}
  .share-design-button span{display:none}
  .help-button svg{width:15px;height:15px}
  .header-right .build-version{padding:5px 6px!important;font-size:9px!important}
}

@media(max-width:900px){
  .install-app-button{display:none!important}
  .version-update-notice{left:50%;right:auto;bottom:70px;gap:8px;max-width:calc(100vw - 24px);padding:10px 10px 10px 14px;font-size:16px;transform:translateX(-50%)}
  .version-update-notice button{min-height:44px;padding:10px 14px;font-size:16px}
}

@media(max-width:700px){
  .share-design-dialog{width:calc(100vw - 20px)}
  .share-design-dialog-header{padding:18px 17px 15px}
  .share-design-dialog-header h2{font-size:23px}
  .share-design-link-row{grid-template-columns:1fr;padding:17px 17px 0}
  .share-design-status{margin-left:17px;margin-right:17px}
  .share-design-dialog-actions{padding:15px 17px 18px}
}

@media(max-width:800px){
  body.mobile-main-menu-active{--mobile-nav-height:58px}
}
@media(max-width:900px){
  body.mobile-main-menu-active .bottom-workflow-nav{
    height:calc(var(--workflow-nav-height) + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
}

body.checkout-confirmation-active{overflow:hidden}
/* The banner the product picker shows after an order (order-placed.js). */
.order-placed-banner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 14px;padding:10px 40px 10px 14px;position:relative;border:1px solid #2e6b45;border-radius:10px;background:#0f1f16;color:#d9f5e3;font-size:13px;line-height:1.4}
.order-placed-banner[hidden]{display:none}
.order-placed-banner-check{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#31b45b;color:#08110b;font-size:12px;font-weight:900}
.order-placed-banner-text strong{color:#fff}
.order-placed-banner-sep{color:#6f8f7c}
.order-placed-banner-link{padding:0;border:0;background:none;color:#9ec5ff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.order-placed-banner-link:hover{text-decoration:underline;text-underline-offset:3px}
.order-placed-banner-close{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:6px;background:none;color:#b7dcc4;font-size:20px;line-height:1;cursor:pointer}
.order-placed-banner-close:hover{background:#1a2f22;color:#fff}
/* On phones the sticky design preview sits top-right over the heading; the banner keeps clear of it. */
@media(max-width:900px){body.mobile-main-menu-active .order-placed-banner{margin-right:134px;padding-right:34px}.order-placed-banner-sep{display:none}}
/* The Stripe return shows the same confirmation the cart does before handing back. */
.checkout-confirmation-card .order-placed{text-align:center}
.checkout-confirmation-card .order-placed-icon{width:72px;height:72px;margin:0 auto 18px;color:#55e6ad}
.checkout-confirmation-card .order-placed-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.checkout-confirmation-card .order-placed-title{font-size:26px;margin:0 0 6px}
.checkout-confirmation-card .order-placed-total{font-size:20px;font-weight:700;margin:0 0 10px}
.checkout-confirmation-card .order-placed-note{color:#a9bad0;margin:0 0 20px;overflow-wrap:anywhere}
.checkout-confirmation-card .order-placed-link{color:#9ec5ff;font-weight:600}
.checkout-confirmation-card .order-placed-actions{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin:0}
.checkout-confirmation{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:auto;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,51,77,.14),transparent 42%),
    #0c0e11;
}
.checkout-confirmation[hidden]{display:none}
.checkout-confirmation-card{
  width:min(590px,100%);
  padding:50px 48px 44px;
  border:1px solid #343b46;
  border-radius:24px;
  background:linear-gradient(155deg,#171b21,#101318 72%);
  box-shadow:0 28px 80px rgba(0,0,0,.48);
  color:#f7f8fa;
  text-align:center;
}
.checkout-confirmation-icon{width:72px;height:72px;margin:0 auto 22px;color:#55e6ad}
.checkout-confirmation-icon svg{width:100%;height:100%;fill:rgba(85,230,173,.08);stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.checkout-confirmation.is-processing .checkout-confirmation-icon{color:#f5a328;animation:checkout-confirmation-pulse 1.4s ease-in-out infinite}
.checkout-confirmation.has-error .checkout-confirmation-icon{color:#ff6278}
.checkout-confirmation-kicker{margin:0 0 12px;color:#ff5b70;font-size:12px;font-weight:850;letter-spacing:.18em}
.checkout-confirmation-card h1{margin:0;font-size:clamp(31px,5vw,48px);line-height:1.06;letter-spacing:-.035em}
.checkout-confirmation-message{max-width:460px;margin:18px auto 0;color:#b6bfcc;font-size:16px;line-height:1.55}
.checkout-confirmation-details{margin:30px 0 0;padding:0;border:1px solid #343b46;border-radius:15px;background:#0d1014;text-align:left}
.checkout-confirmation-details div{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px;padding:12px 18px;border-bottom:1px solid #2a3039}
.checkout-confirmation-details div:last-child{border-bottom:0}
.checkout-confirmation-details dt{color:#929dab;font-size:13px;font-weight:700}
.checkout-confirmation-details dd{margin:0;color:#fff;font-size:14px;font-weight:850;overflow-wrap:anywhere;text-align:right}
.checkout-confirmation-note{margin:20px 0 0;color:#8994a3;font-size:13px;line-height:1.5}
.checkout-confirmation-actions{display:flex;justify-content:center;gap:12px;margin-top:28px}
.checkout-confirmation-actions button{min-height:48px;padding:0 22px;border-radius:11px;font:800 14px/1 inherit;cursor:pointer}
.checkout-confirmation-primary{border:1px solid #ff334d;background:#ff334d;color:#fff;box-shadow:0 10px 30px rgba(255,51,77,.2)}
.checkout-confirmation-secondary{border:1px solid #3e4754;background:#171c23;color:#fff}
@keyframes checkout-confirmation-pulse{50%{opacity:.48;transform:scale(.94)}}

@media(max-width:600px){
  .checkout-confirmation{padding:14px}
  .checkout-confirmation-card{padding:38px 22px 30px;border-radius:19px}
  .checkout-confirmation-actions{flex-direction:column-reverse}
  .checkout-confirmation-actions button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  body.mobile-main-menu-active .viewer-panel,
  body.mobile-main-menu-active.mobile-viewer-expanded .controls-panel{transition:none}
  .checkout-confirmation.is-processing .checkout-confirmation-icon{animation:none}
}

/* Customer actions get their own row on compact screens. */
@media(max-width:900px){
  :root{--topbar-height:116px}
  .topbar{flex-wrap:wrap;align-content:center;gap:8px;padding:10px}
  .topbar .brand-logo{height:40px}
  .header-right{flex-basis:100%;justify-content:space-between;gap:4px}
  .header-right .build-version{display:none}
  .header-right .customer-account-link{font-size:11px;padding:8px 5px}
  #saveAccountDesignButton{font-size:11px;padding:8px 6px}
}
@media(max-width:460px){.header-right .help-button span{display:none}}
/* ?embed=viewer: the bare 3D stage for the ProShops homepage. Everything but
   the garment, orbit and the Front/Back/Left/Right/Reset row is hidden, and the
   viewer fills the frame at every width (the phone layout does not apply). */
html.embed-viewer .topbar,html.embed-viewer .controls-panel,html.embed-viewer .bottom-workflow-nav,html.embed-viewer #eyedropperButton,html.embed-viewer #viewerLightingControl,
html.embed-viewer .viewer-product-heading,html.embed-viewer .graphic-history-controls,html.embed-viewer .mobile-viewer-preview,
html.embed-viewer .mobile-library-sheet-handle,html.embed-viewer #workflowIntro,html.embed-viewer #versionUpdateNotice,
html.embed-viewer #accountDrawer{display:none!important}
html.embed-viewer body{overflow:hidden}
html.embed-viewer .workspace{display:grid!important;grid-template-columns:1fr!important;height:100vh!important;height:100dvh!important;min-height:0!important}
html.embed-viewer .viewer-panel{position:static!important;height:100%!important;min-height:0!important;grid-template-rows:auto 1fr!important}
html.embed-viewer .viewer-toolbar{justify-content:center;min-height:56px;padding:0 12px}
html.embed-viewer .viewer{min-height:0!important}
/* Belt and braces for narrow frames: even if the phone-layout body classes were
   ever set, the stage stays in flow and visible. */
html.embed-viewer body .viewer-panel,html.embed-viewer body.mobile-main-menu-active .viewer-panel{position:static!important;inset:auto!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:none!important}
html.embed-viewer body .viewer{visibility:visible!important;opacity:1!important}
html.embed-viewer .viewer-toolbar .toolbar-actions{flex-wrap:wrap;justify-content:center}
html.embed-viewer .toolbar-actions button:nth-child(3){display:inline-flex!important}
/* The embed keeps snapshot and background on a left rail at every width
   (the phone layout would park it top-right), with the background panel
   opening beside it, and carries Help as a pill in the view row. */
html.embed-viewer .viewer-toolbar{position:relative}
html.embed-viewer .viewer-toolbar .toolbar-actions{margin:0 auto!important;align-self:center!important}
html.embed-viewer .viewer-left-tools{top:16px!important;left:16px!important;right:auto!important;flex-direction:column!important}
html.embed-viewer .viewer-left-tools .viewer-background-panel{top:-4px;right:auto;bottom:auto;left:calc(100% + 8px)}
html.embed-viewer .help-guide-item:nth-child(n+4),html.embed-viewer .help-dialog-eyebrow,html.embed-viewer .help-dialog-footer{display:none}
html.embed-viewer .help-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html.embed-viewer .help-guide-item{min-height:0!important;padding:14px 8px 12px!important}
html.embed-viewer .help-dialog{max-height:calc(100dvh - 24px);overflow:auto}
html.embed-viewer #helpButton{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:inline-flex!important;flex-direction:row;align-items:center;gap:6px;min-width:0;min-height:32px;height:32px;padding:0 12px 0 9px;border:1px solid #3a4653;border-radius:8px;background:#242c35;color:#e8edf4;font:700 12px/1 var(--font-sans);cursor:pointer}
html.embed-viewer #helpButton svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.embed-viewer #helpButton:hover{background:#2d3640;color:#fff}
@media(max-width:560px){html.embed-viewer #helpButton span{display:none}html.embed-viewer #helpButton{padding:0 8px}}
/* The framed stage's spin hint: a curved arrow in front of the garment until the visitor first moves it. */
.embed-spin-hint{display:none}
html.embed-viewer .embed-spin-hint{display:block;position:absolute;left:50%;bottom:9%;z-index:3;width:min(46%,240px);transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .5s ease-out}
html.embed-viewer .embed-spin-hint-show{opacity:.9}
html.embed-viewer .embed-spin-hint-done{opacity:0;transition-duration:.3s}
html.embed-viewer .embed-spin-hint svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 6px rgba(0,0,0,.7))}
html.embed-viewer .embed-spin-hint-arc{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:10 9;animation:embed-spin-hint-flow 1.4s linear infinite}
html.embed-viewer .embed-spin-hint-head{fill:#fff}
@keyframes embed-spin-hint-flow{to{stroke-dashoffset:-19}}
@media(prefers-reduced-motion:reduce){html.embed-viewer .embed-spin-hint-arc{animation:none}}

/* /design: "Keep designing" in the leave prompt is the prompt's main action. */
.account-save-dialog .leave-design-stay{background:#ee2034;border-color:#ee2034;font-weight:700}

/* A picture that starts empty (the phone's garment previews, the coming-soon
   garment) shimmers until it has loaded; one that fails keeps the shimmer
   tile instead of a broken image (app.js). */
img[data-loading]{background-color:#1a1d24;background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%);background-size:250% 100%;background-repeat:no-repeat;animation:image-loading-shimmer 1.4s ease-in-out infinite}
@keyframes image-loading-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){img[data-loading]{animation:none;background-image:none}}

/* 3.169.0: a phone turned sideways (David, 2026-10-02; mobile audit F05/F18).
   The stacked phone layout left the 3D viewer a 98px strip at 844x390, so a
   short landscape screen uses the desktop idea instead: the viewer on the
   left, the step tabs as a column, the step panel on the right, each scrolling
   on its own. Upright phones and desktop are unchanged. */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  body.mobile-main-menu-active{--cz-land-bar:48px;--cz-land-rail:68px;--cz-land-panel:min(340px,42vw)}
  body.mobile-main-menu-active .cz-topbar{height:var(--cz-land-bar)!important;min-height:0!important;overflow:hidden}
  body.mobile-main-menu-active .cz-topbar .sf-cz-bar{min-height:var(--cz-land-bar)!important;height:var(--cz-land-bar);padding-block:4px!important}
  body.mobile-main-menu-active .cz-topbar .sf-cz-bar img{max-height:28px!important}
  body.mobile-main-menu-active .workspace,
  body.mobile-main-menu-active.mobile-viewer-expanded .workspace{
    position:fixed!important;top:var(--cz-land-bar)!important;right:0!important;bottom:0!important;left:0!important;
    height:auto!important;margin:0!important;padding:0!important;display:grid!important;
    grid-template-columns:calc(100vw - var(--cz-land-rail) - var(--cz-land-panel)) var(--cz-land-rail) var(--cz-land-panel)!important;
  }
  body.mobile-main-menu-active .viewer-panel,
  body.mobile-main-menu-active.mobile-viewer-expanded .viewer-panel{
    position:relative!important;inset:auto!important;grid-column:1!important;grid-row:1!important;z-index:1!important;
    width:auto!important;height:100%!important;min-width:0!important;overflow:hidden!important;
    display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;
    visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  }
  body.mobile-main-menu-active .viewer-panel>*{min-width:0!important;max-width:100%!important}
  body.mobile-main-menu-active .viewer-panel .viewer{height:100%!important;min-height:0!important}
  body.mobile-main-menu-active .controls-panel,
  body.mobile-main-menu-active.mobile-viewer-expanded .controls-panel{
    position:relative!important;inset:auto!important;grid-column:3!important;grid-row:1!important;z-index:1!important;
    width:auto!important;height:100%!important;padding:14px 16px 24px!important;overflow-y:auto!important;
    border:0!important;border-left:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;box-shadow:none!important;transition:none!important;
  }
  body.mobile-main-menu-active.mobile-viewer-expanded .controls-panel>.control-view.active{display:block!important}
  body.mobile-main-menu-active .mobile-viewer-preview,
  body.mobile-main-menu-active .mobile-library-sheet-handle,
  body.mobile-main-menu-active .mobile-sheet-preview{display:none!important}
  body.mobile-main-menu-active .control-view.active>.view-title{font-size:22px!important;line-height:1.15!important}
  body.mobile-main-menu-active .viewer-toolbar{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:6px!important;padding:6px 10px!important;min-height:0!important}
  body.mobile-main-menu-active .viewer-toolbar>:first-child{flex:1 1 auto;min-width:0}
  body.mobile-main-menu-active #viewerProductTitle{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.mobile-main-menu-active #conceptLabel{display:none!important}
  body.mobile-main-menu-active .viewer-toolbar button{min-height:44px!important;padding:0 10px!important}
  body.mobile-main-menu-active .viewer-toolbar button span:not(:first-child){display:none!important}
  body.mobile-main-menu-active .viewer-toolbar .toolbar-actions{flex:0 0 auto!important;flex-wrap:nowrap!important;gap:4px!important}
  body.mobile-main-menu-active .workflow-nav-item>span:not(.nav-icon){display:block!important;font-size:10px!important;line-height:1.1!important}
  body.mobile-main-menu-active .bottom-workflow-nav{
    position:fixed!important;top:var(--cz-land-bar)!important;bottom:0!important;left:auto!important;right:var(--cz-land-panel)!important;
    width:var(--cz-land-rail)!important;height:auto!important;display:flex!important;flex-direction:column!important;
    border-top:0!important;border-left:1px solid rgba(255,255,255,.08)!important;z-index:20!important;
  }
  body.mobile-main-menu-active .workflow-nav-item{
    flex:1 1 0!important;min-height:44px!important;width:100%!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:3px!important;padding:2px!important;font-size:11px!important;border-left:0!important;
  }
}
/* A narrower sideways phone (667x375) keeps the view buttons and drops the garment name, which the step panel already shows. */
@media (max-width:760px) and (orientation:landscape) and (max-height:500px){
  body.mobile-main-menu-active .viewer-toolbar .viewer-product-heading{display:none!important}
  body.mobile-main-menu-active .viewer-toolbar .toolbar-actions{flex:1 1 auto!important;justify-content:flex-start!important}
}
/* Phones and touch screens (3.171.0). */
/* F09/F21: the bottom tabs keep a short word under their icon. */
@media(max-width:800px){
  .bottom-workflow-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
  .workflow-nav-item{flex-direction:column;gap:3px;min-width:0;padding:0 2px}
  .workflow-nav-item span:last-child{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;line-height:1.1;letter-spacing:0;white-space:nowrap}
}
@media(pointer:coarse){
  /* F07: the share link field is 16px. */
  .share-design-link-row input{font-size:16px}
  .share-design-link-row button,.share-design-dialog-actions button{min-height:44px}
  /* F08/F20: 44px targets, spaced, for the view buttons, the viewer's tools, Undo/Redo and the dialogs' close. */
  .toolbar-actions button,.viewer-panel>.viewer-toolbar>.toolbar-actions button{min-height:44px;min-width:44px}
  .viewer-left-tools{gap:6px}
  .viewer-left-tools button,.viewer-left-tools>div>button{min-width:44px;min-height:44px}
  .graphic-history-controls{gap:10px}
  .graphic-history-controls button{width:44px;height:44px}
  .history-controls{gap:8px}
  .history-controls button{min-height:44px;min-width:44px;font-size:13px}
  .help-dialog-close,.share-design-dialog-close{width:44px;height:44px}
  .stitch-color-swatch{min-height:44px;font-size:13px}
  .filter-chip{min-height:44px;padding:0 14px}
  /* F10/F22: instructions are at least 14px. */
  .help-dialog-header p,.help-guide-item p{font-size:14px}
  .color-empty-copy p,.color-empty-note,.stitch-color-heading+p,#stitchColorHeading+p{font-size:14px}
}
@media(pointer:coarse) and (max-width:420px){.help-guide-grid{grid-template-columns:1fr}}
/* The save dialog's close button and its "Design saved" step. */
.account-save-dialog .account-save-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:#9aa1ad}
.account-save-dialog .account-save-x:hover{background:#191d24;color:#ffffff}
.account-save-dialog .account-save-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.account-save-dialog form h2,.account-save-dialog .account-save-done h2{padding-right:32px}
.account-save-dialog .account-save-check{display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:50%;background:#123524;color:#3ddc84}
.account-save-dialog .account-save-check svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.account-save-dialog .account-save-item{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:10px;border:1px solid #343b47;border-radius:12px;background:#08090b}
.account-save-dialog .account-save-item img{flex:none;width:56px;height:56px;border-radius:8px;object-fit:contain;background:#e9edf2}
.account-save-dialog .account-save-item div{display:flex;flex-direction:column;gap:2px;min-width:0}
.account-save-dialog .account-save-item strong{overflow-wrap:anywhere}
.account-save-dialog .account-save-item span{font-size:13px;color:#b1bac8}
.account-save-dialog .account-save-done-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin-top:20px}
.account-save-dialog .account-save-done-actions a{display:inline-flex;align-items:center;padding:11px 16px;border:1px solid #343b47;border-radius:8px;background:#191d24;color:#ffffff;text-decoration:none}
.account-save-dialog #closeAccountDesignSaved{min-width:96px;background:#ee2034;border-color:#ee2034;font-weight:700}

/* The 3D viewer error box (David, 2026-10-04): steps the shopper can take,
   and the technical text folded away. */
.error-help{margin:10px 0 0;padding-left:20px;display:grid;gap:4px;color:#f6dde1;font-size:13px;line-height:1.4}
.error-technical{margin-top:12px;color:#c9a1a8;font-size:12px}
.error-technical summary{cursor:pointer;width:max-content}
.error-technical summary:focus-visible{outline:2px solid #ff8d9a;outline-offset:2px;border-radius:4px}
.error-technical code{margin-top:6px}

/* Mobile recheck 2026-10-04 (3.213.0).
   R01/R09: on the Products view the floating preview is a 48px thumbnail at the end of the category row,
   and the row leaves it that room, so it never covers a tab or the product list (which starts below
   both and scrolls in its own box). Tap it to expand, as before; its label is read by screen readers.
   R02/R10: category tabs are at least 44x44 on touch screens.
   R17: the Shorts and Rash Guard row picture fits its 72px phone slot instead of running into the name. */
@media(max-width:900px){
  body.mobile-main-menu-active:not(.product-not-selected) .controls-panel:has(.products-view.active) .mobile-viewer-preview{
    width:48px;
    margin-bottom:-48px;
    padding:3px;
    gap:0;
    border-radius:12px;
  }
  body.mobile-main-menu-active:not(.product-not-selected) .controls-panel:has(.products-view.active) .mobile-viewer-preview img{border-radius:8px}
  body.mobile-main-menu-active:not(.product-not-selected) .controls-panel:has(.products-view.active) .mobile-viewer-preview span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  body.mobile-main-menu-active:not(.product-not-selected) .controls-panel:has(.products-view.active) .mobile-viewer-preview::after{content:"\2922";position:absolute;right:5px;bottom:5px;width:16px;height:16px;border-radius:5px;background:rgba(9,12,16,.78);color:#fff;font-size:11px;line-height:16px;text-align:center}
  body.mobile-main-menu-active:not(.product-not-selected) .products-view.active .product-category-tabs{margin-right:60px}
}
@media(pointer:coarse){
  .shorts-product-row{min-height:44px}
  .product-search,.product-category-picker select{height:44px}
}

/* 2026-10-09 (David): "Choose a design" leads Setup, right under the eyebrow. */
#premadeDesignPanel.premade-design-panel{margin-top:0;padding-top:0;border-top:0}
#premadeGrid{grid-auto-flow:row dense}
.blank-design-options{grid-column:1/-1}
.blank-design-options>.start-path-panel{margin:6px 0 10px;padding-top:16px}

/* Gender tabs (David, 2026-10-13): a segmented control beside the search box (it wraps under it on a
   narrow panel); "All" shows each category's Men's / Women's / Youth / Unisex sub-headings, a gender tab
   hides them. A category with no product in the tab is hidden. */
.product-category-tabs{flex-wrap:wrap}
.product-search{flex:1 1 140px}
.product-gender-tabs{display:flex;flex:0 0 auto;gap:2px;padding:2px;border:1px solid #303743;border-radius:9px;background:#12171d}
.product-gender-tabs[hidden]{display:none}
.product-gender-tab{min-width:0;height:32px;padding:0 11px;border:0;border-radius:7px;background:transparent;color:#aeb9c9;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.product-gender-tab[hidden]{display:none}
.product-gender-tab:hover{color:#fff}
.product-gender-tab[aria-selected="true"]{background:#2a313c;color:#fff}
.product-gender-tab:focus-visible{outline:2px solid #ff3347;outline-offset:1px}
.product-group-empty-tab{display:none}
.product-gender-group.hidden{display:none}
.product-gender-label{margin:8px 8px 2px;color:#6f7b8d;font-size:10px;font-weight:800;letter-spacing:.06em;line-height:1.2}
.product-gender-tab-active .product-gender-label{display:none}
@media(pointer:coarse){
  .product-gender-tab{min-width:44px;height:44px}
}
/* Phones (David, 2026-10-20): the product list read too small on a phone.
   Names are 16px and wrap to a second line instead of being cut off, the
   category and gender headings 12px, the thumbnail 40px and the rows taller.
   The search box and category picker are 16px too, so iOS no longer zooms
   the page when one is tapped. */
@media(max-width:900px){
  .shorts-product-row{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;min-height:56px;padding:6px 8px}
  .shorts-row-thumbnail{width:40px;height:40px;border-radius:9px}
  .shorts-row-thumbnail img{width:35px;height:35px}
  html.cz-store.cz-scheme-light .shorts-row-thumbnail img{width:37px;height:37px}
  .shorts-row-name{display:-webkit-box;font-size:16px;line-height:1.3;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .product-row-tag{font-size:13px}
  .product-group-label{margin-top:20px;font-size:12px}
  .product-gender-label{margin-top:10px;font-size:12px}
  .product-search input,.product-category-picker select{font-size:16px}
  /* Compact tabs leave the search box room beside them. */
  .product-gender-tab{padding:0 9px;font-size:13px}
  .product-search-empty{font-size:15px}
  .product-more-button{font-size:14px}
}