.designer{padding:40px 0 80px;background:var(--paper)}
.builder{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.stage{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.seg button{font:600 .92rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.03em;padding:8px 16px;border:0;background:#fff;color:var(--ink);cursor:pointer}
.seg button+button{border-left:2px solid var(--ink)}
.seg button small{font-weight:400;opacity:.65;text-transform:none}
.seg button.active{background:var(--ink);color:#fff}
.seg.dim{opacity:.45}
.seg.wide{display:flex;margin-bottom:6px}.seg.wide button{flex:1;padding:8px 6px}
.tools{display:flex;gap:6px}
.tool{min-width:38px;height:36px;border:1px solid var(--line);background:#fff;border-radius:4px;font-size:1.15rem;cursor:pointer;color:var(--ink)}
.tool.text{font:600 .8rem Inter,sans-serif;padding:0 12px}
.tool:disabled{opacity:.35;cursor:default}
.canvas{border-radius:6px;background:radial-gradient(ellipse at 50% 30%,#fff 0%,#f3f2ee 50%,#dedbd3 100%);padding:22px 8% 8px;position:relative;user-select:none;-webkit-user-select:none}
.canvas svg{width:100%;height:auto;display:block;max-height:68vh;margin:0 auto}
.canvas.is-shorts{padding:60px 8% 50px}
.canvas .it{cursor:grab;touch-action:none}
.canvas .it:hover{filter:drop-shadow(0 0 3px rgba(30,111,255,.7))}
.canvas .handle{cursor:nwse-resize;touch-action:none}
.sel-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px;padding:10px 12px;background:#eef3ff;border:1px solid #c9d6f5;border-radius:6px;font-size:.85rem}
.sel-bar[hidden]{display:none}
.sel-bar strong{font:600 .95rem Oswald,sans-serif;text-transform:uppercase;color:#1E6FFF}
.sel-bar label{display:flex;align-items:center;gap:6px;font-weight:600}
.sel-bar input[type=range]{width:100px;accent-color:#1E6FFF}
.sel-bar output{min-width:38px;color:var(--muted);font-weight:500}
.sel-actions{display:flex;gap:6px;margin-left:auto}
.sel-actions button{border:1px solid #c9d6f5;background:#fff;border-radius:4px;padding:6px 10px;font:600 .8rem Inter,sans-serif;cursor:pointer;color:var(--ink)}
.sel-actions .done{background:#1E6FFF;color:#fff;border-color:#1E6FFF}
.views{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.view-btn{border:2px solid var(--line);background:#f7f6f2;border-radius:6px;padding:8px 6px 6px;cursor:pointer;font:600 .78rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.view-btn .mini{display:block;height:84px;margin-bottom:4px}
.view-btn .mini svg{height:100%;width:auto;display:block;margin:0 auto}
.view-btn.active{border-color:var(--red);color:var(--ink);background:#fff}
.hint{font-size:.82rem;color:var(--muted);margin:10px 0 0}
.steps{background:#fff;border:1px solid var(--line);border-radius:6px;min-width:0}
.step-tabs{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.step-tab{border:0;background:none;padding:12px 4px 10px;cursor:pointer;font:600 .78rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:3px solid transparent;display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.15}
.step-tab b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--ink);font-size:.8rem}
.step-tab.active{color:var(--ink);border-bottom-color:var(--red)}
.step-tab.active b{background:var(--red);color:#fff}
.step{padding:18px 20px 6px}
.step h3{font:600 1rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em;margin:18px 0 10px;display:flex;align-items:center;gap:10px}
.step h3:first-child{margin-top:0}
.step .lead{margin:0 0 16px;color:var(--muted)}
.which-side{font-size:.7rem;background:var(--red);color:#fff;padding:2px 8px;border-radius:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:600 .82rem Inter,sans-serif;cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:420px;overflow-y:auto;padding:2px 4px 2px 2px}
.pat{border:2px solid var(--line);background:#fff;padding:6px 4px 4px;cursor:pointer;border-radius:5px;font:500 .72rem Inter,sans-serif;color:var(--ink)}
.pat svg{width:100%;height:auto;display:block;margin-bottom:3px}
.pat.active{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.schemes{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.scheme{border:1.5px solid var(--line);background:#fff;border-radius:6px;padding:6px;cursor:pointer;display:grid;grid-template-columns:2fr 1fr 1fr;gap:0;text-align:left}
.scheme span{height:26px}.scheme span:first-child{border-radius:3px 0 0 3px}.scheme span:nth-child(3){border-radius:0 3px 3px 0;box-shadow:inset 0 0 0 1px #ddd}
.scheme em{grid-column:1/-1;font:500 .72rem Inter,sans-serif;font-style:normal;margin-top:5px;color:var(--ink)}
.scheme:hover{border-color:var(--ink)}
.color-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.color-row:last-child{border-bottom:0}
.color-row .lbl{width:92px;flex:none;font-weight:600;font-size:.85rem}
.swatches{display:flex;flex-wrap:wrap;gap:5px;flex:1;align-items:center}
.sw{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #bbb;cursor:pointer;padding:0}
.sw.active{box-shadow:0 0 0 2.5px var(--red)}
.custom{display:flex;align-items:center;gap:6px;font-size:.8rem;margin-left:4px}
.custom input[type=color]{width:30px;height:26px;border:1px solid #bbb;padding:0;background:none;cursor:pointer}
.custom input[type=text]{width:74px;font:500 .8rem monospace;padding:4px;border:1px solid #ccc;border-radius:3px;text-transform:uppercase}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.88rem}
.fields input{font:inherit;font-weight:400;padding:10px;border:1px solid #ccc;border-radius:4px;background:#fff}
.toggles{display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.check{display:flex!important;flex-direction:row!important;gap:8px;align-items:center;font-weight:600;font-size:.88rem;cursor:pointer}
.check.small{font-weight:500;font-size:.82rem;margin:-4px 0 10px;color:var(--muted)}
.fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:10px;max-height:360px;overflow-y:auto;padding:2px}
.font-card{border:2px solid var(--line);background:#fff;border-radius:6px;padding:10px 8px 6px;cursor:pointer;text-align:center;color:var(--ink);overflow:hidden}
.font-card .fs{display:block;font-size:1.45rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0B1A33}
.font-card small{display:block;font:500 .72rem Inter,sans-serif;color:var(--muted);margin-top:4px}
.font-card.active{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.inline-select{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.88rem;margin-top:14px}
.inline-select select{font:inherit;font-weight:400;padding:8px;border:1px solid #ccc;border-radius:4px}
.logo-slot{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:6px;margin-bottom:12px}
.logo-slot img,.logo-slot .ph{width:84px;height:84px;object-fit:contain;flex:none;border-radius:4px;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px}
.logo-slot .ph{display:grid;place-items:center;font:600 .8rem Oswald,sans-serif;text-transform:uppercase;color:var(--muted);border:2px dashed var(--line);background:#faf9f6}
.logo-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.logo-body small{color:var(--muted)}
.spot-btns{display:flex;flex-wrap:wrap;gap:6px}.spot-btns .chip{padding:5px 10px;font-size:.76rem}
.upload{display:inline-block;background:var(--ink);color:#fff;padding:9px 16px;border-radius:4px;font:600 .85rem Inter,sans-serif;cursor:pointer;width:max-content}
.upload input{display:none}
#design-form{grid-template-columns:1fr 1fr}
.send-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.link-btn{background:none;border:0;color:var(--red);font-weight:600;cursor:pointer;padding:8px 0 0;text-decoration:underline;font-size:.86rem;width:max-content}
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);margin-top:14px}
.step-nav #start-over{padding:0;color:var(--muted);font-weight:500;font-size:.8rem}
.btn-ghost{background:none;border:1.5px solid var(--line);border-radius:4px;padding:10px 16px;font:600 .9rem Inter,sans-serif;cursor:pointer;color:var(--ink)}
.step-nav #next,.step-nav #submit-design{margin-left:auto}
.step-nav [hidden]{display:none!important}
@media (max-width:900px){.builder{grid-template-columns:1fr}.stage{position:static}.patterns{grid-template-columns:repeat(3,1fr)}#design-form,.fields{grid-template-columns:1fr}.canvas svg{max-height:52vh}.step-tab{font-size:.68rem}.sel-actions{margin-left:0}}

/* step 1: pick items */
.garments{display:grid;gap:10px}
.garment{display:grid;grid-template-columns:84px 1fr 28px;align-items:center;gap:14px;text-align:left;border:2px solid var(--line);background:#fff;border-radius:8px;padding:10px 14px 10px 10px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.garment:hover{border-color:#c9c6bd}
.garment .g-thumb{display:grid;place-items:center;height:84px;background:#f4f3ef;border-radius:6px;padding:6px}
.garment .g-thumb svg{height:100%;width:auto;display:block}
.garment strong{display:block;font:600 1.05rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.03em}
.garment small{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
.garment .g-check{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.garment.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.garment.on .g-check{background:var(--red);border-color:var(--red)}
.garment.on .g-check::after{content:"";width:7px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.g-hint{color:var(--red);font-size:.85rem;min-height:1.2em;margin:10px 0 0}
[data-g][hidden]{display:none!important}

/* review step */
.review-board{display:none}
.stage.reviewing .review-board{display:block}
.stage.reviewing .stage-top,.stage.reviewing #canvas,.stage.reviewing .sel-bar,.stage.reviewing .views,.stage.reviewing .hint{display:none!important}
.review-board h3{margin:0 0 12px;font-size:1.1rem}
.rb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rb-item{margin:0;background:radial-gradient(ellipse at 50% 30%,#fff 0%,#f3f2ee 55%,#e2dfd8 100%);border-radius:6px;padding:12px 10px 8px;display:flex;flex-direction:column;justify-content:space-between}
.rb-item svg{width:100%;height:auto;display:block}
.rb-item.is-shorts svg{margin:auto 0}
.rb-item figcaption{text-align:center;font:600 .82rem/1.2 Oswald,Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:6px}
.review-who{margin:0 0 14px;font-size:.95rem}
.review-list{list-style:none;padding:0;margin:0 0 18px;border:1px solid var(--line);border-radius:6px;background:#fff}
.review-list li{padding:9px 12px;border-top:1px solid var(--line);font-size:.9rem;line-height:1.45}
.review-list li:first-child{border-top:0}
.review-list strong{margin-right:6px}
@media (min-width:1100px){.rb-grid{grid-template-columns:repeat(3,1fr)}}

.pat.is-new{position:relative}.pat.is-new::after{content:"NEW";position:absolute;top:4px;right:4px;background:var(--orange);color:#fff;font:700 .58rem Inter,sans-serif;letter-spacing:.06em;padding:2px 5px;border-radius:3px}

.g-cats{margin:0 0 12px}.g-cats .chip b{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;border-radius:9px;background:var(--red);color:#fff;font-size:.72rem}
.g-cats .chip.active b{background:#fff;color:var(--red)}
#color-seg{flex-wrap:wrap}#color-seg button{min-width:30%}
.neck-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 12px}.neck-pick>span{font-weight:600}

/* ---- Clean builder (Oct 2026) ---- */
.b-title{background:#fff;border-bottom:1px solid var(--line);padding:22px 0 18px}
.b-title .wrap{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.b-title h1{margin:0;font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink);letter-spacing:.01em}
.b-title p{margin:0;color:var(--muted);font-size:.98rem}
.designer{padding:24px 0 64px;background:#f6f7f9}
.builder{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px}
.stage,.steps{border:0;border-radius:4px;box-shadow:0 1px 2px rgba(11,26,51,.06),0 4px 18px rgba(11,26,51,.05)}
.stage{top:84px;padding:14px}
.canvas{background:linear-gradient(180deg,#fff 0%,#f1f3f6 100%);border-radius:4px}
.views{gap:6px}.view-btn{border-width:1px;background:#fff;border-radius:4px}.view-btn.active{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--red)}
.step-tabs{grid-template-columns:repeat(4,1fr);background:#fff}
.step-tab{flex-direction:row;justify-content:center;gap:8px;padding:16px 6px 13px;font-size:.88rem;letter-spacing:.05em}
.step-tab b{width:22px;height:22px;font-size:.75rem;flex:none}
.step{padding:22px 24px 8px}
.step-more{border-top:1px solid var(--line);margin-top:14px;padding-top:22px}
.step .sec{font:700 1.35rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin:0 0 12px}
.step h3{font-size:.9rem;color:#4a5568;letter-spacing:.07em}
.q-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 10px}.q-head h3{margin:0!important}
.shuffle{background:#1E6FFF;color:#fff;border:0;border-radius:3px;padding:9px 14px;font:600 .78rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.shuffle:hover{background:#163d8f}
/* style picker: clean grid like a catalog */
.patterns{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);max-height:560px;padding:0;grid-template-columns:repeat(4,1fr)}
.pat{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:12px 8px 10px;font:700 .72rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.03em;text-align:left;color:var(--ink);background:#fff}
.pat svg{margin-bottom:8px}
.pat:hover{background:#f6f7f9}
.pat.active{box-shadow:inset 0 0 0 3px var(--red);border-color:var(--line)}
/* colors: one grid per part */
#color-rows{background:#eef2f7;border-radius:4px;padding:4px 16px;margin-top:4px}
.color-row{display:block;padding:16px 0;border-bottom:1px solid #d7dee8}
.color-row .lbl{display:block;width:auto;font:600 .95rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#4a5568;margin-bottom:10px}
.swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;max-width:420px}
.sw{width:100%;height:auto;aspect-ratio:1;border-radius:2px;border:1px solid rgba(0,0,0,.18);box-shadow:none}
.sw:hover{transform:scale(1.1)}
.sw.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.cr-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;max-width:420px}
.cur{font-size:.85rem;color:#1E6FFF;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.custom{color:var(--muted);margin:0}
.scheme{border-radius:3px}.chip{border-radius:3px}
.garment{border-width:1px;border-radius:4px}
#review-who{display:none}
@media (max-width:900px){.step-tab{flex-direction:column;font-size:.7rem;gap:4px}.patterns{grid-template-columns:repeat(3,1fr)}.b-title p{font-size:.9rem}}
/* faint repeating logo behind the mockups, so shared screenshots carry the brand */
.canvas{background:url(/images/watermark.png) 0 0/260px auto repeat,linear-gradient(180deg,#fff 0%,#f1f3f6 100%)}
.rb-item{background:url(/images/watermark.png) 0 0/200px auto repeat,radial-gradient(ellipse at 50% 30%,#fff 0%,#f3f2ee 55%,#e2dfd8 100%)}
/* selected items summary (step 1) */
.picked{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#eef2f7;border-radius:4px;padding:12px 14px;margin:0 0 16px}
.pk-lbl{font:600 .85rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#4a5568;margin-right:4px}
.pk{display:inline-flex;align-items:stretch;background:var(--ink);color:#fff;border-radius:3px;overflow:hidden}
.pk button{background:none;border:0;color:#fff;cursor:pointer;font:600 .8rem Inter,sans-serif}
.pk-go{padding:7px 4px 7px 12px}.pk-go:hover{text-decoration:underline}
.pk-x{padding:7px 10px;opacity:.8}.pk-x:hover{opacity:1;background:var(--red)}
.pk-x:disabled{opacity:.3;cursor:default;background:none}
.pk-note{flex-basis:100%;font-size:.78rem;color:var(--muted);margin-top:2px}
/* logo background remover */
.bg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:8px 10px;background:#eef2f7;border-radius:4px}
.bg-tools .check{font-size:.84rem}
.bg-tol{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem}
.bg-tol input{width:110px;accent-color:#1E6FFF}.bg-tol input:disabled{opacity:.4}
.bg-tools small{flex-basis:100%;font-size:.76rem}
.inline-edit{position:fixed;z-index:50;height:48px;font:700 1.5rem Oswald,Impact,sans-serif;text-transform:uppercase;text-align:center;letter-spacing:.04em;border:2px solid #1E6FFF;border-radius:4px;background:#fff;color:#0B1A33;box-shadow:0 6px 20px rgba(11,26,51,.25);outline:0}

.sec.sec-gap{margin-top:28px}

.qty-box{margin:22px 0 0;border:1px solid #dfe5ee;border-radius:6px;padding:16px;background:#fff}
.qty-box h3{margin:0 0 4px}.qty-box .hint{margin:0 0 12px}
.q-row{display:grid;grid-template-columns:1fr 84px 110px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #eef2f7}
.q-name strong{display:block;font-size:.95rem}
.q-tiers{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;color:var(--muted);font-size:.74rem}
.q-tiers span{white-space:nowrap}.q-tiers span.on{color:var(--ink);font-weight:700;background:#fff1e0;border-radius:3px;padding:0 4px}
.q-in{display:flex;flex-direction:column;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.q-in input{margin-top:3px;padding:8px;font-size:1rem;border:1px solid #cfd6e0;border-radius:4px;width:100%;text-align:center}
.q-line{text-align:right;display:flex;flex-direction:column}.q-line b{font-size:1.05rem}.q-line small{color:var(--muted);font-size:.78rem}
.q-warn{color:var(--red)!important;font-weight:600}
.q-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);margin-top:4px;padding-top:12px;font-size:.95rem}
.q-total b{font-size:1.3rem;margin-left:6px}
@media(max-width:520px){.q-row{grid-template-columns:1fr 72px}.q-line{grid-column:1/-1;flex-direction:row;justify-content:space-between}}

#roster-box .lead{margin-bottom:12px}
.r-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.r-up{cursor:pointer}
.r-paste{margin-bottom:12px}.r-paste textarea{width:100%;font:inherit;padding:10px;border:1px solid #cfd6e0;border-radius:4px;margin-bottom:8px;box-sizing:border-box}
.r-mapbox{background:#fff8ee;border:1px solid #ffd59e;border-radius:6px;padding:12px 14px;margin-bottom:12px;font-size:.9rem;display:grid;gap:10px}
.r-mapsel{display:flex;flex-wrap:wrap;gap:12px}.r-mapsel label{display:flex;flex-direction:column;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.r-mapsel select{margin-top:3px;padding:6px;font-size:.9rem;max-width:220px}
.r-table-wrap{max-height:420px;overflow:auto;border:1px solid #dfe5ee;border-radius:6px}
.r-table{width:100%;border-collapse:collapse;font-size:.9rem}
.r-table th{position:sticky;top:0;background:var(--ink);color:#fff;font:600 .75rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:8px}
.r-table td{padding:4px 6px;border-top:1px solid #eef2f7}.r-table tr:nth-child(even) td{background:#f7f9fc}
.r-table input,.r-table select{width:100%;padding:6px;border:1px solid #cfd6e0;border-radius:3px;font:inherit;box-sizing:border-box;background:#fff}
.r-table .r-num{width:64px;text-align:center}.r-n{color:var(--muted);width:28px;text-align:center}
.r-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.9rem;padding:4px 8px}.r-x:hover{color:var(--red)}
.r-foot{display:flex;gap:16px;align-items:center;margin:10px 0}.r-foot span{color:var(--muted);font-size:.85rem}.r-clear{margin-left:auto}
/* checkout total */
.order-sum{margin:18px 0 6px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff}
.order-sum h3{margin:0 0 8px;font-family:Oswald,sans-serif;font-size:18px}
.order-sum ul{list-style:none;margin:0 0 6px;padding:0}.order-sum li,.os-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.order-sum small{color:var(--muted)}.os-total{font-weight:700;font-size:18px;border:0;padding-top:10px}
.form select{width:100%}
.lead-box{padding:12px 14px;border:1px dashed var(--line);border-radius:10px;background:#fafaf8}.lead-box p{margin:0 0 8px}
.lead-box .check{display:flex;gap:8px;align-items:flex-start;font-weight:400}.lead-box input{width:auto;margin-top:3px}
.os-lead{margin:10px 0 0;color:var(--muted);font-size:14px}
.q-row .q-in b{font-size:1.25rem;color:var(--ink);text-align:center;margin-top:3px}
.q-sizes,.q-sizes-ro{grid-column:1/-1}.q-sizes{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.q-sizes label{display:flex;flex-direction:column;align-items:center;font-size:.68rem;font-weight:600;color:var(--muted)}
.q-sizes input{width:100%;padding:6px 2px;margin-top:2px;text-align:center;border:1px solid #cfd6e0;border-radius:4px;font-size:.9rem}
.q-sizes-ro{font-size:.85rem;color:var(--muted)}
@media(max-width:720px){.q-sizes{grid-template-columns:repeat(6,1fr)}}

.origin{display:flex;gap:10px;align-items:flex-start;margin:8px 0 10px;padding:10px 12px;background:#f2f7f3;border:1px solid #d5e6da;border-radius:10px}.origin .flag{flex:none;width:36px;height:24px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12);margin-top:2px}.origin strong{display:block;font-size:14px}.origin small{display:block;color:var(--muted);font-size:13px;line-height:1.4;font-weight:400}

.lt-add{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.lt-btn{background:#fff;border:1.5px dashed #9aa3b2;color:#1d2a44;font-weight:600;padding:9px 14px;border-radius:8px;cursor:pointer}.lt-btn:hover{border-color:#1E6FFF;color:#1E6FFF}.lt-field{position:relative}.lt-field label{padding-right:30px}.lt-field small{font-weight:400;color:#777}.lt-x{position:absolute;right:0;bottom:8px;border:0;background:none;color:#999;font-size:16px;cursor:pointer;padding:4px}.lt-x:hover{color:#c8102e}.lt-hint{margin-top:10px}

/* Phone navigation (2026-10-20): pinned step tabs, bottom action bar, full-screen preview */
.m-close,.m-preview,.m-startover{display:none}
@media (max-width:900px){
  body.has-builder{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .step-tabs{position:sticky;top:var(--hdr,0px);z-index:15;background:#fff;box-shadow:0 2px 8px rgba(11,26,51,.08)}
  .step-tab{padding:9px 2px 7px;font-size:.62rem;letter-spacing:.02em;gap:3px}
  .step-tab b{width:22px;height:22px}
  .steps{scroll-margin-top:var(--hdr,0px)}
  .stage{scroll-margin-top:var(--hdr,0px)}
  .patterns,.fonts{max-height:none;overflow:visible}
  .step-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(11,26,51,.12);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px}
  .step-nav #start-over{display:none}
  .step-nav .btn,.step-nav .btn-ghost{min-height:46px;padding:10px 14px;white-space:nowrap}
  .step-nav #next,.step-nav #submit-design{margin-left:0;flex:1}
  .m-preview{display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .m-startover{display:block;margin:4px auto 18px;background:none;border:0;color:var(--muted);font-size:.85rem;text-decoration:underline;cursor:pointer}
  .stage.peek{position:fixed;top:var(--hdr,0px);left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom));z-index:25;overflow:auto;border-radius:0;margin:0;-webkit-overflow-scrolling:touch}
  .stage.peek .canvas svg{max-height:58vh}
  .stage.peek .m-close{display:block;width:100%;margin:0 0 10px;padding:10px;border:0;border-radius:4px;background:var(--ink);color:#fff;font:600 .85rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
  body.m-peek{overflow:hidden}
  body.has-builder #stw-chat{bottom:calc(84px + env(safe-area-inset-bottom))!important}
}
@media (max-width:900px){
  .builder>*,.steps,.step{min-width:0;max-width:100%}
  .patterns{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pat{min-width:0}.pat svg{max-width:100%;height:auto}
  .garments{grid-template-columns:minmax(0,1fr)!important}
  .garment{grid-template-columns:64px minmax(0,1fr) 24px;gap:10px;min-width:0}
  .garment small{overflow-wrap:anywhere}
}
@media (max-width:900px){
  .logo-body{min-width:0;flex:1}
  #logo-slots,.logo-slots{grid-template-columns:minmax(0,1fr)!important}
  .upload{max-width:100%}
  .step-tab{min-width:0;overflow-wrap:anywhere}
}
@media (max-width:900px){.pat span{display:block;max-width:100%;overflow-wrap:anywhere;font-size:.62rem}.pat{overflow:hidden}}
@media (max-width:900px){.builder{grid-template-columns:minmax(0,1fr)!important;gap:16px}.stage{position:static}}

.sel-colors{flex-basis:100%;display:flex;flex-direction:column;gap:6px;border-top:1px solid #c9d6f5;padding-top:8px}
.sel-colors[hidden]{display:none}
.sc-row{display:flex;align-items:center;gap:10px;min-width:0}
.sc-lbl{flex:0 0 92px;font-weight:600;display:flex;flex-direction:column;line-height:1.2}.sc-lbl em{font-style:normal;font-weight:500;color:var(--muted);font-size:.75rem}
.sc-sw{display:flex;gap:4px;overflow-x:auto;min-width:0;padding:2px;-webkit-overflow-scrolling:touch}
.sc-sw button,.sc-any{flex:0 0 24px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.2);cursor:pointer;padding:0}
.sc-sw button.on{outline:2px solid #1E6FFF;outline-offset:2px}
.sc-any{position:relative;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);overflow:hidden}.sc-any input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.sc-note{margin:0;font-size:.75rem;color:var(--muted)}
@media (max-width:900px){.sc-lbl{flex-basis:70px}.sc-sw button,.sc-any{flex-basis:30px;width:30px;height:30px}}
.sel-bar{min-width:0;max-width:100%}.sel-colors{min-width:0;width:100%;max-width:100%}.sc-row{width:100%}.sc-sw{flex:1 1 0}

/* Pantone colors (optional PMS code per color in the design) */
.pms-title{margin-top:22px}.pms-title span{font-weight:400;color:#6b7280;font-size:.85em}
.pms-rows{display:grid;gap:8px;margin-top:8px}
.pms-row{display:grid;grid-template-columns:28px 1fr 150px;align-items:center;gap:10px;padding:6px 8px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.pms-dot{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.pms-name{font-size:14px;font-weight:600;color:#0b1a33;line-height:1.2}.pms-name small{display:block;font-weight:400;color:#6b7280;font-size:12px}
.pms-row input{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font:inherit;font-size:14px}
.pms-row input:focus{outline:2px solid #1e6fff;border-color:#1e6fff}
@media (max-width:480px){.pms-row{grid-template-columns:24px 1fr 120px}}

/* Skort style + liner color (2026-10-23) */
.liner-pick{flex-basis:100%;display:flex;flex-direction:column;gap:6px}.liner-pick[hidden]{display:none}.liner-pick>span{font-weight:600}.liner-pick b{font-weight:500}
.liner-sw{display:flex;flex-wrap:wrap;gap:5px}.lsw{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.25);cursor:pointer;padding:0}.lsw.active{outline:2px solid #1e6fff;outline-offset:2px}

/* Nothing picked yet (2026-10-23): design area asks the customer to pick items first */
.pick-first{display:none}
.stage.unpicked .canvas,.stage.unpicked #views,.stage.unpicked .stage-top,.stage.unpicked .sel-bar{display:none!important}
.stage.unpicked .pick-first{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:340px;padding:32px 24px;border:2px dashed rgba(128,128,128,.35);border-radius:14px;margin:12px 0}
.pick-first strong{font-size:1.3rem}
.pick-first span{opacity:.75;max-width:22rem}

/* Kyle 2026-10-23: top and bottom shown together on one screen */
#outfit{display:flex;flex-direction:column}
#outfit.paired #canvas{padding:14px 8% 0;border-radius:6px 6px 0 0}
#outfit.paired #canvas svg{max-height:36vh}
#outfit.paired .canvas{background:transparent!important}
#outfit.paired #canvas.is-shorts svg{max-height:25vh}
#outfit.paired.bottom-first #canvas{order:2;border-radius:0 0 6px 6px;padding:0 8% 14px}
#canvas-pair{display:block;width:100%;border:0;margin:0;padding:0 8% 14px;cursor:pointer;border-radius:0 0 6px 6px;font:inherit}
#outfit.bottom-first #canvas-pair{order:1;padding:14px 8% 0;border-radius:6px 6px 0 0}
#canvas-pair[hidden]{display:none}
#canvas-pair svg{width:100%;height:auto;display:block;max-height:25vh;margin:0 auto;opacity:.97;transition:transform .15s}
#canvas-pair.is-jersey svg{max-height:36vh}
#canvas-pair:hover svg{transform:scale(1.02)}
#canvas-pair .it,#canvas-pair *{pointer-events:none}
.stage.reviewing #outfit,.stage.unpicked #canvas-pair{display:none!important}
@media (max-width:900px){#outfit.paired #canvas svg,#canvas-pair.is-jersey svg{max-height:28vh}#outfit.paired #canvas.is-shorts svg,#canvas-pair.is-shorts svg{max-height:19vh}}

/* design categories + grouped color schemes (2026-10-23) */
.pat-cats{margin:0 0 10px}.pat-cats .chip{padding:6px 12px;font-size:.78rem}.pat-cats .chip small{opacity:.6;font-weight:500;margin-left:2px}
.scheme-g{grid-column:1/-1;font:700 .7rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--muted,#666);margin:10px 0 0}.scheme-g:first-child{margin-top:0}

/* Kyle 2026-10-23: required pockets choice for boys shorts */
.pocket-pick .req{font-style:normal;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#c62828;margin-left:6px}
.pocket-pick:not(.need) .req{display:none}
.pocket-pick[hidden]{display:none!important} /* only when boys shorts are in the design */
.pocket-pick.need .seg{border-color:#c62828}
.pocket-pick.flash{animation:pk-flash 1.2s ease 2}
@keyframes pk-flash{0%,100%{background:transparent}40%{background:rgba(198,40,40,.14)}}
/* Kyle 2026-10-23: preview stays in view while scrolling */
@media (min-width:901px){.stage{max-height:calc(100vh - 100px);overflow-y:auto}.canvas svg{max-height:min(68vh,calc(100vh - 360px))}#outfit.paired #canvas svg{max-height:min(36vh,calc(50vh - 190px))}}
.m-mini{display:none}
@media (max-width:900px){
  .m-mini{display:flex;flex-direction:column;align-items:center;position:fixed;left:12px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:28;width:112px;padding:6px 6px 4px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 22px rgba(11,26,51,.22);cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}
  .m-mini.on{opacity:1;transform:none;pointer-events:auto}
  body.m-peek .m-mini{display:none}
  .m-mini-art{display:block;width:100%}.m-mini-art svg{display:block;width:100%;height:auto;max-height:120px}
  .m-mini-art .overlay,.m-mini-art [class*="hit"]{display:none}
  .m-mini-cap{font:600 .62rem Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:2px}
}

/* Section headers inside a sport tab (Jerseys / Bottoms / Warm-Ups) */
.garments .g-head{grid-column:1/-1;margin:10px 0 -2px;font-family:Oswald,Impact,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;font-weight:600;color:#6b7280;border-bottom:1px solid var(--line);padding-bottom:4px}
.garments .g-head:first-child{margin-top:0}

.garment .g-price{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;background:#fff1e0;border:1px solid #ffd3a3;font-size:.82rem;color:var(--ink)}
.garment .g-price b{color:#b85400;font-size:.98rem}
.garment .g-price em{font-style:normal;color:var(--muted);font-size:.8rem}
/* Text tools on the design (2026-10-26) */
.lt-old .lt-field{display:none!important}
.add-wrap{display:flex;flex-wrap:wrap;gap:6px;order:3;flex-basis:100%}
.add-btn{font-weight:700;color:#1E6FFF;border-color:#1E6FFF!important}
.add-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.14);display:flex;flex-direction:column;min-width:150px;padding:4px}
.add-menu[hidden]{display:none}.add-menu button[hidden]{display:none}
.add-menu button{background:none;border:0;text-align:left;padding:9px 12px;font:600 .9rem inherit;cursor:pointer;border-radius:4px;color:var(--ink)}
.add-menu button:hover{background:#eef3ff}
.txt-tools{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
.txt-tools[hidden]{display:none}
.tt-text input{width:170px;padding:7px 9px;border:1px solid #c9d6f5;border-radius:4px;font:600 .95rem inherit;text-transform:uppercase;background:#fff}
.tt-font{padding:6px 10px;border:1px solid #c9d6f5;background:#fff;border-radius:4px;cursor:pointer;font-size:1rem;color:var(--ink);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-seg{display:inline-flex}.tt-seg[hidden]{display:none}.tt-seg button{padding:6px 9px;font-size:.8rem}
.tt-pop{flex-basis:100%;background:#fff;border:1px solid #c9d6f5;border-radius:6px;padding:8px;min-width:0}
.tt-pop[hidden]{display:none}
.tt-pop .chips{margin-bottom:8px}
.tt-fonts{max-height:240px;overflow-y:auto}
.txt-tools .sc-note{flex-basis:100%}
@media (max-width:600px){.tt-text input{width:140px}.tt-seg button{padding:7px 7px}}

.side-inset{position:absolute;right:10px;bottom:10px;width:clamp(100px,20%,170px);background:rgba(255,255,255,.92);border:1px solid #d9d9d9;border-radius:6px;padding:4px 4px 3px;box-shadow:0 2px 8px rgba(0,0,0,.12);pointer-events:none;text-align:center}.side-inset svg{width:100%;height:auto;max-height:none}.side-inset span{display:block;font-size:.66rem;color:#555;line-height:1.2}