.colour-group-thumbs,.colour-group-picker{position:relative;z-index:2}.colour-group-thumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.8rem 0 0;padding:0;list-style:none}.colour-group-thumbs__item{display:flex;margin:0}.colour-group-thumbs__link{position:relative;display:block;width:2.8rem;height:2.8rem;color:inherit;text-decoration:none}.colour-group-thumbs__image-wrap{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:.2rem}.colour-group-thumbs__image{display:block;width:100%;height:100%;object-fit:cover}.colour-group-thumbs__link--unavailable .colour-group-thumbs__image-wrap{opacity:.45}.colour-group-thumbs__link--unavailable .colour-group-thumbs__image-wrap:after,.colour-group-picker__link--unavailable .colour-group-picker__image-wrap:after{content:"";position:absolute;top:50%;left:-10%;width:120%;height:.1rem;background-color:rgb(var(--color-foreground));transform:rotate(-45deg);pointer-events:none}.colour-group-thumbs__more{display:block;font-size:1.2rem;line-height:1.2;letter-spacing:.01em;color:rgba(var(--color-foreground),.7);white-space:nowrap}.colour-group-thumbs--narrow{width:100%}.colour-group-thumbs--narrow .colour-group-thumbs__item--more{flex:1 0 100%}.colour-group-thumbs__tooltip,.colour-group-picker__tooltip{display:none}@media(hover:hover)and (pointer:fine){.colour-group-thumbs__tooltip,.colour-group-picker__tooltip{position:absolute;left:50%;bottom:calc(100% + .6rem);z-index:3;display:block;width:max-content;max-width:18rem;padding:.4rem .6rem;border-radius:.2rem;background-color:rgb(var(--color-foreground));color:rgb(var(--color-background));font-size:1.1rem;line-height:1.3;letter-spacing:.01em;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%);transition:opacity .15s ease}.colour-group-thumbs__link:hover .colour-group-thumbs__tooltip,.colour-group-thumbs__link:focus-visible .colour-group-thumbs__tooltip,.colour-group-picker__link:hover .colour-group-picker__tooltip,.colour-group-picker__link:focus-visible .colour-group-picker__tooltip{opacity:1}}.colour-group-thumbs__link:focus-visible,.colour-group-picker__link:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.75);outline-offset:.2rem}.colour-group-picker{display:block;margin-bottom:1.2rem}.colour-group-picker__label{margin-bottom:.8rem}.colour-group-picker__viewport{overflow:visible}.colour-group-picker__list{display:flex;flex-wrap:wrap;gap:.8rem;margin:0;padding:0;list-style:none}.colour-group-picker__item{margin:0;flex:0 0 auto}.colour-group-picker__link{position:relative;display:block;color:inherit;text-decoration:none}.colour-group-picker__image-wrap{position:relative;display:block;width:5.6rem;height:5.6rem;overflow:hidden;border-radius:.2rem}.colour-group-picker__image{display:block;width:100%;height:100%;object-fit:cover}.colour-group-picker__link--current .colour-group-picker__image-wrap:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;box-shadow:inset 0 0 0 3px rgb(var(--color-foreground));pointer-events:none}.colour-group-picker__check{position:absolute;top:.3rem;right:.3rem;z-index:2;display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background-color:rgb(var(--color-foreground));color:rgb(var(--color-background));pointer-events:none}.colour-group-picker__check .icon{width:.9rem;height:.9rem}.colour-group-picker__link--unavailable .colour-group-picker__image-wrap{opacity:.45}.colour-group-picker__toggle{display:none}.predictive-search__list-item .colour-group-thumbs{padding:0 2rem 1rem 9rem;margin-top:0}@media screen and (max-width:749px){.colour-group-picker__viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding-inline:calc(50% - 2.8rem);scrollbar-width:none}.colour-group-picker__viewport::-webkit-scrollbar{display:none}.colour-group-picker__list{flex-wrap:nowrap;width:max-content}.colour-group-picker__item{scroll-snap-align:center}.colour-group-picker.is-expanded .colour-group-picker__viewport{overflow:visible;scroll-snap-type:none}.colour-group-picker.is-expanded .colour-group-picker__list{flex-wrap:wrap;width:auto}.colour-group-picker.is-expanded .colour-group-picker__item{scroll-snap-align:unset}.colour-group-picker__toggle{display:inline-flex;margin-top:1rem}.predictive-search__list-item .colour-group-thumbs{padding:0 2rem 1rem}}
/*# sourceMappingURL=/cdn/shop/t/72/assets/component-colour-group.css.map */
