.color-row-grid{display:grid;position:relative;grid-auto-flow:column;align-items:center;justify-content:space-between;transform:translateZ(0);border-radius:11px;background:#fff;width:100%;margin-top:18px}.color-row-grid:not(:has(.color-divider)){justify-content:center;gap:6px}.color-row-grid-wallet:not(:has(.color-divider)){justify-content:left;gap:6px}.color-circle-border{display:flex;position:relative;align-items:center;justify-content:center;transition:all .3s ease;border:solid 1px transparent;border-radius:50%;padding:2px}.color-circle-border:hover,.color-circle-selected{border:1px solid var(--hex-color, #000)}.color-circle--white:hover,.color-circle-selected-white{border:solid 1px var(--black-200);padding:2px}.color-circle--white .color-circle{border:1px solid #d3d3d3}.color-row-grid.band-v2{justify-content:center;gap:6px}.color-row-grid.band-v1>*:nth-child(-n+6){display:none}.color-row-grid.band-v2>*:nth-child(n+8):nth-child(-n+12){display:none}.color-circle{position:relative;border-radius:50%;cursor:pointer;width:24px;height:24px;background:var(--hex-color, #000)}.color-dot--red{background:var(--red-200)}.color-dot--yellow{background:var(--yellow-200)}.color-dot--mint{background:var(--mint-200)}.color-dot--green{background:var(--green-200)}.color-dot--blue{background:var(--blue-200)}.color-dot--purple{background:var(--purple-200)}.color-dot--white{background:#fff;border:1px solid #b3b3b3}.color-dot--black{background:var(--black-200)}.color-dot--latte{background:#bfa58d}.color-dot--pumpkin{background:#f37d27}.color-dot--glacier{background:#6fa0ef}.color-dot--cranberry{background:#cf2029}.color-dot--iris{background:#8f44dc}.color-dot--blossom{background:#f291b5}.color-dot--mango{background:#ffad4a}.color-dot--lagoon{background:#72d4bd}.color-dot--slate{background:#cbcdcd}.color-dot--maroon{background:#794652}.color-dot--pink{background:#ff7cae}.color-dot--sand{background:#dcbc99}.color-dot--grey{background:#919ca4}.variant-chip--red{color:#e23c4c;background:#e23c4c33}.variant-chip--red svg path{fill:#e23c4c}.variant-chip--yellow{color:var(--yellow-200);background:#ffc10533}.variant-chip--yellow svg path{fill:var(--yellow-200)}.variant-chip--mint{color:var(--mint-200);background:#76d67633}.variant-chip--mint svg path{fill:var(--mint-200)}.variant-chip--green{color:var(--green-200);background:#017e7033}.variant-chip--green svg path{fill:var(--green-200)}.variant-chip--blue{color:var(--blue-200);background:#50a9ed33}.variant-chip--blue svg path{fill:var(--blue-200)}.variant-chip--purple{color:var(--purple-200);background:#7b61ff33}.variant-chip--purple svg path{fill:var(--purple-200)}.variant-chip--white{color:#707070;background:#80808033}.variant-chip--white svg path{fill:#707070}.variant-chip--black{color:var(--black-200);background-color:#3333}.variant-chip--black svg path{fill:var(--black-200)}.variant-chip--latte{color:#bfa58d;background-color:#bfa58d33}.variant-chip--latte svg path{fill:#bfa58d}.variant-chip--pumpkin{color:#f37d27;background-color:#f37d2733}.variant-chip--pumpkin svg path{fill:#f37d27}.variant-chip--glacier{color:#6fa0ef;background-color:#71a1ef33}.variant-chip--glacier svg path{fill:#6fa0ef}.variant-chip--cranberry{color:#cf2029;background-color:#cf202926}.variant-chip--cranberry svg path{fill:#cf2029}.variant-chip--iris{color:#8f44dc;background-color:#8f44dc26}.variant-chip--iris svg path{fill:#8f44dc}.variant-chip--blossom{color:#f291b5;background-color:#f291b526}.variant-chip--blossom svg path{fill:#f291b5}.variant-chip--mango{color:#ffad4a;background-color:#ffad4a26}.variant-chip--mango svg path{fill:#ffad4a}.variant-chip--lagoon{color:#72d4bd;background-color:#72d4bd26}.variant-chip--lagoon svg path{fill:#72d4bd}.variant-chip--popular{color:#ff6a3a;background-color:#fdead8}.variant-chip--new{color:#4fa8ed;background-color:#4fa9ed33}@media screen and (max-width: 1050px){.color-circle-border{border:solid 1px transparent}.color-row-grid input[type=radio]:checked+label,.color-circle-border:hover{border:solid 1px #000000}.color-circle-border.selected .color-circle{width:23px;height:23px}}@media screen and (min-width: 780px){.color-circle{width:18px;height:18px}}@media screen and (min-width: 1050px){.color-circle{width:24px;height:24px}.color-row-grid:not(:has(.color-divider)){gap:10px}}
/*# sourceMappingURL=/cdn/shop/t/234/assets/component-color-circle-picker.css.map */