.color-picker{--cp-orange: #F2A422;--cp-cream-deep: #F4EDDF;--cp-border-soft: #EFE8DB;--cp-muted: #8A7F70}color-picker-workshop{display:block;width:100%}.color-picker__label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem}.color-picker__label .form__label{margin-bottom:0}.color-picker__selected-name{font-weight:500;font-style:italic;font-family:var(--font-heading-family);font-size:1.4rem;color:rgb(var(--color-foreground))}.color-picker__core-row{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.6rem}.color-picker__swatch{--cp-swatch-size: 3.6rem;width:var(--cp-swatch-size);height:var(--cp-swatch-size);border-radius:50%;cursor:pointer;position:relative;border:.2rem solid transparent;transition:transform .18s ease;background:none;padding:0;-webkit-appearance:none;appearance:none}@media screen and (min-width:750px){.color-picker__swatch{--cp-swatch-size: 2.8rem}}.color-picker__swatch:before{content:"";position:absolute;top:.2rem;right:.2rem;bottom:.2rem;left:.2rem;border-radius:50%;background:var(--swatch-color);box-shadow:inset 0 0 0 1px #00000014}.color-picker__swatch:hover{transform:scale(1.12)}.color-picker__swatch.is-selected{border-color:rgb(var(--color-foreground))}.color-picker__swatch.is-selected:after{content:"";position:absolute;top:-.6rem;right:-.6rem;bottom:-.6rem;left:-.6rem;border-radius:50%;border:1px solid var(--cp-orange)}.color-picker__swatch:focus-visible{outline:2px solid var(--cp-orange);outline-offset:3px}.color-picker__radio{clip:rect(0,0,0,0);overflow:hidden;position:absolute;height:1px;width:1px}.color-picker__cta{display:inline-flex;align-items:center;gap:.8rem;background:none;border:none;padding:1rem 0 .4rem;font-family:var(--font-heading-family);font-style:italic;font-weight:var(--font-heading-weight);font-size:1.4rem;color:rgb(var(--color-foreground));cursor:pointer;letter-spacing:-.005em;transition:color .2s ease;position:relative}.color-picker__cta:before{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--cp-orange);opacity:.5;transition:opacity .2s ease}.color-picker__cta:hover:before{opacity:1}.color-picker__cta:focus-visible{outline:2px solid var(--cp-orange);outline-offset:3px}.color-picker__cta-arrow{transition:transform .3s cubic-bezier(.4,0,.2,1);font-style:normal;font-family:var(--font-body-family);font-weight:var(--font-body-weight)}.color-picker__cta.is-open .color-picker__cta-arrow{transform:rotate(90deg)}.color-picker__workshop-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),margin-top .45s ease;overflow:hidden;margin-top:0;width:100%}.color-picker__workshop-wrap.is-open{grid-template-rows:1fr;margin-top:1.6rem}.color-picker__workshop-inner{min-height:0}.color-picker__workshop{background:var(--cp-cream-deep);border:1px solid var(--cp-border-soft);border-radius:1.2rem;padding:2rem 2rem 2.2rem;position:relative}.color-picker__workshop:before{content:"";position:absolute;top:-1px;left:2.4rem;width:3.2rem;height:2px;background:var(--cp-orange)}.color-picker__workshop-header{margin-bottom:1.6rem}.color-picker__workshop-title{font-family:var(--font-heading-family);font-weight:var(--font-heading-weight);font-size:1.4rem;letter-spacing:-.005em;margin-bottom:.2rem;color:rgb(var(--color-foreground))}.color-picker__workshop-subtitle{font-size:1.2rem;color:var(--cp-muted);letter-spacing:.02em;font-family:var(--font-body-family)}.color-picker__workshop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem 1rem}@media(max-width:480px){.color-picker__workshop-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}}.color-picker__named-swatch{display:flex;flex-direction:column;align-items:center;gap:.7rem;background:none;border:none;padding:.4rem;cursor:pointer;border-radius:.8rem;transition:background .2s ease;font-family:var(--font-body-family);opacity:0;transform:translateY(6px)}.color-picker__workshop-wrap.is-open.no-animate .color-picker__named-swatch{opacity:1;transform:translateY(0);animation:none}.color-picker__named-swatch:hover{background:rgba(var(--color-foreground),.04)}.color-picker__named-swatch:focus-visible{outline:2px solid var(--cp-orange);outline-offset:3px}.color-picker__named-dot{--cp-dot-size: 3.6rem;width:var(--cp-dot-size);height:var(--cp-dot-size);border-radius:50%;position:relative;transition:transform .18s ease;border:2px solid transparent}@media screen and (min-width:750px){.color-picker__named-dot{--cp-dot-size: 2.8rem}}.color-picker__named-dot:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:50%;background:var(--swatch-color);box-shadow:inset 0 0 0 1px #00000014}.color-picker__named-swatch:hover .color-picker__named-dot{transform:scale(1.08)}.color-picker__named-swatch.is-selected .color-picker__named-dot{border-color:rgb(var(--color-foreground))}.color-picker__named-swatch.is-selected .color-picker__named-dot:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:50%;border:1px solid var(--cp-orange)}.color-picker__named-label{font-size:1.1rem;font-weight:500;color:rgb(var(--color-foreground));letter-spacing:.01em}.color-picker__named-swatch.is-selected .color-picker__named-label{font-weight:600}@keyframes color-picker-swatch-in{to{opacity:1;transform:translateY(0)}}.color-picker__workshop-wrap.is-open .color-picker__named-swatch{animation:color-picker-swatch-in .35s ease forwards}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(1){animation-delay:.05s}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(2){animation-delay:.09s}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(3){animation-delay:.13s}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(4){animation-delay:.17s}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(5){animation-delay:.21s}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(6){animation-delay:.35s}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(7){animation-delay:.39s}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(8){animation-delay:.43s}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(9){animation-delay:.47s}.color-picker__workshop-wrap.is-open .color-picker__named-swatch:nth-child(10){animation-delay:.51s}.color-picker__workshop-wrap:not(.is-open) .color-picker__named-swatch{animation:none;opacity:0;transform:translateY(6px)}.color-picker__upsell{display:flex;align-items:center;gap:1.2rem;margin-top:2rem;padding:1.4rem 1.6rem;background:rgb(var(--color-background));border:1.5px dashed var(--cp-border-soft);border-radius:1rem;cursor:pointer;transition:border-color .2s ease,background .2s ease;font-family:var(--font-body-family);color:rgb(var(--color-foreground));width:100%;text-align:left}.color-picker__upsell:hover{border-color:var(--cp-orange)}.color-picker__upsell.is-active{border-color:rgb(var(--color-foreground));border-style:solid}.color-picker__upsell:focus-visible{outline:2px solid var(--cp-orange);outline-offset:3px}.color-picker__upsell-text{flex:1}.color-picker__upsell-title{font-size:1.4rem;font-weight:600;margin-bottom:.1rem;letter-spacing:.01em}.color-picker__upsell-desc{font-size:1.2rem;color:var(--cp-muted)}.color-picker__upsell-price{font-size:1.3rem;font-weight:600;color:var(--cp-orange);white-space:nowrap}.color-picker__lid-builder-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1),margin-top .4s ease;overflow:hidden;margin-top:0}.color-picker__lid-builder-wrap.is-open{grid-template-rows:1fr;margin-top:1.6rem}.color-picker__lid-builder-inner{min-height:0}.color-picker__lid-builder{background:rgb(var(--color-background));border:1px solid var(--cp-border-soft);border-radius:1rem;padding:1.6rem}.color-picker__lid-builder-title{font-family:var(--font-heading-family);font-weight:var(--font-heading-weight);font-size:1.4rem;letter-spacing:-.005em;margin-bottom:.2rem}.color-picker__lid-builder-subtitle{font-size:1.2rem;color:var(--cp-muted);margin-bottom:1.4rem}.color-picker__comp-chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem;padding-bottom:1.2rem;border-bottom:1px solid var(--cp-border-soft)}.color-picker__comp-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;border:1px solid var(--cp-border-soft);border-radius:2rem;background:rgb(var(--color-background));font-size:1.2rem;font-weight:500;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;font-family:var(--font-body-family);color:rgb(var(--color-foreground))}.color-picker__comp-chip:hover{border-color:rgb(var(--color-foreground))}.color-picker__comp-chip.is-active{border-color:rgb(var(--color-foreground));background:rgb(var(--color-foreground));color:rgb(var(--color-background))}.color-picker__comp-chip:focus-visible{outline:2px solid var(--cp-orange);outline-offset:3px}.color-picker__chip-dot{width:1.2rem;height:1.2rem;border-radius:50%;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.color-picker__comp-chip.is-active .color-picker__chip-dot{border-color:#ffffff4d}.color-picker__lid-palette-label{font-size:1.2rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-muted);margin-bottom:1rem}.color-picker__lid-palette{display:grid;grid-template-columns:repeat(7,1fr);gap:.8rem}@media(max-width:480px){.color-picker__lid-palette{grid-template-columns:repeat(4,1fr)}}.color-picker__lid-swatch{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:none;border:none;padding:.4rem;cursor:pointer;border-radius:.6rem;transition:background .15s ease;font-family:var(--font-body-family)}.color-picker__lid-swatch:hover{background:rgba(var(--color-foreground),.04)}.color-picker__lid-swatch:focus-visible{outline:2px solid var(--cp-orange);outline-offset:2px}.color-picker__lid-dot{width:2.4rem;height:2.4rem;border-radius:50%;border:2px solid transparent;position:relative;transition:transform .15s ease}.color-picker__lid-dot:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:50%;background:var(--swatch-color);box-shadow:inset 0 0 0 1px #00000014}.color-picker__lid-swatch:hover .color-picker__lid-dot{transform:scale(1.08)}.color-picker__lid-swatch.is-selected .color-picker__lid-dot{border-color:rgb(var(--color-foreground))}.color-picker__lid-swatch-label{font-size:1.1rem;font-weight:500;color:var(--cp-muted);text-align:center;line-height:1.1}
/*# sourceMappingURL=/cdn/shop/t/23/assets/component-color-picker.css.map */