.color-group-picker{--ccp-accent: #314f78;--ccp-accent-contrast: #fff;--ccp-border: rgb(49 79 120 / 45%);--ccp-badge-bg: #dce6e8;--ccp-surface: rgb(var(--background, 255 255 255));--ccp-swatch-size: 3rem;--ccp-swatch-gap: 1rem;--ccp-ring-offset: 4px;display:block;overflow-anchor:none}.color-group-picker__tabs{display:flex;flex-wrap:wrap;gap:5px;margin-block-end:.875rem}@media screen and (min-width:750px){.color-group-picker__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.color-group-picker__tabs::-webkit-scrollbar{display:none}}.quick-buy-modal .color-group-picker__tabs{flex-wrap:wrap;overflow-x:visible}.color-group-picker__tab{flex:0 0 auto;min-width:3.75rem;min-height:2rem;padding:.5rem .625rem;border:.5px solid var(--ccp-border);border-radius:0;background-color:transparent;color:var(--ccp-accent);font-size:.75rem;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}@media screen and (pointer:fine){.color-group-picker__tab:not(.is-active):hover{border-color:var(--ccp-accent)}}.color-group-picker__tab.is-active{border-color:var(--ccp-accent);background-color:var(--ccp-accent);color:var(--ccp-accent-contrast)}.color-group-picker__panel{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.25rem var(--ccp-swatch-gap)}.color-group-picker__panel[hidden]{display:none}.color-group-picker__item{flex:0 0 auto;width:3.5rem;align-self:flex-start}.color-group-picker__item[hidden]{display:none}.color-group-picker__value{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ccp-accent);text-align:center;cursor:pointer}.color-group-picker__swatch{position:relative;flex-shrink:0;display:grid;place-items:center;width:var(--ccp-swatch-size);height:var(--ccp-swatch-size);margin-inline:auto;border-radius:999px;background:var(--swatch-background, #eee) no-repeat center / cover;box-shadow:inset 0 0 0 1px #00000014;transition:box-shadow .15s ease}.color-group-picker__name{display:block;width:max-content;max-width:100%;margin-inline:auto;font-size:.625rem;line-height:1.2;overflow-wrap:normal;word-break:normal;-webkit-hyphens:none;hyphens:none}.color-group-picker__check{position:absolute;inset-block-start:0;inset-inline-end:0;z-index:1;display:grid;place-items:center;width:1rem;height:1rem;border-radius:999px;background-color:var(--ccp-accent);color:var(--ccp-accent-contrast);transform:translate(30%,-30%);opacity:0;transition:opacity .15s ease}.color-group-picker__check svg{width:.75rem;height:.75rem}:checked+.color-group-picker__value .color-group-picker__swatch,.color-group-picker__value.is-selected .color-group-picker__swatch{box-shadow:inset 0 0 0 1px #00000014,0 0 0 var(--ccp-ring-offset) var(--ccp-surface),0 0 0 calc(var(--ccp-ring-offset) + 1px) var(--ccp-accent)}:checked+.color-group-picker__value .color-group-picker__check,.color-group-picker__value.is-selected .color-group-picker__check{opacity:1}:focus-visible+.color-group-picker__value .color-group-picker__swatch{outline:2px solid var(--ccp-accent);outline-offset:calc(var(--ccp-ring-offset) + 2px)}.color-group-picker__badge{margin-block-start:-.25rem;padding:.1875rem .25rem;border-radius:4.5px;background-color:var(--ccp-badge-bg);font-size:.5625rem;font-weight:500;line-height:1.2;letter-spacing:.02em;white-space:nowrap}.color-group-picker__notify{margin-block-start:-.25rem;font-size:.625rem;line-height:1.2;white-space:nowrap;text-decoration:underline;text-underline-offset:.125em}.color-group-picker__value.is-unavailable{opacity:.5}.color-group-picker__value.is-unavailable .color-group-picker__swatch:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(#314f78,#314f78) center / 1px 100% no-repeat;transform:rotate(45deg);pointer-events:none}.variant-picker__option--color-groups{gap:0}.variant-picker__color-heading{margin-block-end:.875rem;color:var(--ccp-label-color, #314f78);font-size:1.5rem;line-height:1.35;letter-spacing:0;text-transform:none}.variant-picker__option--color-groups .variant-picker__option-info{margin-block-end:.75rem;padding-block:.6875rem;border-block-start:.5px solid rgb(23 23 23 / 16%);color:var(--ccp-label-color, #314f78);font-size:1rem;font-weight:700}.variant-picker__option--color-groups .variant-picker__option-info legend{font-weight:inherit}@media screen and (max-width:749px){.color-group-picker{--ccp-swatch-size: 2.75rem}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/color-group-picker.css.map */