.wella-shades{margin:20px 0 22px;min-width:0}.wella-shades [hidden]{display:none!important}.wella-shades label{display:block;font-weight:600;margin:0 0 9px}.wella-shades input[type=search],.wella-shades select{width:100%;min-height:48px;font:inherit;font-size:16px;border:1px solid #bbb;background:#fff;color:#191919;padding:12px;border-radius:3px}.wella-shades__filters{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}.wella-shades__filters button,.wella-shades__more{font:inherit;font-size:13px;min-height:44px;border:1px solid #ccc;background:#fff;color:#191919;border-radius:3px;padding:10px 13px;cursor:pointer}.wella-shades__filters button[aria-pressed=true]{background:#191919;color:#fff;border-color:#191919}.wella-shades__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:10px 7px}.wella-shades__choice{font:inherit;background:#fff;color:#191919;border:2px solid transparent;border-radius:3px;padding:4px;min-height:92px;min-width:0;cursor:pointer;overflow-wrap:anywhere}.wella-shades__choice[aria-pressed=true]{border-color:#191919}.wella-shades__choice img{display:block;width:100%;height:62px;object-fit:cover;border-radius:2px}.wella-shades__code{display:block;font-size:13px;font-weight:600;margin-top:6px}.wella-shades__text-reference{display:flex;background:#f3f0ed;align-items:center;justify-content:center;min-height:62px;font-size:13px;padding:4px}.wella-shades__gone{display:block;font-size:11px;margin-top:3px}.wella-shades__count{font-size:12px;color:#555;line-height:1.5;margin:12px 0}.wella-shades__more{width:100%;margin-bottom:12px}.wella-shades__selected{background:#f5f2ef;padding:15px;display:flex;align-items:center;gap:13px;min-height:84px;margin-top:16px;color:#191919}.wella-shades__selected img{width:54px;height:60px;object-fit:cover;border-radius:2px}.wella-shades__selected strong{font-size:16px;display:block;line-height:1.4}.wella-shades__selected small{display:block;font-size:13px;line-height:1.5;margin-top:3px}.wella-shades__note{font-size:12px;line-height:1.6;color:#555;margin:13px 0 0}.wella-shades__choice:focus-visible,.wella-shades button:focus-visible{outline:2px solid #191919;outline-offset:3px}@media(max-width:380px){.wella-shades__grid{grid-template-columns:repeat(4,minmax(0,1fr))}.wella-shades__choice{padding:3px}.wella-shades__code{font-size:12px}}
.product-form > .wella-shades{grid-column:1/-1;width:100%;max-width:100%}

/* Text-only options are labels, not placeholder swatches. */
.wella-shades[data-text-only=true] .wella-shades__text-reference{display:none}.wella-shades[data-text-only=true] .wella-shades__grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.wella-shades[data-text-only=true] .wella-shades__choice{min-height:56px;padding:14px 16px;border:1px solid #bbb;overflow-wrap:normal;word-break:normal;line-height:1.4}.wella-shades[data-text-only=true] .wella-shades__code{font-size:15px;margin:0}.wella-shades[data-text-only=true] .wella-shades__choice[aria-pressed=true]{border:2px solid #191919;padding:13px 15px;background:#f3f0ed}.wella-shades[data-compact=true] .wella-shades__filters{display:none}.wella-shades[data-text-only=true] .wella-shades__selected{min-height:0;background:transparent;padding:0;margin-top:14px}.wella-shades[data-text-only=true] .wella-shades__selected strong{font-size:15px}.wella-shades[data-text-only=true]{margin-top:4px;margin-bottom:8px}
[data-theme=dark] .wella-shades input[type=search],[data-theme=dark] .wella-shades select,[data-theme=dark] .wella-shades__choice,[data-theme=dark] .wella-shades__filters button,[data-theme=dark] .wella-shades__more{background:#191919;color:#f5f5f5;border-color:#666}[data-theme=dark] .wella-shades__choice[aria-pressed=true]{border-color:#f5f5f5;background:#303030}[data-theme=dark] .wella-shades__filters button[aria-pressed=true]{background:#f5f5f5;color:#191919}[data-theme=dark] .wella-shades__count,[data-theme=dark] .wella-shades__note{color:#b8b8b8}[data-theme=dark] .wella-shades__selected{background:#202020;color:#f5f5f5}[data-theme=dark] .wella-shades[data-text-only=true] .wella-shades__selected{background:transparent}.wella-shades button:focus-visible{outline-color:currentColor}
[data-theme=dark] .wella-shades[data-text-only=true] .wella-shades__choice[aria-pressed=true]{background:#303030;color:#f5f5f5;border-color:#f5f5f5}