/* Public color choices: one ring owner; unavailable slash is separate from selection.
   Legacy showroom selectors live in the feature-gated showroom stylesheet. */
.np-color-choice{
 box-sizing:border-box;position:relative;display:inline-flex;align-items:center;
 justify-content:flex-start;flex-shrink:0;min-height:44px;padding:0;
 border:0;background:transparent;color:var(--np-ink,#171717);box-shadow:none;
 font:inherit;opacity:1;cursor:pointer;
}
.np-color-swatch{flex:0 0 var(--swatch-target,40px);width:var(--swatch-target,40px);min-width:var(--swatch-target,40px);height:44px}
.np-swatch-frame{
 box-sizing:content-box;display:block;flex:0 0 var(--swatch-size,26px);width:var(--swatch-size,26px);height:var(--swatch-size,26px);
 padding:var(--swatch-gap,3px);margin-left:calc(-1 * var(--swatch-gap,3px));border:0;border-radius:50%;outline:0;
}
.np-swatch-color{
 box-sizing:border-box;position:relative;display:block;width:var(--swatch-size,26px);height:var(--swatch-size,26px);
 border:1px solid var(--swatch-border,transparent);border-radius:50%;
 background-color:var(--swatch-color,transparent);background-image:var(--swatch-image,none);
 background-size:cover;background-position:center;
}
.np-color-swatch:is([aria-pressed=true],[aria-current=page]) .np-swatch-frame{outline:1px solid var(--np-ink,#171717);outline-offset:0}
/* Keep the real color visible; slash communicates unavailable, not selection. */
.np-color-choice[data-unavailable=true] .np-swatch-color:after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1px;background:#171717;box-shadow:0 0 0 1px #ffffffb3;transform:rotate(-45deg);pointer-events:none}
.np-color-selector-compact{--swatch-size:18px;--swatch-gap:2px;--swatch-target:30px}
.np-color-label{
 min-width:44px;margin:0 8px 0 0;padding:8px 10px;border:1px solid var(--np-border,#e5e5e5);
 font-size:14px;line-height:1.4;text-align:left;
}
.np-color-label:is([aria-pressed=true],[aria-current=page]){border-color:var(--np-ink,#171717)}
.np-color-label[data-unavailable=true]{color:var(--np-muted,#626262)}
.np-color-choice:focus-visible{outline:2px solid var(--np-ink,#171717);outline-offset:2px}
.real-option-values:has(.np-color-choice),#MainContent .card-colors{display:flex;flex-wrap:wrap;column-gap:0;row-gap:0}

.np-color-selector{width:100%;min-width:0}
.np-color-name{font-size:16px;line-height:1.5;margin:0 0 10px;font-weight:500}
.np-color-values{display:flex;flex-wrap:wrap;column-gap:0;row-gap:4px;align-items:center}
.np-color-selector-compact .np-color-values{row-gap:0}