/* Independent dot color selection */
#selected-dot-name{font-weight:400;color:var(--muted);margin-left:9px}
#dot-color-fieldset{margin-top:24px}
#dot-color-fieldset legend{font-size:14px}
.dot-options{display:flex;gap:8px;flex-wrap:wrap}
.dot-option{position:relative;cursor:pointer}
.dot-option input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.dot-option>span{display:flex;gap:7px;align-items:center;border:1px solid var(--line);padding:10px 11px;font-size:14px;min-height:42px}
.dot-option i{display:block;width:12px;height:12px;background:var(--dot-color);border:1px solid #0003}
.dot-option input:checked+span{outline:2px solid var(--ink);outline-offset:-2px}
.dot-option input:focus-visible+span{outline:3px solid var(--orange);outline-offset:3px}
.dot-option.unavailable{opacity:.38;cursor:not-allowed}
.dot-option.unavailable>span{text-decoration:line-through}
.dot-option input:disabled{cursor:not-allowed}
.dot-preview{display:grid;place-items:center;min-height:110px;margin-top:14px;padding:20px;background:var(--fabric-color);border:1px solid var(--line)}
.dot-preview-wordmark{color:var(--wordmark-color);font-family:Arial,sans-serif;font-weight:800;font-size:42px;letter-spacing:-2px;line-height:1.2}
.preview-period{display:inline-block;width:.17em;height:.17em;margin-left:.06em;background:var(--selected-dot-color)}
.dot-preview-caption{font-size:12px;line-height:1.6;color:var(--muted);margin:8px 0 0}
.dot-color-adjustment{font-size:12px;line-height:1.6;margin:10px 0 0}
.dot-color-adjustment:empty{display:none}
.bag-item-details .bag-dot-color{margin-top:-6px;color:var(--ink)}