.io-size-field{display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important;padding:2px 0!important;border-bottom:1px solid #e9edf1!important}
.io-size-label{flex:0 0 32px!important;line-height:24px!important}
.io-size-area{flex:1!important;width:auto!important;min-width:0!important}
.io-size-editor{min-height:24px!important;padding:0!important;border:0!important;border-radius:0!important;background:#fff!important;gap:4px!important;box-shadow:none!important}
.io-size-editor:focus-within{box-shadow:0 1px 0 #409eff!important}
.io-size-grid:empty{display:none!important}
.io-size-input{height:24px!important;min-height:24px!important;line-height:24px!important;padding:0!important}
.io-size-editor.io-size-invalid{box-shadow:0 1px 0 #f56c6c!important}
/* Keep labels readable once size chips expand the field. */
.io-size-field:has(.io-size-grid){align-items:flex-start!important}
@container(max-width:145px){
 .io-size-field:has(.io-size-grid){flex-direction:column!important;gap:3px!important}
 .io-size-field:has(.io-size-grid) .io-size-label{flex-basis:auto!important;line-height:16px!important}
 .io-size-field:has(.io-size-grid) .io-size-area{width:100%!important}
}