frame-selects{display:block}.frame-picker__legend{display:inline-flex;align-items:center;gap:.6rem}.frame-picker__legend-link{color:inherit;text-underline-offset:.2rem}.frame-picker__info-link{display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;border:.1rem solid rgba(var(--color-foreground),.36);border-radius:50%;color:rgba(var(--color-foreground),.76);font-size:1.2rem;font-weight:700;line-height:1;text-decoration:none}.frame-picker__legend:hover .frame-picker__legend-link,.frame-picker__legend:hover .frame-picker__info-link,.frame-picker__legend:focus-within .frame-picker__legend-link,.frame-picker__legend:focus-within .frame-picker__info-link{color:rgb(var(--color-foreground))}.frame-picker__legend:hover .frame-picker__info-link,.frame-picker__legend:focus-within .frame-picker__info-link{border-color:rgba(var(--color-foreground),.72)}.frame-picker__legend-link:focus-visible,.frame-picker__info-link:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.55);outline-offset:.2rem}.frame-custom-colour-pill-swatch{display:inline-block;width:1.4rem;height:1.4rem;margin-right:.6rem;border:.1rem solid rgba(var(--color-foreground),.24);border-radius:50%;vertical-align:-.2rem;background:var(--frame-custom-colour, rgba(var(--color-foreground), .08));box-shadow:inset 0 0 0 .1rem rgba(var(--color-background),.45)}.frame-custom-colour-pill-swatch[hidden]{display:none}.frame-custom-colour-pill-price{display:inline-block;margin-left:.8rem;font-size:1.2rem;opacity:.78}.product-form__input--pill input[type=radio]:checked+label .frame-custom-colour-pill-swatch{border-color:rgba(var(--color-background),.86);box-shadow:0 0 0 .1rem rgba(var(--color-foreground),.36),inset 0 0 0 .1rem rgba(var(--color-background),.5)}.frame-custom-colour-picker{max-width:44rem;margin:-.2rem 0 1.6rem;padding:1.2rem;border:.1rem solid rgba(var(--color-foreground),.14);border-radius:.8rem;background:rgb(var(--color-background))}.frame-custom-colour-picker[hidden]{display:none}.frame-custom-colour-picker__header{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;margin-bottom:1rem}.frame-custom-colour-picker__header .form__label{margin:0}.frame-custom-colour-picker__selected{display:inline-flex;align-items:center;justify-content:flex-end;gap:.6rem;color:rgba(var(--color-foreground),.72);font-size:1.3rem;line-height:1.3;text-align:right}.frame-custom-colour-picker__selected-swatch{display:inline-block;flex:0 0 auto;width:1.6rem;height:1.6rem;border:.1rem solid rgba(var(--color-foreground),.18);border-radius:50%;background:var(--frame-custom-colour, rgba(var(--color-foreground), .08));box-shadow:inset 0 0 0 .1rem rgba(var(--color-background),.55)}.frame-custom-colour-picker__selected-swatch[hidden]{display:none}.frame-custom-colour-picker__list{display:grid;grid-template-columns:1fr;gap:.4rem;max-height:31rem;margin:0 0 1rem;padding:0 .2rem 0 0;overflow-y:auto;border:0}.frame-custom-colour-picker__option{position:relative}.frame-custom-colour-picker__option input[type=radio]{clip:rect(0,0,0,0);overflow:hidden;position:absolute;top:0;left:0;height:1px;width:1px}.frame-custom-colour-picker__option label{display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:center;gap:1rem;min-height:4.8rem;padding:.7rem .8rem;border:.1rem solid transparent;border-radius:.6rem;cursor:pointer}.frame-custom-colour-picker__option label:hover{border-color:rgba(var(--color-foreground),.22);background:rgba(var(--color-foreground),.035)}.frame-custom-colour-picker__option input[type=radio]:checked+label{border-color:rgb(var(--color-foreground));background:rgba(var(--color-foreground),.055)}.frame-custom-colour-picker__option input[type=radio]:focus-visible+label{outline:.2rem solid rgba(var(--color-foreground),.55);outline-offset:.2rem}.frame-custom-colour-picker__option input[type=radio]:disabled+label{cursor:not-allowed;opacity:.55}.frame-custom-colour-picker__swatch{display:block;width:2.8rem;height:2.8rem;border:.1rem solid rgba(var(--color-foreground),.18);border-radius:50%;background:var(--frame-custom-colour, rgba(var(--color-foreground), .08));box-shadow:inset 0 0 0 .1rem rgba(var(--color-background),.5)}.frame-custom-colour-picker__text{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;min-width:0}.frame-custom-colour-picker__name{overflow-wrap:anywhere;color:rgb(var(--color-foreground));font-size:1.4rem;line-height:1.3}.frame-custom-colour-picker__number{flex:0 0 auto;color:rgba(var(--color-foreground),.64);font-size:1.2rem;line-height:1.3}.frame-custom-colour-picker__empty{margin:1.6rem 0;color:rgba(var(--color-foreground),.72);font-size:1.3rem;text-align:center}.frame-custom-colour-picker--error{border-color:#b42525}.frame-custom-colour-picker__message{margin:.8rem 0 0;color:#b42525;font-size:1.3rem;line-height:1.3}.frame-custom-colour-picker__controls{display:grid;grid-template-columns:minmax(0,1fr) 12rem;gap:.8rem;align-items:stretch;padding-top:1rem;border-top:.1rem solid rgba(var(--color-foreground),.1)}.frame-custom-colour-picker__controls .field__input,.frame-custom-colour-picker__mode,.frame-custom-colour-picker__colour-search{min-height:4.4rem;border:.1rem solid rgba(var(--color-foreground),.32);border-radius:.6rem;background:rgba(var(--color-background),1);color:rgb(var(--color-foreground))}.frame-custom-colour-picker__controls .field__input{width:100%;padding:.9rem 1.2rem;box-shadow:0 0 0 .1rem rgba(var(--color-foreground),.04)}.frame-custom-colour-picker__mode{width:100%;padding:0 1rem;font:inherit;cursor:pointer}.frame-custom-colour-picker__colour-search{display:flex;align-items:center;gap:1rem;min-width:0;padding:.6rem 1rem}.frame-custom-colour-picker__colour-search[hidden],.frame-custom-colour-picker__text-search[hidden]{display:none}.frame-custom-colour-picker__colour-input{flex:0 0 auto;width:3rem;height:3rem;padding:0;overflow:hidden;border:0;border-radius:50%;background:transparent;cursor:pointer}.frame-custom-colour-picker__colour-search span:not(.visually-hidden){overflow:hidden;color:rgba(var(--color-foreground),.74);font-size:1.3rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}@media screen and (max-width:749px){.frame-custom-colour-picker__header,.frame-custom-colour-picker__text{align-items:flex-start;flex-direction:column;gap:.2rem}.frame-custom-colour-picker__selected{justify-content:flex-start;text-align:left}.frame-custom-colour-picker__controls{grid-template-columns:minmax(0,1fr)}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/component-frame-picker.css.map */