/* Colour names and native variation values remain authoritative. */
.sj-color-hint{font-size:12px;line-height:1.5;margin:0 0 12px;color:var(--muted)}
.sj-color-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 8px}
.sj-color-option{display:flex;align-items:center;gap:7px;min-height:48px;min-width:0;padding:4px 7px;border:1px solid #a8ab9e;border-radius:0;background:transparent;color:var(--ink);text-align:left;font-size:11px;line-height:1.3}
.sj-color-option span{overflow-wrap:anywhere}
.sj-color-option img{width:38px;height:38px;object-fit:contain;flex-shrink:0;background:var(--ivory)}
.sj-color-option[aria-pressed="true"]{border:2px solid var(--olive);padding:3px 6px;background:var(--ivory);font-weight:600}
.sj-color-option[aria-pressed="true"] span::after{content:' ✓'}
.sj-color-option:disabled{opacity:.5;text-decoration:line-through}
.sj-color-option[hidden],.sj-color-option img[hidden],.sj-color-more[hidden]{display:none}
.sj-color-more{display:block;min-height:44px;padding:8px 0;background:none;border:0;color:var(--olive);text-decoration:underline;text-underline-offset:3px;font-size:12px}
@media(max-width:800px) and (min-width:601px){.sj-color-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:374px){.sj-color-options{grid-template-columns:repeat(2,minmax(0,1fr))}}