/* Only B1 design choices and the color picker. Original business controls stay in place. */
.b1-preview [data-help-first]{grid-template-columns:1.4fr 1fr;gap:10px;align-items:center}
.b1-preview [data-help-first] button,#b1-color-trigger,.b1-palette-close,.b1-choice-panel [data-color]{touch-action:manipulation;user-select:none}
.b1-preview [data-help-first] .b1-button{min-height:54px;border-radius:14px;transition:background-color 140ms ease,border-color 140ms ease,transform 120ms ease;box-shadow:none}
.b1-preview [data-help-first] [data-mode=help]{font-weight:700}
.b1-preview [data-help-first] [data-mode=help][aria-pressed=true]{background:#e8eeE7;border-color:#63745f;box-shadow:inset 0 0 0 .5px #63745f}
.b1-preview [data-help-first] [data-mode=self]{background:transparent;border-color:#dce1d8;color:#677061;font-size:14px;font-weight:500}
.b1-preview [data-help-first] [data-mode=self][aria-pressed=true]{background:#f3f5f0;color:#28362c;border-color:#8b9984;box-shadow:none}
.b1-preview [data-help-first] .b1-button:active{transform:scale(.98)}
.b1-preview #minimal-self{padding:16px 18px;font-size:14px}
.b1-preview #minimal-self>p{margin:0 0 12px}
.b1-preview #b1-open-design{font-size:14px;min-height:44px}
.b1-preview .b1-color-entry{margin:22px 0 24px}
.b1-picker-label{display:block;font:600 15px/1.5 var(--b1-font);margin-bottom:10px;color:var(--b1-ink)}
.b1-preview #b1-color-trigger{display:flex;width:100%;min-height:78px;align-items:center;gap:14px;border:1px solid #dce0d6;border-radius:18px;background:#fafbf7;color:#24312a;padding:12px 16px;text-align:left;cursor:pointer;font:inherit;transition:background-color 140ms ease,border-color 140ms ease,box-shadow 180ms ease,transform 120ms ease;-webkit-tap-highlight-color:transparent}
.b1-preview #b1-color-trigger[aria-expanded=true]{border-color:#8a9982;background:#f3f6ef;box-shadow:0 0 0 3px #84977512}
.b1-preview #b1-color-trigger:active{transform:scale(.989)}
.b1-preview #b1-color-trigger:disabled{opacity:.65;cursor:default}
#b1-chosen-shirt{display:block;object-fit:contain;width:48px;height:48px;flex:0 0 48px}
.b1-chosen-copy{display:grid;gap:2px;min-width:0}
#b1-chosen-name{font-size:16px;font-weight:650;line-height:1.4}
#b1-color-count{font-size:12px;color:#768170;line-height:1.4}
.b1-change-label{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:14px;color:#526149}
.b1-change-label svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform 180ms ease}
[aria-expanded=true] .b1-change-label svg{transform:rotate(180deg)}
.b1-choice-panel{position:fixed;inset:auto;margin:0;padding:0;border:1px solid #dce1d6;border-radius:24px;width:min(490px,calc(100vw - 32px));max-width:none;max-height:none;background:#fffcf7;color:#26322c;box-shadow:0 20px 64px #23302924,0 4px 14px #2330290c;font:14px/1.5 var(--b1-font,system-ui);overflow:hidden;z-index:1100;opacity:0;transform:translateY(8px) scale(.97);transform-origin:var(--picker-origin,top left);transition:transform 200ms cubic-bezier(.23,1,.32,1),opacity 140ms ease-out}
.b1-choice-panel[open]{display:flex;flex-direction:column}
.b1-choice-panel[data-state=open]{opacity:1;transform:translateY(0) scale(1)}
.b1-choice-panel[data-state=closing]{pointer-events:none;transition-duration:140ms;opacity:0}
.b1-palette-handle{display:none}
.b1-palette-header{display:flex;align-items:center;gap:12px;min-height:84px;padding:16px 20px 12px;border-bottom:1px solid #eceee6;flex-shrink:0}
.b1-palette-copy{flex:1;min-width:0}
.b1-palette-title{font-size:18px;line-height:1.4;letter-spacing:-.02em;margin:0;font-weight:700;color:#253329}
.b1-palette-meta{display:block;color:#7b8575;font-size:12px;margin-top:3px}
#b1-palette-preview{width:52px;height:52px;object-fit:contain;flex-shrink:0}
.b1-palette-close{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:#f0f2eb;color:#607057;border:0;display:grid;place-items:center;padding:0;cursor:pointer}
.b1-palette-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}
.b1-choice-panel #color-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bdc6b5 transparent;max-height:none;min-height:0;padding:14px 18px 18px;margin:0;touch-action:pan-y;flex:1;align-content:start;scroll-padding:12px}
.b1-choice-panel #color-options .b1-color{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:0;min-height:101px;padding:8px 3px 7px;border:1px solid #e4e7de;border-radius:14px;background:#f5f6f0;box-shadow:none;color:#475240;cursor:pointer;font:13px/1.25 var(--b1-font,system-ui);transition:transform 120ms ease,border-color 120ms ease,background-color 120ms ease;-webkit-tap-highlight-color:transparent}
.b1-choice-panel #color-options .b1-color img{width:64px;height:53px;object-fit:contain;display:block;margin:0 0 5px}
.b1-choice-panel #color-options .b1-color small{font-size:10px;color:#8b9384;margin-top:3px;line-height:1.2}
.b1-choice-panel #color-options .b1-color[aria-pressed=true]{border-color:#77916f;background:#edf2e8;box-shadow:inset 0 0 0 1px #77916f}
.b1-choice-panel #color-options .b1-color[aria-pressed=true]:after{content:'✓';position:absolute;right:5px;top:5px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#667f5e;color:white;font:11px/1 system-ui}
.b1-choice-panel #color-options .b1-color:active{transform:scale(.96)}
.b1-choice-panel :is(button):focus-visible,.b1-preview #b1-color-trigger:focus-visible{outline:3px solid #748769;outline-offset:3px}
.b1-palette-hint{font-size:11px;color:#839078;margin:0;padding:0 20px 13px;flex-shrink:0}
.b1-choice-panel[data-input=keyboard]{transition:none}
@media(hover:hover) and (pointer:fine){
 .b1-preview #b1-color-trigger:hover{background:#f3f6ee;border-color:#aab69f}
 .b1-choice-panel #color-options .b1-color:hover{background:#edf1e7;border-color:#a2b294;transform:translateY(-2px)}
 .b1-palette-close:hover{background:#e8eee1}
}
@media(max-width:800px){
 .b1-preview [data-help-first]{grid-template-columns:1.4fr 1fr;gap:8px}
 .b1-preview [data-help-first] .b1-button{font-size:14px;padding-inline:6px;min-height:52px}
 .b1-preview [data-help-first] [data-mode=self]{font-size:13px}
 .b1-preview #b1-color-trigger{min-height:76px;padding:12px 14px;border-radius:16px}
 .b1-choice-panel{inset:auto 0 0!important;width:100%;max-height:min(76dvh,710px)!important;height:auto!important;border:1px solid #dfe3d8;border-bottom:0;border-radius:27px 27px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);transform:translate3d(0,calc(100% + 24px),0);transition:transform 260ms cubic-bezier(.32,.72,0,1),opacity 180ms ease;opacity:1;box-shadow:0 -12px 56px #1f302326}
 .b1-choice-panel[data-state=open]{transform:translate3d(0,var(--b1-drag-y,0px),0)}
 .b1-choice-panel[data-state=closing]{transform:translate3d(0,calc(100% + 24px),0);transition-duration:200ms;opacity:1}
 .b1-choice-panel::backdrop{background:rgb(26 36 25 / 0);transition:background-color 180ms ease}
 .b1-choice-panel[data-state=open]::backdrop{background:rgb(26 36 25 / .25)}
 .b1-palette-handle{display:flex;align-items:center;justify-content:center;height:27px;min-height:27px;touch-action:none;cursor:grab}
 .b1-palette-handle:before{content:'';width:36px;height:4px;border-radius:5px;background:#ced5c6}
 .b1-palette-header{padding:0 17px 12px;min-height:69px}
 .b1-choice-panel #color-options{gap:8px;padding:13px 14px 16px}
 .b1-choice-panel #color-options .b1-color{min-height:89px;font-size:11px;border-radius:12px;padding:6px 2px}
 .b1-choice-panel #color-options .b1-color img{width:51px;height:44px;margin-bottom:4px}
 .b1-palette-hint{padding:0 17px 12px}
}
/* Approved three-garment customer picker: larger garments, lighter cells, same actions. */
#b1-color-panel[data-large-garment=true] {background:#fafaf8}
#b1-color-panel[data-large-garment=true] #color-options {grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;gap:14px 10px;padding:16px}
#b1-color-panel[data-large-garment=true] #color-options .b1-color {justify-content:flex-start;flex-basis:auto;height:auto;min-height:min-content;padding:6px 4px 10px;border:1px solid transparent;border-radius:8px;background:transparent;font-size:15px;line-height:1.4}
#b1-color-panel[data-large-garment=true] #color-options .b1-color img {width:100%;height:auto;aspect-ratio:1;object-fit:contain;margin:0 0 4px;mix-blend-mode:multiply}
#b1-color-panel[data-large-garment=true] #color-options .b1-color small {font-size:12px;line-height:1.25;margin-top:1px;color:#727b70}
#b1-color-panel[data-large-garment=true] #color-options .b1-color[aria-pressed=true] {background:#eef2e9;border-color:#718368;box-shadow:none}
#b1-color-panel[data-large-garment=true] #color-options .b1-color[aria-pressed=true]:after {width:20px;height:20px;font-size:13px;right:6px;top:6px}
@media(hover:hover) and (pointer:fine) {
 #b1-color-panel[data-large-garment=true] #color-options .b1-color:hover {background:#f0f2ec;border-color:#b3beab;transform:none}
}
@media(max-width:800px) {
 #b1-color-panel[data-large-garment=true] #color-options {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 6px;padding:10px 12px 16px}
 #b1-color-panel[data-large-garment=true] #color-options .b1-color {padding:4px 2px 8px;font-size:14px}
 #b1-color-panel[data-large-garment=true] #color-options .b1-color small {font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .b1-choice-panel,.b1-choice-panel::backdrop,.b1-choice-panel button,.b1-preview #b1-color-trigger,.b1-preview [data-help-first] .b1-button,.b1-change-label svg{transition:none!important}
 .b1-choice-panel[data-state=open]{transform:none}
 .b1-choice-panel #color-options .b1-color:hover{transform:none}
}