.enhanced-color-picker{margin:1.5rem 0 2rem;font-family:var(--font-body-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)}.color-picker-title{font-size:1.1rem;font-weight:600;color:rgba(var(--color-foreground),.8);margin:0 0 .8rem;letter-spacing:.05rem;text-transform:uppercase;line-height:1.2}@media screen and (min-width: 750px){.color-picker-title{font-size:1.2rem}}.productcolors.enhanced{display:flex;flex-wrap:wrap;gap:.8rem;list-style:none;margin:0;padding:0;align-items:flex-start}@media screen and (min-width: 480px){.productcolors.enhanced{gap:1rem}}.color-option-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.color-option-wrapper:hover{transform:translateY(-2px)}.color-option{width:48px;height:48px;border-radius:4px;border:2px solid rgba(var(--color-foreground),.1);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;display:block;text-decoration:none;overflow:hidden;background-clip:content-box;box-shadow:0 2px 8px rgba(var(--color-foreground),.1)}@media screen and (min-width: 480px){.color-option{width:52px;height:52px}}@media screen and (min-width: 750px){.color-option{width:56px;height:56px}}.color-option:hover{transform:scale(1.05);border-color:rgba(var(--color-foreground),.4);box-shadow:0 4px 15px rgba(var(--color-foreground),.2)}.color-option:focus{outline:none;border-color:rgb(var(--color-foreground));box-shadow:0 0 0 2px rgb(var(--color-background)),0 0 0 4px rgb(var(--color-foreground))}.color-option.active{transform:scale(1.15);border-color:rgb(var(--color-foreground));box-shadow:0 0 0 2px rgb(var(--color-background)),0 0 0 4px rgb(var(--color-foreground)),0 6px 20px rgba(var(--color-foreground),.3);position:relative;z-index:2}.color-option.active:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;background:rgb(var(--color-background));border:2px solid rgb(var(--color-foreground));border-radius:50%;transform:translate(-50%,-50%);opacity:0;animation:checkMarkAppear .3s ease forwards}@keyframes checkMarkAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.color-option[style*="#000000"],.color-option[style*="#000"]{background:#000;border-color:#fff3}.color-option[style*="#000000"]:hover,.color-option[style*="#000"]:hover{border-color:#ffffff80}.color-option[style*="#000000"].active:after,.color-option[style*="#000"].active:after{background:#fff;border-color:#000}.color-option[style*="#FFFFFF"],.color-option[style*="#ffffff"],.color-option[style*="#FFF"],.color-option[style*="#fff"]{background:#fff;border-color:rgba(var(--color-foreground),.2)}.color-option[style*="#FFFFFF"]:hover,.color-option[style*="#ffffff"]:hover,.color-option[style*="#FFF"]:hover,.color-option[style*="#fff"]:hover{border-color:rgba(var(--color-foreground),.4)}.color-option[style*="#808080"],.color-option[style*=grey],.color-option[style*=gray]{background:linear-gradient(135deg,gray,silver);border-color:rgba(var(--color-foreground),.2)}.color-option[style*="#4A90E2"],.color-option[style*=blue]{background:#4a90e2;border-color:#fff3}.color-option[style*="#8B4513"],.color-option[style*=brown]{background:#8b4513;border-color:#fff3}.color-option[style*="#800080"],.color-option[style*=purple]{background:purple;border-color:#fff3}.custom-color{background:linear-gradient(45deg,red,#ff8000,#ff0,#80ff00,#00ff80,#0080ff,#8000ff);border-color:rgba(var(--color-foreground),.2);position:relative}.custom-color img{width:100%;height:100%;object-fit:cover;border-radius:50%}.custom-color:before{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffffffe6;font-size:1.5rem;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.5);z-index:1;pointer-events:none}.color-label{font-size:.75rem;color:rgba(var(--color-foreground),.7);text-align:center;transition:all .3s ease;white-space:nowrap;font-weight:500;letter-spacing:.02em;text-transform:uppercase;min-height:1rem;display:flex;align-items:center;justify-content:center}@media screen and (min-width: 480px){.color-label{font-size:.8rem}}.color-label.active{color:rgb(var(--color-foreground));font-weight:700;transform:scale(1.05)}.custom-color-input{background:rgba(var(--color-foreground),.03);border:1px solid rgba(var(--color-foreground),.15);border-radius:12px;padding:1.5rem;margin-top:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(-10px);opacity:0}.custom-color-input.show{opacity:1;transform:translateY(0);background:rgba(var(--color-foreground),.05);border-color:rgba(var(--color-foreground),.2)}.custom-color-input.hide{display:none}.custom-color-label{display:block;font-size:.875rem;font-weight:600;color:rgb(var(--color-foreground));margin-bottom:1rem;letter-spacing:.02em}.custom-color-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}@media screen and (min-width: 480px){.custom-color-controls{flex-wrap:nowrap}}.custom-color-field{width:60px;height:48px;border:2px solid rgba(var(--color-foreground),.2);border-radius:8px;cursor:pointer;transition:all .3s ease;background:rgb(var(--color-background))}.custom-color-field:hover{border-color:rgba(var(--color-foreground),.4);transform:scale(1.05)}.custom-color-field:focus{outline:none;border-color:rgb(var(--color-foreground));box-shadow:0 0 0 3px rgba(var(--color-foreground),.2)}.btn-secondary,.btn-tertiary{padding:.75rem 1.25rem;border:2px solid rgba(var(--color-foreground),.2);border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;transition:all .3s ease;min-height:48px;display:flex;align-items:center;justify-content:center;white-space:nowrap}.btn-secondary{background:rgb(var(--color-foreground));color:rgb(var(--color-background));border-color:rgb(var(--color-foreground))}.btn-secondary:hover{background:rgba(var(--color-foreground),.9);transform:translateY(-2px);box-shadow:0 4px 15px rgba(var(--color-foreground),.25)}.btn-secondary:active{transform:translateY(0)}.btn-tertiary{background:rgb(var(--color-background));color:rgb(var(--color-foreground));border-color:rgba(var(--color-foreground),.3)}.btn-tertiary:hover{background:rgba(var(--color-foreground),.05);border-color:rgba(var(--color-foreground),.5);transform:translateY(-1px)}.btn-tertiary:active{transform:translateY(0)}.color-availability-note{margin-top:1rem;padding:.75rem 1rem;background:rgba(var(--color-foreground),.03);border-radius:8px;border-left:4px solid rgba(var(--color-foreground),.3)}.color-availability-note small{color:rgba(var(--color-foreground),.7);font-size:.8rem;font-style:italic;letter-spacing:.01em}.enhanced-color-picker.hidden-for-product-type{display:none}.enhanced-color-picker.loading{opacity:.6;pointer-events:none}.enhanced-color-picker.loading:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(var(--color-background),.8);display:flex;align-items:center;justify-content:center;z-index:10}@media screen and (max-width: 479px){.enhanced-color-picker{margin:1rem 0 1.5rem}.color-picker-title{font-size:1rem;margin-bottom:.75rem}.productcolors.enhanced{gap:.75rem;justify-content:center}.color-option{width:44px;height:44px}.color-label{font-size:.7rem}.custom-color-input{padding:1rem}.custom-color-controls{flex-direction:column;align-items:stretch;gap:.75rem}.custom-color-field{width:100%;max-width:120px;align-self:center}}@media (prefers-reduced-motion: reduce){.color-option,.color-option-wrapper,.custom-color-input,.btn-secondary,.btn-tertiary{transition:none}.color-option.active:after{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (prefers-contrast: high){.color-option,.color-option:hover,.color-option.active{border-width:4px}.custom-color-input{border-width:2px}.btn-secondary,.btn-tertiary{border-width:3px}}.color-option:focus-visible{outline:3px solid rgb(var(--color-foreground));outline-offset:3px}.custom-color-field:focus-visible,.btn-secondary:focus-visible,.btn-tertiary:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}.color-option-wrapper.fade-in{animation:colorSwatchAppear .4s ease forwards}@keyframes colorSwatchAppear{0%{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.color-option:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(var(--color-foreground),.1);border-radius:50%;transform:translate(-50%,-50%);transition:all .3s ease;pointer-events:none}.color-option:hover:before{width:120%;height:120%}@media print{.enhanced-color-picker{display:none}}.enhanced-color-picker{--color-picker-accent: rgb(var(--color-foreground));--color-picker-background: rgb(var(--color-background));--color-picker-border: rgba(var(--color-foreground), .15);--color-picker-hover: rgba(var(--color-foreground), .05)}@media (prefers-color-scheme: dark){.enhanced-color-picker{--color-picker-border: rgba(var(--color-foreground), .2);--color-picker-hover: rgba(var(--color-foreground), .08)}.color-option{box-shadow:0 2px 8px #0000004d}.color-option:hover{box-shadow:0 4px 15px #0006}.color-option.active{box-shadow:0 0 0 2px rgb(var(--color-background)),0 0 0 4px rgb(var(--color-foreground)),0 6px 20px #0006}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/enhanced-color-picker.css.map */