.color-field { position: relative; }
.color-dropdown { position: relative; }
.native-color-select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important; }
.color-dropdown-button { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.color-dropdown-button:hover, .color-dropdown-button:focus-visible { border-color: var(--green); outline: 3px solid rgba(13,103,72,.1); }
.filament-swatch { display: block; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--filament-color,#dde7ea); border: 1px solid rgba(0,0,0,.18); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.08); }
.filament-swatch.loading { background: linear-gradient(110deg,#e6eeef 30%,#f7fafa 50%,#e6eeef 70%); background-size: 200% 100%; }
.color-dropdown-copy { display: block; min-width: 0; flex: 1; }
.color-dropdown-copy b, .color-dropdown-copy small { display: block; }
.color-dropdown-copy b { font-size: 14px; line-height: 1.25; }
.color-dropdown-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.color-dropdown-arrow { font-size: 17px; color: var(--muted); transition: transform .15s; }
.color-dropdown-button[aria-expanded="true"] .color-dropdown-arrow { transform: rotate(180deg); }
.color-dropdown-menu { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; right: 0; max-height: 350px; overflow: auto; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 16px 35px rgba(26,49,57,.18); }
.color-dropdown-menu[hidden] { display: none; }
.color-dropdown-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px; border: 0; border-radius: 9px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.color-dropdown-option:hover, .color-dropdown-option:focus-visible { background: #f0f7f4; outline: none; }
.color-dropdown-option.selected { background: var(--mint); box-shadow: inset 0 0 0 1px rgba(13,103,72,.18); }
.color-dropdown-option.selected::after { content: "✓"; color: var(--green); font-weight: 900; }
.color-dropdown-option .filament-swatch { flex-basis: 29px; width: 29px; height: 29px; }
.color-option-code { color: var(--muted); font-size: 10px; }
.color-caution { margin: 5px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.4; }

@media (max-width: 520px) {
  .color-dropdown-menu { position: fixed; z-index: 80; left: 12px; right: 12px; top: auto; bottom: 12px; max-height: min(62vh,470px); border-radius: 18px; padding: 10px; }
  .color-dropdown-option { padding: 11px; }
  .color-dropdown-option .filament-swatch { flex-basis: 34px; width: 34px; height: 34px; }
}