.frame-swatch{--frame-paper: #f3ecdd;--frame-light-wood: linear-gradient(140deg, #d7ae77 0%, #bd8f54 55%, #d7ae77 100%);--frame-dark-wood: linear-gradient(140deg, #70492a 0%, #4b2f18 55%, #70492a 100%);--frame-neutral-wood: linear-gradient(140deg, #bb9d79 0%, #97795a 55%, #bb9d79 100%);--frame-black: #1c1c1c;--frame-white: #f7f6f2;--frame-swatch-size: 4rem;--frame-moulding-width: .5rem;display:block;position:relative;box-sizing:border-box;width:var(--frame-swatch-size);height:var(--frame-swatch-size);padding:var(--frame-moulding-width);border-radius:.2rem;box-shadow:inset 0 0 0 1px #00000024}.frame-swatch__paper{display:block;width:100%;height:100%;background-color:var(--frame-paper)}.frame-swatch--light-wood{background:var(--frame-light-wood)}.frame-swatch--dark-wood{background:var(--frame-dark-wood)}.frame-swatch--black{background:var(--frame-black)}.frame-swatch--white{background:var(--frame-white)}.frame-swatch--generic{background:var(--frame-neutral-wood)}.frame-swatch--none{padding:0;background:var(--frame-paper);box-shadow:inset 0 0 0 1px rgba(var(--color-foreground),.25)}.frame-swatch--none:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top right,transparent calc(50% - .5px),rgba(var(--color-foreground),.4) calc(50% - .5px),rgba(var(--color-foreground),.4) calc(50% + .5px),transparent calc(50% + .5px))}.product-form__input--frame .form__label{margin-bottom:.8rem}.product-form__input--frame .form__label [data-selected-value]{font-weight:600}.frame-picker{display:flex;flex-wrap:wrap;gap:.4rem}.frame-picker__label{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:4.8rem;height:4.8rem;border-radius:.3rem;cursor:pointer;transition:box-shadow var(--duration-short) ease}.frame-picker__label:hover{box-shadow:inset 0 0 0 1px rgba(var(--color-foreground),.45)}.frame-picker__input:checked+.frame-picker__label{box-shadow:inset 0 0 0 2px rgb(var(--color-foreground))}.frame-picker__input:focus-visible+.frame-picker__label,.frame-picker__input.focused+.frame-picker__label{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.2rem}.frame-picker__input.disabled+.frame-picker__label,.frame-picker__input:disabled+.frame-picker__label{cursor:not-allowed;opacity:.3}@media screen and (forced-colors:active){.frame-picker__input:checked+.frame-picker__label{outline:.2rem solid;outline-offset:-.2rem}}@media screen and (min-width:750px){.frame-swatch{--frame-swatch-size: 3.4rem;--frame-moulding-width: .4rem}.frame-picker__label{width:4.2rem;height:4.2rem}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/component-frame-picker.css.map */