.gemstone-swatch-group{display:flex;flex-wrap:wrap;gap:.5rem}.gemstone-swatch{--swatch-bg: #eee;--swatch-fg: #111;position:relative;-webkit-appearance:none;appearance:none;border:1px solid rgba(0,0,0,.12);background:var(--swatch-bg);color:var(--swatch-fg);padding:.6rem .8rem;border-radius:999px;font-size:.9rem;line-height:1;cursor:pointer;transition:transform .06s ease,box-shadow .2s ease,border-color .2s ease}.gemstone-swatch:hover{transform:translateY(-1px)}.gemstone-swatch[aria-pressed=true]{outline:2px solid rgba(0,0,0,.25);box-shadow:0 0 0 3px #0000000f inset}.gemstone-swatch[disabled]{opacity:.5;cursor:not-allowed}.gemstone-swatch .dot{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;margin-right:.5rem;border:1px solid rgba(0,0,0,.2);vertical-align:-.1rem}.gemstone-swatch:focus-visible{outline:2px solid #000;outline-offset:2px}.gemstone-swatch[data-contrast=light]{--swatch-fg: #fff}.gem-dropdown-toggle{width:100%;text-align:left;border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;padding:.9rem 1rem;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:.6rem}.gem-dropdown-toggle .dot{width:1rem;height:1rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.gem-dropdown-current{flex:1 1 auto}.gem-dropdown-menu{position:absolute;z-index:50;top:calc(100% + .4rem);left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:.4rem;box-shadow:0 10px 30px #0000001a}.gem-option{--swatch-bg: #f6f6f6;--swatch-fg: #111;display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-radius:8px;cursor:pointer;outline:0;background:var(--swatch-bg);color:var(--swatch-fg)}.gem-option .dot{width:1rem;height:1rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.gem-option[aria-selected=true]{box-shadow:0 0 0 2px #00000026 inset}.gem-option:focus{box-shadow:0 0 0 2px #000 inset}.gem-option[data-contrast=light]{--swatch-fg: #fff}.gem-dropdown-toggle{border-color:#0000001f!important}.gem-dropdown{position:relative;display:inline-block;width:100%;max-width:520px}.gem-dropdown-toggle{width:100%;text-align:left;display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-radius:10px;cursor:pointer;border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;box-shadow:0 1px 2px #0000000a}.gem-dropdown-toggle .dot{width:.9rem;height:.9rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.gem-dropdown-menu{position:absolute;z-index:50;top:calc(100% + .5rem);left:0;right:0;border:1px solid rgba(0,0,0,.12);border-radius:12px;overflow:auto;max-height:300px;padding:.5rem;background:#fff;box-shadow:0 10px 30px #0000001a}.gem-option{--swatch-bg: #e9e9e9;display:flex;align-items:center;gap:.65rem;padding:.7rem .95rem;border-radius:10px;cursor:pointer;outline:0;background:#fff;color:#111;border:1px solid rgba(0,0,0,.08);position:relative;transition:box-shadow .15s ease,transform .06s ease,border-color .15s ease,background .15s ease}.gem-option:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:6px;border-radius:8px;background:var(--swatch-bg)}.gem-option .dot{width:.9rem;height:.9rem;border-radius:50%;border:1px solid rgba(0,0,0,.25)}.gem-option:hover{transform:translateY(-1px);box-shadow:0 6px 16px #00000014;background:#fafafa}.gem-option:focus{box-shadow:0 0 0 2px #000000a6 inset}.gem-option[aria-selected=true]{border-color:var(--swatch-bg);box-shadow:0 0 0 2px color-mix(in oklab,var(--swatch-bg) 45%,#0000) inset,0 4px 12px #00000014}.gem-option[aria-disabled=true]{opacity:.45;cursor:not-allowed}.gem-dropdown-menu::-webkit-scrollbar{width:10px}.gem-dropdown-menu::-webkit-scrollbar-thumb{background:#00000026;border-radius:10px}.gem-dropdown-menu::-webkit-scrollbar-track{background:transparent}.gem-dropdown-toggle{background:#0e0e0f;color:#f5f5f5;border-color:#ffffff1f}.gem-dropdown-toggle .dot{border-color:#ffffff59}.gem-dropdown-menu{background:#121214;border-color:#ffffff1f;box-shadow:0 18px 40px #0000008c}.gem-option{background:#1a1b1e;color:#f2f2f2;border-color:#ffffff14}.gem-option .dot{border-color:#ffffff59}.gem-option:hover{background:#1f2024;box-shadow:0 8px 18px #00000059}.gem-option:focus{box-shadow:0 0 0 2px #ffffffbf inset}.gem-option[aria-selected=true]{border-color:var(--swatch-bg);box-shadow:0 0 0 2px color-mix(in oklab,var(--swatch-bg) 55%,#0000) inset,0 6px 16px #0006}
/*# sourceMappingURL=/cdn/shop/t/3/assets/custom-variant-swatches.css.map */