df-color-picker {display:block;position:relative;width:100%;color:#153c47;border-radius:inherit;}
df-color-picker[data-ready] > select {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.variant-option__select-wrapper:has(df-color-picker[data-ready]) {overflow:visible;isolation:isolate;z-index:5;}
.variant-option__select-wrapper:has(df-color-picker[data-ready]) > .icon-caret {display:none;}
df-color-picker button {font:inherit;color:inherit;cursor:pointer;}
df-color-picker .dfc-trigger {display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:12px 16px;text-align:left;border:0;border-radius:inherit;background:#fffdf7;}
df-color-picker .dfc-dot {display:inline-block;width:20px;height:20px;flex:0 0 20px;border:1px solid #71818a;border-radius:50%;background-size:cover;}
df-color-picker .dfc-caret {margin-left:auto;font-size:21px;line-height:1;}
df-color-picker .dfc-list {position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:min(300px,45vh);overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid #71818a;border-radius:12px;background:#fffdf7;box-shadow:0 8px 24px #153c4733;z-index:20;}
df-color-picker .dfc-list[hidden] {display:none;}
df-color-picker .dfc-option {display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px;border:0;border-radius:7px;text-align:left;background:transparent;}
df-color-picker .dfc-option[aria-selected=true] {background:#fff0b5;font-weight:700;}
df-color-picker .dfc-option:hover {background:#f1faf7;}
df-color-picker button:focus-visible {outline:2px solid #153c47;outline-offset:-2px;}