.ts-page{background:#f6f7f8;color:#111827}.ts-wrap{width:min(1180px,calc(100% - 32px));margin:auto}.ts-hero{background:#111827;color:#fff;padding:48px 0}.ts-hero-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:28px;align-items:center}.ts-hero h1{font-size:clamp(32px,5vw,58px);line-height:1.02;margin:8px 0 16px}.ts-hero p{font-size:17px;line-height:1.7;color:#e5e7eb}.ts-eyebrow{display:block;font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase;color:#b38300}.ts-hero .ts-eyebrow{color:#ffd400}.ts-hero-note{background:#ffd400;color:#111827;border-radius:20px;padding:24px}.ts-hero-note strong{font-size:20px}.ts-hero-note p{color:#111827;margin:10px 0 0}.ts-main{padding:28px 0 70px}.ts-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:22px}.ts-steps>div{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px;font-weight:800;display:flex;gap:8px;align-items:center}.ts-steps b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#ffd400}.ts-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px}.ts-content{display:grid;gap:20px}.ts-card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:24px}.ts-card h2{margin:6px 0 18px;font-size:25px}.ts-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.ts-field{display:flex;flex-direction:column;gap:7px}.ts-field label,.ts-editor-tools label{font-weight:800}.ts-field input,.ts-field select,.ts-field textarea,.ts-editor-tools input,.ts-editor-tools select,.ts-shirt-table input,.ts-shirt-table select{width:100%;border:1px solid #cfd4dc;border-radius:10px;padding:11px 12px;font-size:15px;background:#fff;color:#111827}.ts-field textarea{min-height:100px;resize:vertical}.ts-field small,.ts-help{font-size:13px;line-height:1.5;color:#6b7280}.ts-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.ts-choice-grid label{border:1px solid #d1d5db;border-radius:14px;padding:15px;display:grid;grid-template-columns:auto 1fr;column-gap:9px;cursor:pointer}.ts-choice-grid strong,.ts-choice-grid small{grid-column:2}.ts-choice-grid small{color:#6b7280;line-height:1.45;margin-top:4px}.ts-availability,.ts-fullpay{margin:16px 0;background:#fff8d5;border-left:5px solid #ffd400;padding:14px 16px;border-radius:10px;line-height:1.55}.ts-table-wrap{overflow-x:auto}.ts-shirt-table{width:100%;border-collapse:collapse;margin:12px 0}.ts-shirt-table th,.ts-shirt-table td{padding:8px;border-bottom:1px solid #e5e7eb;text-align:left;min-width:120px}.ts-shirt-table th:last-child,.ts-shirt-table td:last-child{min-width:45px;width:45px}.row-remove{border:0;background:#fee2e2;color:#991b1b;border-radius:9px;width:34px;height:34px;font-size:21px;cursor:pointer}.ts-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:12px 18px;background:#ffd400;color:#111827;text-decoration:none;font-weight:900;cursor:pointer}.ts-btn.dark{background:#111827;color:#ffd400}.ts-btn.white{background:#fff;border:1px solid #cbd5e1;color:#111827}.ts-btn.danger{background:#fee2e2;color:#991b1b}.ts-btn.small{padding:9px 13px;font-size:13px}.ts-actions{display:flex;flex-wrap:wrap;gap:10px}.ts-sleeves{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 18px}.ts-sleeves label{font-weight:800}.ts-print-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ts-editor-tools{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:16px}.ts-inline{display:flex;gap:8px;margin-top:8px}.ts-inline input{min-width:0}.ts-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 12px}.ts-tab{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:9px 14px;font-weight:800;cursor:pointer}.ts-tab.active{background:#111827;color:#ffd400;border-color:#111827}.ts-canvas-grid{display:grid;grid-template-columns:1fr;gap:16px}.ts-canvas-grid.b2b{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-canvas-panel{background:#eef1f4;border:2px solid transparent;border-radius:18px;padding:12px;overflow:hidden}.ts-canvas-panel.active{border-color:#ffd400}.ts-canvas-panel.sleeve{grid-column:auto}.ts-canvas-panel canvas{display:block;width:100%;height:auto;background:#eef1f4;border-radius:12px;touch-action:none;cursor:crosshair;max-height:630px;object-fit:contain}.ts-canvas-panel.sleeve canvas{max-height:390px}.ts-canvas-panel>strong{display:block;margin:0 0 8px}.ts-layer-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.ts-layer{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #d1d5db;border-radius:10px;background:#fff;cursor:pointer}.ts-layer.active{border-color:#f4b400;box-shadow:0 0 0 2px #fff4b0}.ts-layer b{background:#111827;color:#ffd400;border-radius:6px;padding:3px 6px;font-size:10px}.ts-layer span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ts-edit-panel{margin-top:12px}.ts-edit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}.ts-edit-grid label{font-weight:700;font-size:13px}.ts-edit-grid input,.ts-edit-grid select{width:100%;margin-top:5px}.ts-summary .sticky{position:sticky;top:18px}.ts-summary-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #eceff2}.ts-summary-row.total{font-size:17px;border-bottom:0}.ts-alert{padding:14px 16px;border-radius:12px;margin-bottom:18px}.ts-alert.danger{background:#fee2e2;color:#7f1d1d}.ts-alert.success{background:#dcfce7;color:#14532d}.ts-progress{position:fixed;inset:0;background:rgba(17,24,39,.7);z-index:99999;display:grid;place-items:center;padding:20px}.ts-progress[hidden]{display:none}.ts-progress>div{width:min(460px,100%);background:#fff;border-radius:18px;padding:25px}.ts-progress i{display:block;background:#e5e7eb;height:10px;border-radius:999px;overflow:hidden}.ts-progress b{display:block;height:100%;width:45%;background:#ffd400;border-radius:999px;animation:tsload 1.1s infinite ease-in-out}.ts-floating-message{position:fixed;right:18px;bottom:18px;background:#111827;color:#ffd400;text-decoration:none;font-weight:900;padding:12px 16px;border-radius:999px;z-index:100}.ts-summary code,.ts-availability code{font-size:12px}@keyframes tsload{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}
@media(max-width:900px){.ts-hero-grid,.ts-layout{grid-template-columns:1fr}.ts-summary{order:-1}.ts-summary .sticky{position:static}.ts-steps{grid-template-columns:1fr 1fr}.ts-fields,.ts-choice-grid,.ts-print-size-grid,.ts-editor-tools,.ts-edit-grid{grid-template-columns:1fr}.ts-canvas-grid.b2b{grid-template-columns:1fr 1fr}.ts-canvas-panel canvas{max-height:500px}}
@media(max-width:620px){.ts-wrap{width:min(100% - 18px,1180px)}.ts-card{padding:16px}.ts-canvas-grid.b2b{grid-template-columns:1fr}.ts-steps{grid-template-columns:1fr}.ts-inline{flex-direction:column}.ts-floating-message{right:10px;bottom:10px}}
.ts-saved-mockups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ts-saved-mockups figure{margin:0;background:#eef1f4;border-radius:14px;padding:10px}.ts-saved-mockups img{display:block;width:100%;height:auto;border-radius:10px}.ts-saved-mockups figcaption{text-align:center;font-weight:800;padding-top:8px}@media(max-width:620px){.ts-saved-mockups{grid-template-columns:1fr}}

/* 2026-08-24 T-Shirt mockup usability refresh */
.ts-wrap{width:min(1420px,calc(100% - 32px))}
.ts-layout{grid-template-columns:minmax(0,1fr) 290px;gap:22px}
.ts-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ts-hero-note ol{margin:12px 0 0;padding-left:22px;display:grid;gap:8px;line-height:1.45}
.ts-section-intro{margin:-8px 0 18px;color:#596273;line-height:1.6}
.ts-steps>a{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px;font-weight:800;display:flex;gap:8px;align-items:center;color:#111827;text-decoration:none}
.ts-steps>a:hover{border-color:#f4b400;background:#fffdf4}
.ts-steps>a b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#ffd400}
.ts-color-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.ts-color-swatch{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:var(--swatch);box-shadow:0 0 0 1px #c8ced8;cursor:pointer}
.ts-color-swatch.active{box-shadow:0 0 0 3px #ffd400,0 0 0 4px #111827}
.ts-designer-card{padding:26px}
.ts-designer-guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}
.ts-designer-guide>div{display:flex;gap:10px;align-items:center;background:#fff8d5;border:1px solid #f0df8d;border-radius:13px;padding:11px}
.ts-designer-guide b{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#111827;color:#ffd400}
.ts-designer-guide span{display:grid;gap:2px}.ts-designer-guide small{color:#6b7280;font-size:12px}
.ts-workspace-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:18px 0 4px;padding:12px 14px;border:1px solid #e5e7eb;border-radius:14px;background:#f8fafc}
.ts-workspace-toolbar .ts-eyebrow{margin-bottom:3px}
.ts-panel-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}
.ts-panel-title small{color:#667085;font-size:12px;text-align:right}
.ts-canvas-panel{padding:14px}
.ts-canvas-panel canvas{max-height:760px}
.ts-canvas-panel.sleeve canvas{max-height:460px}
.ts-layer-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:end}
.ts-summary-kicker{font-size:13px;color:#6b7280;line-height:1.45;margin:7px 0 8px}
.ts-designer-card .ts-editor-tools{position:relative}
.ts-designer-card .ts-help{font-size:14px}
@media(max-width:1150px){.ts-wrap{width:min(1180px,calc(100% - 24px))}.ts-layout{grid-template-columns:minmax(0,1fr) 265px}.ts-designer-guide{grid-template-columns:1fr 1fr}.ts-canvas-panel canvas{max-height:650px}}
@media(max-width:900px){.ts-layout{grid-template-columns:1fr}.ts-designer-guide{grid-template-columns:1fr 1fr}.ts-summary{order:initial}.ts-summary .sticky{position:static}}
@media(max-width:620px){.ts-designer-guide{grid-template-columns:1fr}.ts-workspace-toolbar{align-items:flex-start;flex-direction:column}.ts-panel-title{align-items:flex-start;flex-direction:column}.ts-canvas-panel canvas{max-height:560px}.ts-hero-actions{flex-direction:column}.ts-hero-actions .ts-btn{width:100%}}
.ts-order-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 18px}.ts-order-progress>div{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;font-weight:800;color:#667085}.ts-order-progress b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e5e7eb;color:#374151}.ts-order-progress .done{color:#14532d;border-color:#bbf7d0;background:#f0fdf4}.ts-order-progress .done b{background:#16a34a;color:#fff}.ts-order-progress .current{color:#111827;border-color:#f4b400;background:#fff8d5}.ts-order-progress .current b{background:#ffd400;color:#111827}@media(max-width:760px){.ts-order-progress{grid-template-columns:1fr 1fr}.ts-order-progress>div:last-child{grid-column:1/-1}}


/* 20260825 T-shirt realism + larger workspace */
.ts-hero h1{max-width:12ch}
.ts-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.ts-hero-note ol{margin:14px 0 0 20px;padding:0;display:grid;gap:8px}
.ts-workspace-note{display:block;margin-top:5px;color:#6b7280;font-size:12px;line-height:1.45;font-weight:600}
.ts-workspace-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:14px 0 10px}
.ts-panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px}
.ts-panel-title small{font-size:12px;color:#6b7280;font-weight:700;text-align:right}
.ts-canvas-grid{grid-template-columns:minmax(0,1fr);gap:18px}
.ts-canvas-grid.b2b{grid-template-columns:repeat(2,minmax(0,1fr))}
.ts-canvas-panel{background:linear-gradient(180deg,#f4f6f8 0%,#e9edf2 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px rgba(15,23,42,.06);border:1px solid #dbe2ea;padding:14px}
.ts-canvas-panel.active{border-color:#f4b400;box-shadow:0 0 0 3px rgba(255,212,0,.22), inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px rgba(15,23,42,.08)}
.ts-canvas-panel canvas{max-height:720px}
.ts-canvas-panel.sleeve canvas{max-height:460px}
@media (max-width:980px){.ts-canvas-grid.b2b{grid-template-columns:1fr}.ts-canvas-panel canvas{max-height:650px}}
/* 20260825 exact shirt-image mockups */
.ts-canvas-panel.sleeve canvas{max-height:520px}.ts-canvas-panel canvas{background:linear-gradient(180deg,#f8fafc 0%,#e7edf3 100%)}