.bracelet-colors { margin-top: 15px; }
.bracelet-colors > span { display: block; margin-bottom: 8px; color: #2d85b0; font-size: 11px; font-weight: 700; }
.color-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.color-option { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #c8d6d6; border-radius: 999px; color: #18354f; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.color-option:hover { border-color: #47aaa8; }
.color-option:focus-visible { outline: 3px solid rgba(24, 215, 202, .32); outline-offset: 2px; }
.color-option.is-selected { border-color: #0b817e; background: #e7f6f3; box-shadow: 0 0 0 2px rgba(11, 129, 126, .15); }
.color-option i { width: 17px; height: 17px; flex: 0 0 auto; border: 2px solid #fff; border-radius: 50%; background: var(--bracelet-color); box-shadow: 0 0 0 1px #9aa9b3; }
.color-option b { font-size: 11px; }
.color-red { --bracelet-color: #e71d1d; }.color-yellow { --bracelet-color: #ffd40b; }.color-green { --bracelet-color: #7edc19; }.color-blue { --bracelet-color: #2458e1; }.color-pink { --bracelet-color: #f24484; }.color-black { --bracelet-color: #151719; }
@media (max-width: 660px) { .bracelet-colors { margin-top: 12px; }.color-options { grid-template-columns: 1fr; }.color-option { min-height: 42px; } }