.mitt-color-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:4px 0 8px;font-size:14px;line-height:1.7;color:#4f5c53}
.mitt-color-heading strong{font-weight:500;color:#181b19}
.mitt-color-heading small{font-size:13px;margin-left:auto;color:#686864}
.mitt-color-swatches{display:flex;flex-wrap:wrap;gap:4px;width:100%;min-width:0;overflow:visible}
.mitt-color-swatches .mitt-color-swatch{position:relative;display:grid;place-items:center;flex:0 0 44px;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:5px;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color 160ms,scale 160ms cubic-bezier(.3,1,.3,1)}
.mitt-color-swatches .mitt-color-fill{display:block;box-sizing:border-box;width:32px;height:32px;border:1px solid #181b1933;border-radius:2px;background:var(--swatch-color)}
.mitt-color-swatches .mitt-color-swatch[aria-checked=true]{border-color:#2f4937;background:#eef2e9}
.mitt-color-swatches .mitt-color-swatch[aria-checked=true]::after{content:'✓';position:absolute;right:1px;bottom:1px;display:grid;place-items:center;width:16px;height:16px;border:1px solid #2f4937;border-radius:50%;background:#fff;color:#2f4937;font:700 13px/1 sans-serif}
.mitt-color-swatches .mitt-color-swatch:focus-visible{outline:2px solid #2f4937;outline-offset:2px}
.mitt-color-swatches .mitt-color-swatch:active{scale:.97}
@media(hover:hover) and (pointer:fine){.mitt-color-swatches .mitt-color-swatch:hover{background:#eef2e9;border-color:#788e7c}}
@media(prefers-reduced-motion:reduce){.mitt-color-swatches .mitt-color-swatch{transition:none}.mitt-color-swatches .mitt-color-swatch:active{scale:1}}