/* Local optional swatch picker. The surrounding option hero owns its placement. */
#studio-editor-form .builder-option-swatch-picker { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; }
#studio-editor-form .builder-option-swatch-picker [hidden] { display: none !important; }
#studio-editor-form .builder-option-swatch-picker .builder-option-swatch-trigger { display: grid; place-items: center; width: 36px; min-width: 36px; height: 36px; padding: 4px; border: 1px solid #d4dbea; border-radius: 50%; background: #fff; cursor: pointer; }
#studio-editor-form .builder-option-swatch-trigger > span { width: 26px; height: 26px; border-radius: 50%; background: var(--swatch-color, #9aa3ad); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); }
#studio-editor-form .builder-option-swatch-trigger.is-unset > span { background: linear-gradient(135deg, transparent 46%, #b4bccb 47%, #b4bccb 53%, transparent 54%), #f4f6fa; }
#studio-editor-form .builder-option-swatch-picker button:focus-visible, #studio-editor-form .builder-option-swatch-picker input:focus-visible, #studio-editor-form .builder-option-swatch-square:focus-visible { outline: 2px solid #5064ff; outline-offset: 3px; }
#studio-editor-form .builder-option-swatch-popover { position: fixed; z-index: 90; top: calc(100% + 8px); left: 0; width: min(294px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; box-sizing: border-box; padding: 14px; border: 1px solid #d8dfee; border-radius: 14px; background: #fff; box-shadow: 0 12px 36px rgb(32 44 80 / 18%); color: #243049; }
#studio-editor-form .builder-option-swatch-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
#studio-editor-form .builder-option-swatch-popover > header strong { font-size: 14px; }
#studio-editor-form .builder-option-swatch-popover > header button { width: 28px; height: 28px; padding: 0; border: 1px solid #d8dfee; border-radius: 7px; background: #fff; color: #53617a; font-size: 19px; cursor: pointer; }
#studio-editor-form .builder-option-swatch-square { position: relative; width: 100%; height: 148px; border-radius: 8px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(var(--swatch-hue, 0) 100% 50%); cursor: crosshair; touch-action: none; }
#studio-editor-form .builder-option-swatch-square > span { position: absolute; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 30%); transform: translate(-50%, -50%); pointer-events: none; }
#studio-editor-form .builder-option-swatch-picker .builder-option-swatch-hue { display: block; margin: 14px 0; }
#studio-editor-form .builder-option-swatch-hue input[type="range"] { display: block; appearance: none; width: 100%; height: 12px; min-height: 12px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; }
#studio-editor-form .builder-option-swatch-hue input::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px #8a94a8; }
#studio-editor-form .builder-option-swatch-hue input::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px #8a94a8; }
#studio-editor-form .builder-option-swatch-picker .builder-option-swatch-values { display: grid; grid-template-columns: minmax(82px, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 6px; }
#studio-editor-form .builder-option-swatch-picker .builder-option-swatch-values label { display: grid; gap: 5px; margin: 0; min-width: 0; font-size: 11px; color: #69758d; }
#studio-editor-form .builder-option-swatch-picker .builder-option-swatch-values input { box-sizing: border-box; width: 100%; min-width: 0; height: 34px; min-height: 34px; padding: 5px 6px; border: 1px solid #d8dfee; border-radius: 7px; background: #fff; color: #243049; font-size: 12px; }
#studio-editor-form .builder-option-swatch-picker input[aria-invalid="true"] { border-color: #bd462a; }
#studio-editor-form .builder-option-swatch-picker .builder-option-swatch-error { margin: 9px 0 0; font-size: 12px; line-height: 1.4; color: #a83d24; }
#studio-editor-form .builder-option-swatch-popover > footer { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
#studio-editor-form .builder-option-swatch-popover > footer > span { flex: 1; }
#studio-editor-form .builder-option-swatch-popover > footer button { min-width: 0; min-height: 32px; height: auto; padding: 7px 8px; font-size: 11px; line-height: 1.3; }
#studio-editor-form .builder-option-swatch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }