.paint-search { margin:18px 0; padding:12px 16px; border:1px solid #d8e2dd; border-radius:10px; background:#f4f8f5; }
.paint-search-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.paint-search h2 { font-size:.95rem; margin:0; }
.paint-search p { margin:5px 0; color:#52667a; font-size:.8rem; }
.paint-search-clear { font-size:.75rem; text-decoration:underline; text-align:right; }
.paint-search-controls { display:flex; align-items:center; gap:16px; }
.paint-search input.paint-hue-slider { flex:1; min-width:0; width:100%; margin:0; appearance:none; -webkit-appearance:none; height:14px; border-radius:9px; cursor:pointer; background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.paint-hue-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:white; border:2px solid #203c51; box-shadow:0 1px 4px #0004; }
.paint-hue-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:white; border:2px solid #203c51; }
.paint-neutral-colors { display:flex; flex-shrink:0; gap:2px; }
.paint-neutral-colors button { display:inline-flex; justify-content:center; align-items:center; width:40px; height:40px; padding:0; background:transparent; border:2px solid transparent; border-radius:50%; cursor:pointer; }
.paint-neutral-colors button[aria-pressed=true] { border-color:#173d57; }
.paint-neutral-colors span, .paint-product-color span { display:inline-block; width:21px; height:21px; border:1px solid #0003; border-radius:50%; flex-shrink:0; }
.paint-product-color { display:flex; align-items:center; gap:8px; font-size:.75rem; color:#536b79; }
.paint-product-color span { width:19px; height:19px; }
.paint-search input:focus-visible, .paint-search button:focus-visible, .paint-search a:focus-visible { outline:3px solid #7da9c7; outline-offset:3px; }
@media(max-width:700px) { .paint-search-controls { flex-direction:column; align-items:stretch; gap:10px; padding-top:5px; } .paint-search input.paint-hue-slider { flex:none; } .paint-neutral-colors { justify-content:center; } }
@media(max-width:480px) { .paint-search { padding:10px 12px; } .paint-search-controls { gap:10px; } .paint-neutral-colors button { width:36px; height:36px; } .paint-search h2 { font-size:.88rem; } .paint-search-clear { font-size:.7rem; } }