.sock-colour-control{min-width:0;max-width:100%;}
.sock-colour-control>select{width:100%;min-height:48px;}
.sock-colour-summary{display:flex;align-items:center;gap:12px;margin:16px 0 10px;min-height:44px;color:#183a43;}
.sock-colour-preview{width:40px;height:40px;flex:none;border-radius:13px;border:1px solid #b8c8cb;box-shadow:inset 0 0 0 3px #fff;}
.sock-colour-note{font-size:14px;color:#864416;line-height:1.5;}
.sock-colour-note:empty{display:none;}
.sock-colour-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:14px 0;}
.sock-colour-preset{display:flex;align-items:center;gap:7px;min-width:0;min-height:48px;border:1px solid #c4d3d4;border-radius:12px;background:#fff;color:#183a43;font:inherit;font-size:13px;padding:8px;cursor:pointer;text-align:left;}
.sock-colour-dot{width:22px;height:22px;border-radius:50%;border:1px solid #0003;flex:none;}
.sock-colour-preset[aria-pressed=true]{border-color:#176b65;box-shadow:0 0 0 2px #176b65;background:#edf7f4;font-weight:700;}
.sock-colour-preset:focus-visible,.sock-colour-wheel:focus-visible{outline:3px solid #183a43;outline-offset:4px;}
.sock-colour-custom{border:2px solid #df72ae;border-radius:18px;background:linear-gradient(145deg,#fff2f8,#f6f2ff);padding:16px;margin-top:20px;box-shadow:0 5px 18px #bf428b12;}
.sock-colour-custom>summary{display:flex;align-items:center;gap:12px;cursor:pointer;color:#542544;min-height:64px;line-height:1.4;list-style:none;}
.sock-colour-custom>summary::-webkit-details-marker{display:none;}
.sock-colour-custom>summary::before{content:'';flex:0 0 42px;width:42px;height:42px;border:3px solid #fff;border-radius:50%;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:0 0 0 1px #db9abc;}
.sock-colour-custom>summary::after{content:'+';font-size:24px;font-weight:700;margin-left:auto;}
.sock-colour-custom[open]>summary::after{content:'−';}
.sock-colour-custom>summary:focus-visible{outline:3px solid #8d2870;outline-offset:4px;border-radius:8px;}
.sock-colour-custom-title{display:grid;gap:3px;min-width:0;}
.sock-colour-custom-title strong{font-size:18px;font-weight:800;}
.sock-colour-custom-title>span{font-size:13px;font-weight:400;color:#6e4b62;}
.sock-colour-custom>p{font-size:14px;line-height:1.5;}
.sock-colour-wheel-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px;padding:12px 0;}
.sock-colour-wheel{--shade:0;position:relative;flex:0 0 auto;width:min(230px,100%);aspect-ratio:1;border-radius:50%;touch-action:none;cursor:crosshair;background:linear-gradient(rgb(0 0 0 / var(--shade)),rgb(0 0 0 / var(--shade))),radial-gradient(circle,#fff,transparent 70%),conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:0 0 0 5px #fff,0 0 0 6px #cdd9d7;}
.sock-colour-marker{position:absolute;width:18px;height:18px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #183a43;transform:translate(-50%,-50%);pointer-events:none;}
.sock-colour-sliders{flex:1 1 180px;min-width:0;display:grid;gap:14px;}
.sock-colour-sliders label{display:block;font-size:14px;color:#183a43;}
.sock-colour-sliders output{float:right;font-weight:700;}
.sock-colour-sliders input[type=range]{display:block;width:100%;min-height:44px;margin:4px 0 0;padding:0;accent-color:#176b65;cursor:pointer;}