/* Shared layout rules are last so the real header, including admin tools, fits. */
.jersey-composer{margin:12px 0 24px}
.composer-current{padding:12px;background:#f3f6f8;border:1px solid var(--line);border-radius:8px;margin:14px 0}
.composer-current>strong{display:block;font-size:.875rem;margin-bottom:10px}
.composer-current-grid{display:flex;gap:10px;justify-content:center}
.composer-current figure{margin:0;flex:1;min-width:0;text-align:center}
.composer-current img,.composer-current canvas,.composer-current-swatch{height:110px;width:100%;object-fit:contain;border-radius:4px;background:white}
.composer-current-swatch{display:grid;place-items:center;font-size:.875rem;color:var(--muted);border:1px solid var(--line);box-sizing:border-box}
.composer-current figcaption{font-size:.875rem;margin-top:6px}
.composer-current-base .composer-current-swatch{height:38px}
.composer-copy>label{display:grid;gap:8px;font-size:.875rem;margin-top:14px}
.composer-copy select{width:100%;padding:12px;border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink);font:inherit}
.composer-copy>summary{font-size:.875rem}
.composer-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.composer-areas button,.composer-methods button,.composer-swatches button{min-height:44px;border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink);padding:9px 6px;font-size:.875rem;font-weight:600}
.composer-areas button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.composer-methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;background:#edf1f4;border-radius:8px;margin:18px 0 14px}
.composer-methods button{border-color:transparent;background:transparent}
.composer-methods button[aria-pressed=true]{background:white;border-color:#cbd4dd;box-shadow:0 1px 3px #111c2c12}
.composer-form{margin:0}.composer-form [hidden],.jersey-composer [hidden]{display:none!important}
.composer-ai.panel-ai-host{padding:0;border:0;margin:0}
.jersey-composer .ai-section{padding:0!important;margin:0!important;border:0}
.jersey-composer .ai-section>.section-heading,.jersey-composer #aiExample,.jersey-composer .ai-target-note,.jersey-composer [data-ai=note],.jersey-composer .ai-section .flow-details:has(.zone-scope),.jersey-composer .ai-section .flow-details:has(#artControls){display:none!important}
.jersey-composer #aiPrompt{min-height:110px;font-size:1rem;line-height:1.5}
.jersey-composer #zonePlanHeading,.jersey-composer #zoneReviewHelp,.jersey-composer #zoneSummary,.jersey-composer #zoneCost{display:none}
.jersey-composer #zonePlan>.flow-details{border:0;margin:6px 0;padding:6px 0}
.composer-sleeve{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:.875rem}
.composer-sleeve select,.composer-image-adjust select{padding:10px;border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink);font:inherit;flex:1;min-width:0}
.composer-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.composer-swatches button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:1px}
.composer-color>label{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;gap:12px;margin:16px 0}
.composer-color input[type=color]{width:100px;height:40px;padding:3px;border:1px solid var(--line);background:white;border-radius:6px}
.composer-upload{display:grid;gap:6px;padding:18px;border:1px dashed #a8b6c1;border-radius:8px;cursor:pointer;background:#f6f8f9}
.composer-upload strong{font-size:1rem}.composer-upload small{color:var(--muted);font-size:.875rem}.composer-upload input{max-width:100%;min-width:0;font-size:.875rem;margin-top:10px}
.composer-image-preview{display:block;max-width:100%;width:auto;height:120px;object-fit:contain;margin:14px auto}
.composer-form>.primary-button{margin-top:16px}.composer-form>.help:empty{display:none}
.composer-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}.composer-actions button{font-size:.875rem;line-height:1.5}
.composer-image-adjust label:not(.panel-range){display:flex;align-items:center;gap:12px;font-size:.875rem;margin:12px 0}
#flow-step-0>.control-section{display:none}#designLibrary>h3{font-size:1rem;margin:0 0 12px}#designLibrary>p.help:not([role=status]){display:none}
.jersey-composer button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
#teamIdentity>.logo-palette{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;margin:12px 0;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-control,10px);background:var(--paper,#fff);color:var(--ink);font:inherit;font-size:.875rem;font-weight:600;line-height:1.4;text-align:center;box-shadow:none;appearance:none}
#teamIdentity>.logo-palette:hover{border-color:var(--ink);background:var(--surface)}
#teamIdentity>.logo-palette[aria-pressed=true]{border-color:var(--ink);background:color-mix(in srgb,var(--lime) 20%,var(--paper,#fff))}
.logo-palette-swatches{display:flex;flex:0 0 auto;gap:3px}
.logo-palette-swatches>i{display:block;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px #111c2c26}
.topbar .brand-logo{max-width:none!important}.topbar .brand-motion{flex-shrink:0}.studio-footer .admin-link{margin-left:auto}.mobile-step-picker{display:none}.lettering-presets .lettering-preset[hidden]{display:none!important}.font-browse{grid-column:1/-1}.review-player-picker{display:grid;gap:8px;margin:12px 0;font-size:13px}.review-player-picker select,.mobile-step-picker select{width:100%;padding:10px;border:1px solid #cbd4dd;border-radius:6px;background:white;color:#142131;font:inherit}.team-pricing{margin:18px 0}.team-pricing summary{font-weight:600}.team-pricing p{font-size:13px}.panel-editor-dialog:not(.full-generation) .panel-ai-host .flow-details{display:none!important}
@media(max-width:740px){
.topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px 38px;height:100px!important;min-height:0;padding:8px 12px 2px!important;gap:4px 8px!important;align-content:start}.topbar .brand{grid-column:1;grid-row:1;overflow:hidden}.topbar .brand-motion{width:160px!important;height:40px!important}.topbar .brand-logo{width:160px!important}.topbar .header-end{grid-column:2;grid-row:1;margin:0;height:44px;gap:7px}.topbar .products{grid-column:1/-1;grid-row:2;order:initial;margin:0!important;height:38px!important;width:100%;align-self:stretch}.topbar .products button{font-size:12px;padding-top:0}.topbar.is-compact{height:84px!important;grid-template-rows:38px 30px;padding-top:4px!important;gap:2px 8px!important}.topbar.is-compact .brand-motion{width:37px!important;height:40px!important}.topbar.is-compact .products{height:30px!important}.topbar.is-compact .header-end{height:38px}.studio-header{padding:14px 16px}.studio-header h1{font-size:27px}.draft-status{max-width:105px;font-size:10px}.flow-nav{display:none!important}.mobile-step-picker{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin:6px 0 16px;font-size:12px}.control-heading .step-number{display:none}.preview-panel #jerseyStage{height:100px!important}.preview-panel .canvas-wrap,.preview-panel .canvas-wrap:has(#jerseyStage:not([hidden])){min-height:100px!important}.preview-panel #garment{max-height:100px}.preview-panel .flow-camera button{padding:7px 14px}.preview-panel.is-collapsed{min-height:34px!important}.preview-collapse{min-height:34px}.studio-footer{flex-wrap:wrap;gap:14px}.review-image-pair img{aspect-ratio:auto}.flow-title{scroll-margin-top:calc(var(--sticky-header-height) + 40px)}}
@media(max-width:360px){.topbar .brand-motion{width:140px!important;height:35px!important}.topbar .brand-logo{width:140px!important}.topbar.is-compact .brand-motion{width:32px!important;height:35px!important}.topbar .products button{font-size:11px}}

@media(max-width:740px){.preview-panel.is-collapsed{position:relative!important;top:auto!important}}

/* A permanent compact stage keeps edits and their result in view together. */
.mobile-preview-expand{display:none}
@media(max-width:740px){
 :root{--mobile-preview-height:156px;--designer-top:calc(var(--sticky-header-height) + var(--mobile-preview-height))}
 .studio-header{margin-top:var(--mobile-preview-height)}
 .preview-panel.mobile-live{display:grid!important;grid-template-columns:minmax(0,1fr) 82px;grid-template-rows:minmax(0,1fr) 34px;gap:4px 10px;position:fixed!important;top:var(--sticky-header-height)!important;left:0;right:0;width:100%;height:var(--mobile-preview-height);min-height:0!important;padding:8px 12px;z-index:25;border:0;border-bottom:1px solid #c9d3dc;box-shadow:0 3px 10px #14243812}
 .mobile-live .preview-top,.mobile-live .preview-bottom,.mobile-live .preview-collapse,.mobile-live .watermark{display:none!important}
 .preview-panel.mobile-live .canvas-wrap{grid-column:1;grid-row:1/-1;width:100%;height:100%;min-height:0!important;padding:0}
 .preview-panel.mobile-live #jerseyStage{height:100%!important;width:100%}
 .preview-panel.mobile-live #garment,.preview-panel.mobile-live #flatCanvas{height:100%;max-height:100%;width:100%;object-fit:contain}
 .mobile-live .flow-camera:not([hidden]),.mobile-live #views:not([hidden]){grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-self:stretch;gap:3px;margin:0;padding:0;background:none;border:0;border-radius:0}
 .preview-panel.mobile-live .flow-camera button,.mobile-live #views button{flex:1;min-height:30px;padding:3px 6px;font-size:11px;line-height:1;border-radius:5px;border:1px solid #c8d2dc;background:#fff;color:var(--ink)}
 .mobile-live .flow-camera button[aria-pressed=true],.mobile-live #views button.active{background:#e3eecf;border-color:#9cad7a}
 .mobile-live #views:not([hidden]){align-self:center}.mobile-live #views button{flex:none;min-height:34px}
 .mobile-preview-expand{display:block;grid-column:2;grid-row:2;border:1px solid #bdca9a;border-radius:5px;background:var(--lime);color:var(--ink);font-size:11px;font-weight:700;padding:4px;min-height:32px}
 .preview-panel.mobile-expanded{height:min(55svh,420px);grid-template-rows:minmax(0,1fr) 36px;box-shadow:0 10px 28px #14243833}
 .preview-panel.mobile-expanded .canvas-wrap{grid-column:1/-1;grid-row:1}
 .mobile-live.mobile-expanded .flow-camera:not([hidden]),.mobile-live.mobile-expanded #views:not([hidden]){grid-column:1;grid-row:2;flex-direction:row;align-self:stretch}
 .mobile-live.mobile-expanded .flow-camera button,.mobile-live.mobile-expanded #views button{min-height:34px}
 .mobile-live .asset-status{font-size:11px;margin:0 10px}
 html{scroll-padding-top:calc(var(--designer-top) + 12px)}
 .controls button,.controls input,.controls textarea,.controls select,.controls summary,.flow-title,.order-workspace .controls button,.order-workspace .controls input,.order-workspace .controls select,.order-workspace .controls summary{scroll-margin-top:calc(var(--designer-top) + 12px)}
 .mobile-preview-short{--mobile-preview-height:104px}
 .mobile-preview-short .preview-panel.mobile-live{grid-template-columns:minmax(0,1fr) 128px;grid-template-rows:minmax(0,1fr) 28px;gap:3px 8px;padding:5px 10px}
 .mobile-preview-short .mobile-live .flow-camera:not([hidden]),.mobile-preview-short .mobile-live #views:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:3px}
 .mobile-preview-short .preview-panel.mobile-live .flow-camera button,.mobile-preview-short .mobile-live #views button{min-height:26px}
 .mobile-preview-short .mobile-preview-expand{min-height:26px}
}

.mobile-menu-toggle{display:none}
@media(max-width:740px){
 .topbar{height:60px!important;grid-template-rows:44px;gap:0 8px!important;padding:8px 12px!important;align-content:center}
 .topbar.is-compact{height:56px!important;grid-template-rows:44px;padding:6px 12px!important;gap:0 8px!important}
 .topbar .brand-motion{width:140px!important;height:36px!important}.topbar .brand-logo{width:140px!important}
 .topbar.is-compact .brand-motion{width:32px!important;height:36px!important}
 .topbar .header-end,.topbar.is-compact .header-end{height:44px;gap:6px}
 .topbar .cart-button{font-size:12px;gap:5px}.topbar .language{padding:8px}
 .mobile-menu-toggle{display:grid;place-items:center;width:40px;height:40px;padding:7px;border:1px solid #46505c;border-radius:4px;background:none;color:white}
 .mobile-menu-toggle[aria-expanded=true]{background:#314252;border-color:#d4fa55}
 .topbar .products,.topbar.is-compact .products{display:none;position:absolute;top:100%;left:0;right:0;height:auto!important;width:100%;padding:8px 12px 12px;margin:0!important;background:var(--ink);box-shadow:0 8px 16px #14243835;overflow:visible;border-top:1px solid #334253}
 .topbar.menu-open .products{display:flex;flex-direction:column;gap:4px;align-items:stretch}
 .topbar .products button{flex:none;min-height:44px;text-align:left;padding:10px 12px!important;border:1px solid transparent;border-radius:5px;font-size:14px}
 .topbar .products button.active{border-color:#d4fa55;background:#26372d}
}
@media(max-width:360px){.topbar .brand-motion{width:104px!important;height:28px!important}.topbar .brand-logo{width:104px!important}.topbar.is-compact .brand-motion{width:24px!important;height:28px!important}}

@media(min-width:741px){.flow-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.flow-nav button{font-size:12px;padding:10px 8px}}

.control-heading{align-items:center;gap:10px;flex-wrap:wrap}.control-heading #reset{margin:0 0 0 auto;color:#9b3529;font-size:11px;min-height:36px;padding:6px 0;text-decoration:underline}.control-heading .eyebrow{margin-bottom:0}

.reset-order-dialog{max-width:480px;width:calc(100% - 32px);border:1px solid #d5dce3;border-radius:12px;padding:24px}.reset-order-dialog h2{margin:0 0 14px;font-size:22px}.reset-order-dialog p{font-size:14px;line-height:1.6}.reset-order-actions{display:flex;gap:12px;margin-top:22px}.reset-order-actions button{flex:1;margin:0}.reset-order-actions [data-confirm]{background:#a42f25}.reset-order-error:empty{display:none}.reset-order-error{color:#a42f25}

/* Team name comes first, with logo upload on its own step. */
.studio-header,.control-heading,.mobile-step-picker{display:none!important}
.controls>.draft-status{max-width:none;text-align:left;color:#a42f25}
.controls>.draft-status[hidden]{display:none}
body[data-designer-step="0"] .flow-title{font-size:26px;margin-bottom:18px}
#flow-step-team>.field{margin:0}
#flow-step-team>.field>label{display:block;margin-bottom:8px}
#flow-step-team .team-colors-title{font-size:14px;font-weight:700;margin:24px 0 12px}
#flow-step-team #team{padding:16px;font-size:18px}
#teamIdentity>.upload{margin:0 0 14px;padding:28px 16px;border:2px dashed var(--line);border-radius:10px;background:#f8faf5}
#teamIdentity>.upload:hover,#teamIdentity>.upload:focus-within{border-color:var(--ink);background:#f1f6e6}
#teamIdentity>.upload strong{font-size:18px}
#teamIdentity>.logo-create{margin:12px 0 0;padding:0;border:0}
#teamIdentity>.logo-create>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 18px;box-sizing:border-box;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:white;list-style:none;transition:background .18s,border-color .18s}
#teamIdentity>.logo-create>summary::-webkit-details-marker{display:none}
#teamIdentity>.logo-create>summary:hover{background:#23364a;border-color:#23364a}
#teamIdentity>.logo-create>summary:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.logo-create-caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;line-height:1.4}
.logo-create-hint{font-size:.875rem;font-weight:400;color:#dce3e9}
.logo-create-caption strong{font-size:1rem;font-weight:700;color:var(--lime)}
.logo-create-icon{position:relative;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--lime)}
.logo-create-icon::before,.logo-create-icon::after{content:'';position:absolute;inset:11px 6px auto;height:2px;background:var(--ink);border-radius:1px}
.logo-create-icon::after{transform:rotate(90deg);transition:transform .18s}
.logo-create[open] .logo-create-icon::after{transform:rotate(0deg)}
#teamIdentity>.logo-create[open]>summary{margin-bottom:18px}
#teamIdentity>.logo-create>label{display:block;margin-bottom:8px;font-size:.875rem;font-weight:600}
#teamIdentity>.logo-create>textarea{box-sizing:border-box;width:100%;padding:12px;border:1px solid var(--line);border-radius:6px;color:var(--ink);font:inherit;font-size:1rem;line-height:1.5;resize:vertical}
#teamIdentity>.logo-create>button{margin-top:12px}
@media(prefers-reduced-motion:reduce){#teamIdentity>.logo-create>summary,.logo-create-icon::after{transition:none}}
#teamIdentity>.identity-logo-preview{margin:0 auto 10px}
.studio-footer #reset{margin-left:auto;color:#9b3529;font-size:12px;min-height:44px}
.preview-panel .breadcrumb-strip{display:flex!important;grid-template-columns:none;gap:0;flex:none;width:100%;margin:0;padding:0 8px;background:var(--lime);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;align-items:center;min-height:44px;border-top:1px solid #a9ce39}
.preview-panel .breadcrumb-strip button{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;border:0;border-radius:0;background:transparent;color:var(--ink);padding:10px 6px;min-height:44px;font-size:12px;line-height:1.2;opacity:.7}
.preview-panel .breadcrumb-strip button:not(:last-child)::after{content:'›';font-size:17px;font-weight:400;opacity:.5;margin-left:4px}
.preview-panel .breadcrumb-strip button.active{background:transparent;color:var(--ink);font-weight:800;opacity:1;text-decoration:underline;text-underline-offset:5px}
.preview-panel .breadcrumb-strip button.complete{opacity:1}
.preview-panel .breadcrumb-strip button:hover{opacity:1;background:#ffffff30}
.preview-panel .breadcrumb-strip button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media(max-width:740px){
 :root{--mobile-preview-height:200px}
 .studio{margin-top:var(--mobile-preview-height)}
 .controls,body[data-designer-step="0"] .controls{padding-top:20px}
 .preview-panel.mobile-live{grid-template-rows:minmax(0,1fr) 34px 44px;padding-bottom:0;row-gap:4px}
 .preview-panel.mobile-live .canvas-wrap{grid-row:1/3}
 .preview-panel.mobile-live .breadcrumb-strip{grid-column:1/-1;grid-row:3;align-self:stretch;width:calc(100% + 24px);margin-left:-12px;min-width:0}
 .preview-panel.mobile-expanded{grid-template-rows:minmax(0,1fr) 36px 44px}
 .preview-panel.mobile-expanded .canvas-wrap{grid-row:1}
 .mobile-preview-short{--mobile-preview-height:148px}
 .mobile-preview-short .preview-panel.mobile-live{grid-template-rows:minmax(0,1fr) 28px 44px;padding-bottom:0}
 .mobile-preview-short .preview-panel.mobile-live .breadcrumb-strip{width:calc(100% + 20px);margin-left:-10px}
}

.preview-panel .breadcrumb-strip::-webkit-scrollbar{display:none}
@media(min-width:741px){.flow-title,#teamIdentity>.upload{scroll-margin-top:calc(var(--sticky-header-height) + 16px)}}

.artwork-history{padding:18px 0;border-bottom:1px solid var(--line);margin:18px 0}
.artwork-history[hidden]{display:none}
.artwork-history h3{font-size:17px;margin:0 0 8px}
.artwork-history>.help{margin:0 0 12px;font-size:12px}
.artwork-history-grid{display:flex;gap:10px;overflow-x:auto;padding:3px 2px 10px;scroll-snap-type:x proximity}
.artwork-history-card{flex:0 0 142px;min-width:0;display:flex;flex-direction:column;gap:7px;align-items:stretch;text-align:left;border:1px solid #d5dde3;border-radius:8px;background:white;padding:8px;scroll-snap-align:start}
.artwork-history-card img{width:100%;height:116px;object-fit:contain;background:#edf1f4;border-radius:5px}
.artwork-history-card[aria-pressed=true]{border-color:#829a32;box-shadow:inset 0 0 0 1px #829a32;background:#f6faed}
.artwork-history-card strong{font-size:12px}
.saved-artwork-prompt{font-size:11px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px}
.saved-artwork-action{font-size:11px;font-weight:700;color:#3d571b}
.artwork-history-status{color:#943b22}

.preview-panel .breadcrumb-strip button{gap:5px}
.breadcrumb-icon{width:16px;height:16px;flex:0 0 16px;display:block}
.breadcrumb-label{display:block}
@media(max-width:740px){.breadcrumb-icon{width:14px;height:14px;flex-basis:14px}}

/* On scroll, the badge floats over the designer and the menu returns at the top. */
.topbar{background:transparent;isolation:isolate;transition:height .42s cubic-bezier(.2,.8,.2,1),padding .42s ease;pointer-events:none}
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);opacity:1;transform:translateY(0) scaleY(1);transform-origin:top;transition:opacity .42s ease,transform .48s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.topbar .brand,.topbar .products,.topbar .header-end{pointer-events:auto}
.topbar .products,.topbar .header-end{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .22s ease,transform .3s ease,visibility 0s}
.topbar.is-compact{background:transparent;box-shadow:none}
.topbar.is-compact::before{opacity:0;transform:translateY(-16px) scaleY(.7)}
.topbar.is-compact .products,.topbar.is-compact .header-end{opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .18s ease,transform .3s ease,visibility 0s .3s}
.topbar.is-compact .brand-motion{filter:drop-shadow(0 0 .7px #142438) drop-shadow(0 0 .7px #142438) drop-shadow(0 1px 2px #14243830)}
.preview-panel{transition:top .42s cubic-bezier(.2,.8,.2,1)}
@media(min-width:741px){.preview-top{transition:padding .42s ease}.brand-only-header .preview-top{padding-left:78px}}
@media(prefers-reduced-motion:reduce){.topbar::before,.topbar .products,.topbar .header-end,.preview-panel,.preview-top{transition:none!important}}

/* Keep every section visible; a scrolling strip made later steps look missing. */
.preview-panel .breadcrumb-strip{display:grid!important;grid-template-columns:repeat(var(--step-count,7),minmax(0,1fr));min-height:56px;padding:0;overflow:visible}
.preview-panel .breadcrumb-strip button{flex-direction:column;justify-content:center;gap:4px;min-width:0;min-height:56px;padding:6px 1px;font-size:11px;line-height:1.2;letter-spacing:-.15px;text-align:center}
.preview-panel .breadcrumb-strip button:not(:last-child)::after{display:none}
.preview-panel .breadcrumb-strip .breadcrumb-label{white-space:nowrap}
.preview-panel .breadcrumb-strip button.active{background:#ffffff35;text-underline-offset:3px}
@media(max-width:740px){
 :root{--mobile-preview-height:212px}
 .mobile-preview-short{--mobile-preview-height:160px}
 .preview-panel.mobile-live{grid-template-rows:minmax(0,1fr) 34px 56px}
 .preview-panel.mobile-expanded{grid-template-rows:minmax(0,1fr) 36px 56px}
 .mobile-preview-short .preview-panel.mobile-live{grid-template-rows:minmax(0,1fr) 28px 56px}
 .preview-panel.mobile-live .breadcrumb-strip{min-height:56px}
 .preview-panel .breadcrumb-strip button{font-size:clamp(9px,2.6vw,11px)}
 .preview-panel .breadcrumb-icon{width:16px;height:16px;flex-basis:16px}
}

/* Connected arrows show progress without check marks. */
.preview-panel .breadcrumb-strip{--breadcrumb-tip:8px;background:#edf0f3;border-top:0;overflow:hidden}
.preview-panel .breadcrumb-strip button{width:calc(100% + var(--breadcrumb-tip));height:56px;background:var(--ink);color:#fff;opacity:1;clip-path:polygon(0 0,calc(100% - var(--breadcrumb-tip) - 1px) 0,calc(100% - 1px) 50%,calc(100% - var(--breadcrumb-tip) - 1px) 100%,0 100%,var(--breadcrumb-tip) 50%);transition:background-color .2s ease,color .2s ease;text-decoration:none;position:relative}
.preview-panel .breadcrumb-strip button:first-child{clip-path:polygon(0 0,calc(100% - var(--breadcrumb-tip) - 1px) 0,calc(100% - 1px) 50%,calc(100% - var(--breadcrumb-tip) - 1px) 100%,0 100%)}
.preview-panel .breadcrumb-strip button:last-child{width:100%}
.preview-panel .breadcrumb-strip button.complete{background:var(--lime);color:var(--ink)}
.preview-panel .breadcrumb-strip button.active{background:var(--ink);color:#fff;font-weight:800;box-shadow:inset 0 -3px var(--lime)}
.preview-panel .breadcrumb-strip button.active .breadcrumb-label{text-decoration:underline;text-underline-offset:3px}
.preview-panel .breadcrumb-strip button:hover{background:#26384b;color:#fff}
.preview-panel .breadcrumb-strip button.complete:hover{background:#c5ee42;color:var(--ink)}
.preview-panel .breadcrumb-strip button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #fff}
.preview-panel .breadcrumb-strip button.complete:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
@media(max-width:740px){.preview-panel .breadcrumb-strip{--breadcrumb-tip:5px}}

/* Use one scroll offset and reserve both fixed bars in every designer layout. */
:root{--designer-actions-height:80px;--designer-keyboard-inset:0px;--designer-top:var(--sticky-header-height)}
html,body.order-workspace{scroll-padding-top:calc(var(--designer-top) + 16px);scroll-padding-bottom:calc(var(--designer-actions-height) + var(--designer-keyboard-inset) + 16px)}
.controls,.order-workspace .controls{padding-bottom:calc(var(--designer-actions-height) + var(--designer-keyboard-inset) + 24px)}
.studio-footer{padding-bottom:calc(var(--designer-actions-height) + var(--designer-keyboard-inset) + 24px)}
.flow-actions,.order-workspace .flow-actions{bottom:var(--designer-keyboard-inset)}
.controls :is(button,input,textarea,select,summary,.flow-title,.upload),.order-workspace .controls :is(button,input,textarea,select,summary,.flow-title,.upload),.flow-title,#teamIdentity>.upload{scroll-margin-top:0;scroll-margin-bottom:0}
@media(max-width:740px){
 :root{--designer-top:calc(var(--sticky-header-height) + var(--designer-preview-height,var(--mobile-preview-height)))}
 .studio,.order-workspace .studio{margin-top:var(--designer-preview-height,var(--mobile-preview-height))}
}
/* One uniform workspace: the garment selector never changes the order step. */
.uniform-set{margin:0 0 20px}.uniform-toggle{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid #c6d6b4;background:#f4f8eb;border-radius:10px;font-size:14px;font-weight:650;cursor:pointer}.uniform-toggle input{width:20px;height:20px;accent-color:var(--ink);flex-shrink:0}.uniform-tabs{display:flex;background:#edf1f4;border-radius:8px;padding:4px;margin:16px 0;gap:4px}.uniform-tabs button{flex:1;padding:12px;background:transparent;border:0;border-radius:5px;font:inherit;font-size:15px}.uniform-tabs button[aria-pressed=true]{background:var(--ink);color:#fff;font-weight:700;box-shadow:inset 0 -3px var(--lime)}.editing-uniform-socks #flow-step-0>:not(#uniformSetup){display:none!important}.uniform-field{display:grid;gap:8px;font-size:14px;margin:14px 0}.uniform-field select,.roster-sock-tools select{width:100%;min-height:44px;padding:9px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit}.uniform-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.uniform-colors label{display:grid;gap:7px;font-size:14px}.uniform-colors input{width:100%;height:44px;border:1px solid var(--line);border-radius:5px;background:#fff;padding:3px}.uniform-style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.uniform-style-grid button{padding:4px;border:1px solid var(--line);border-radius:7px;background:white;min-width:0}.uniform-style-grid button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:-2px}.uniform-style-grid canvas{display:block;width:100%;height:auto;border-radius:4px}.uniform-style-grid span{display:block;font-size:13px;padding:7px 0}.uniform-sock-editor .composer-upload{margin-top:18px}.uniform-sock-editor .panel-range{margin:14px 0}.uniform-set [hidden],.uniform-socks-preview[hidden],.uniform-sock-review[hidden]{display:none!important}
.uniform-socks-preview{position:absolute;right:2%;bottom:8%;z-index:2;width:22%;max-width:140px;padding:4px;border:1px solid #ccd6df;border-radius:10px;background:#f0f4f7;color:var(--ink);cursor:pointer}.uniform-socks-preview canvas{display:block;width:100%;height:auto;aspect-ratio:9/10;object-fit:contain}.uniform-socks-preview span{font-size:13px;display:block;padding:4px}.uniform-sock-review{display:flex;gap:14px;align-items:center;background:#edf1f4;border-radius:9px;padding:12px;margin:16px 0}.uniform-sock-review canvas{width:95px;height:105px;object-fit:contain}.uniform-sock-review figcaption{font-size:15px;font-weight:650}.roster-sock-tools{display:flex;gap:10px;align-items:end;margin:16px 0}.roster-sock-tools label{flex:1;display:grid;gap:7px;font-size:14px}.roster-sock-tools button{width:auto;min-height:44px;margin:0}.team-input-table.with-socks th:nth-child(1){width:29%}.team-input-table.with-socks th:nth-child(2){width:14%}.team-input-table.with-socks th:nth-child(3){width:25%}.team-input-table.with-socks th:nth-child(4){width:25%}.team-input-table.with-socks th:nth-child(5){width:7%}.team-input-table.with-socks input,.team-input-table.with-socks select{font-size:14px}.sock-extras{margin-bottom:18px}.uniform-tabs button:focus-visible,.uniform-style-grid button:focus-visible,.uniform-socks-preview:focus-visible{outline:3px solid #6c8e12;outline-offset:3px}
@media(max-width:740px){.uniform-socks-preview{right:0;bottom:4%;width:24%;max-width:75px;padding:1px}.uniform-socks-preview span{font-size:11px;padding:1px}.team-input-table.with-socks,.team-input-table.with-socks tbody{display:block}.team-input-table.with-socks thead{display:none}.team-input-table.with-socks tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px;gap:8px;margin:12px 0;padding:12px 8px;border:1px solid var(--line);border-radius:8px}.team-input-table.with-socks td{display:block;min-width:0;padding:0!important}.team-input-table.with-socks td::before{content:attr(data-label);display:block;font-size:13px;margin-bottom:6px}.team-input-table.with-socks td:nth-child(3){grid-column:1;grid-row:2}.team-input-table.with-socks td:nth-child(4){grid-column:2;grid-row:2}.team-input-table.with-socks td:last-child{grid-column:3;grid-row:1/3;align-self:center}.team-input-table.with-socks input,.team-input-table.with-socks select{font-size:16px;padding:9px 5px}.roster-sock-tools{align-items:end}.roster-sock-tools button{font-size:14px;flex:0 0 auto}.uniform-toggle{padding:12px}.uniform-sock-editor .help{font-size:14px}}
.preview-panel.has-uniform-socks .canvas-wrap #jerseyStage{width:78%!important;margin-right:auto}.review-image-pair .uniform-sock-review{grid-column:1/-1;justify-content:center;margin:0;padding:8px;border-top:1px solid #d4dce3;border-radius:0}.review-image-pair .uniform-sock-review canvas{width:75px;height:84px}.uniform-size-guides{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 14px}.uniform-size-guides button{font-size:14px;margin:0;padding:4px 0}

/* Keep both the legacy canvas and untextured model out of the first paint. */
.canvas-wrap #previewLoader{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:20px;text-align:center;color:var(--navy,#102235);font-size:14px;pointer-events:none}
.canvas-wrap #previewRetry{pointer-events:auto}
.canvas-wrap[data-preview-state="ready"] #previewLoader{display:none}
.canvas-wrap[data-preview-state]:not([data-preview-state="ready"]) :is(#garment,#jerseyStage,.watermark){opacity:0!important;visibility:hidden;pointer-events:none}
.canvas-wrap[data-preview-state="ready"] :is(#garment,#jerseyStage){animation:preview-reveal .3s ease-out both}
.preview-spinner{width:28px;height:28px;border:3px solid #10223520;border-top-color:#b7ef00;border-radius:50%;animation:preview-spin .8s linear infinite}
.canvas-wrap[data-preview-state="error"] .preview-spinner{display:none}
@keyframes preview-spin{to{transform:rotate(360deg)}}
@keyframes preview-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.preview-spinner,.canvas-wrap[data-preview-state="ready"] :is(#garment,#jerseyStage){animation:none}}

.letter-color{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:14px}
.letter-team-colors{display:flex;flex-wrap:wrap;gap:8px;padding:3px}
.letter-team-colors button{width:38px;height:38px;min-height:38px;padding:0;border:2px solid #ccd2d9;border-radius:50%;box-shadow:inset 0 0 0 2px #fff;cursor:pointer}
.letter-team-colors button[aria-pressed="true"]{outline:2px solid #102235;outline-offset:2px}
.letter-team-colors button:focus-visible{outline:3px solid #76a000;outline-offset:3px}
.letter-color summary{font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.letter-color details input{margin-top:8px;width:100%;min-height:38px}

.sponsor-slot{border-top:1px solid var(--line);padding:16px 0;display:grid;gap:10px}.sponsor-slot img{max-width:120px;max-height:90px;object-fit:contain;background:#e8edf2;border-radius:6px}.sponsor-slot label,.captain-section label{display:grid;gap:6px;font-size:14px}.sponsor-slot output,.captain-section output{font-size:13px}.sponsor-section p,.captain-section p{font-size:14px;color:#526171}.captain-section{padding:18px 0;display:grid;gap:12px}.captain-section>label:first-child{display:flex;align-items:center;gap:10px}.captain-section input[type=checkbox]{width:20px;height:20px}.team-input-table.with-captain th{width:auto!important}.team-input-table.with-captain select{min-width:60px}
@media(max-width:740px){.team-input-table.with-captain,.team-input-table.with-captain tbody{display:block}.team-input-table.with-captain thead{display:none}.team-input-table.with-captain tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px;gap:8px;padding:12px 8px;border:1px solid var(--line);margin:12px 0;border-radius:8px}.team-input-table.with-captain td{display:block;padding:0!important;min-width:0}.team-input-table.with-captain td::before{content:attr(data-label);display:block;font-size:13px;margin-bottom:6px}.team-input-table.with-captain td:last-child{grid-column:3;grid-row:1/4}.team-input-table.with-captain td:nth-child(5):not(:last-child){grid-column:1;grid-row:3}.team-input-table.with-captain input,.team-input-table.with-captain select{width:100%;font-size:16px}}