.soniel-picker{margin:18px 0 20px;display:grid;gap:16px}
.soniel-picker__opt{border:0;margin:0;padding:0;min-width:0}
.soniel-picker__opt legend{display:flex;gap:.45rem;align-items:baseline;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin:0 0 10px;color:var(--color-wine,#7d1f2a)}
.soniel-picker__opt legend span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--color-ink,#1a1412);opacity:.75}
.soniel-picker__row{display:flex;flex-wrap:wrap;gap:10px}
.soniel-swatch{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;padding:0;border:1px solid rgba(26,20,18,.22);background:var(--swatch,#cfc8bf);text-indent:-999px;overflow:hidden;cursor:pointer}
.soniel-swatch.is-active{box-shadow:0 0 0 2px #F7F3EE,0 0 0 4px var(--color-wine,#7d1f2a)}
.soniel-size{text-indent:0;overflow:visible;width:auto;min-width:44px;height:44px;border-radius:999px;background:#fff;color:var(--color-ink,#1a1412);font-size:.82rem;font-weight:600;padding:0 12px;border:1px solid rgba(26,20,18,.2)}
.soniel-size.is-active{background:var(--color-wine,#7d1f2a);color:#fff;border-color:var(--color-wine,#7d1f2a)}
.soniel-swatch.is-unavailable,.soniel-size.is-unavailable{opacity:.38;text-decoration:line-through;cursor:not-allowed}
.soniel-swatch:focus,.soniel-size:focus,.soniel-swatch:focus-visible,.soniel-size:focus-visible{
  outline:2px solid var(--color-wine,#7d1f2a);
  outline-offset:3px;
}
.soniel-swatch:focus:not(:focus-visible),.soniel-size:focus:not(:focus-visible){outline:none}
.soniel-picker__select{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-color-scheme:dark){
  .soniel-size{background:#24181a;color:#F7F3EE;border-color:rgba(247,243,238,.2)}
  .soniel-picker__opt legend span{color:#F7F3EE}
  .soniel-swatch.is-active{box-shadow:0 0 0 2px #1a1214,0 0 0 4px #e8c56d}
  .soniel-swatch:focus-visible,.soniel-size:focus-visible{outline-color:#e8c56d}
}