.csp{--csp-size: 40px;--csp-gap: 12px;--csp-ring-gap: 3px;--csp-ring-width: 2px;--csp-ring-color: #121212;--csp-depth: .7;--csp-radius: 50%;--csp-label-size: 14px;--csp-name-size: 11px;--csp-label-color: currentColor;display:block;width:100%}.csp__fieldset{border:0;margin:0;padding:0;min-width:0}.csp__label{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;padding:0;margin:0 0 12px;font-size:var(--csp-label-size);line-height:1.3;color:var(--csp-label-color)}.csp__label-name{font-weight:700}.csp__label-sep{font-weight:700;margin-left:-3px}.csp__label-value{font-weight:500;opacity:.75}.csp__list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--csp-gap);padding:calc(var(--csp-ring-gap) + var(--csp-ring-width) + 2px);margin:calc((var(--csp-ring-gap) + var(--csp-ring-width) + 2px) * -1)}.csp--align-center .csp__list,.csp--align-center .csp__label{justify-content:center}.csp--align-right .csp__list,.csp--align-right .csp__label{justify-content:flex-end}.csp__item{position:relative;display:flex}.csp__input,.csp__sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.csp__swatch{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}.csp__ring{position:relative;display:block;padding:var(--csp-ring-gap);border:var(--csp-ring-width) solid transparent;border-radius:var(--csp-radius);transition:border-color .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1)}.csp__orb{position:relative;display:block;width:var(--csp-size);height:var(--csp-size);border-radius:calc(var(--csp-radius) * .9 + 0px);background-color:var(--csp-color, #ccc);background-image:var(--csp-image, none);background-size:cover;background-position:center;overflow:hidden;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,opacity .25s ease}.csp--shape-circle .csp__orb{border-radius:50%}.csp--style-glossy .csp__orb{box-shadow:inset 0 calc(var(--csp-size) * -.1) calc(var(--csp-size) * .18) rgba(0,0,0,calc(.45 * var(--csp-depth))),inset 0 calc(var(--csp-size) * .06) calc(var(--csp-size) * .12) rgba(255,255,255,calc(.35 * var(--csp-depth))),inset 0 0 0 1px #00000014,0 calc(var(--csp-size) * .08) calc(var(--csp-size) * .2) rgba(0,0,0,calc(.28 * var(--csp-depth)))}.csp--style-glossy .csp__orb:before{content:"";position:absolute;top:9%;left:18%;width:42%;height:24%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,calc(.85 * var(--csp-depth))),#fff0 72%);transform:rotate(-18deg);pointer-events:none}.csp--style-matte .csp__orb{box-shadow:inset 0 calc(var(--csp-size) * -.12) calc(var(--csp-size) * .25) rgba(0,0,0,calc(.3 * var(--csp-depth))),inset 0 0 0 1px #00000014,0 calc(var(--csp-size) * .06) calc(var(--csp-size) * .16) rgba(0,0,0,calc(.22 * var(--csp-depth)))}.csp--style-matte .csp__orb:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,calc(.28 * var(--csp-depth))),#fff0 60%);pointer-events:none}.csp--style-flat .csp__orb{box-shadow:inset 0 0 0 1px #0000001f}@media(hover:hover){.csp--hover-lift .csp__swatch:hover .csp__ring{transform:translateY(-3px)}.csp--hover-lift .csp__swatch:hover .csp__orb{box-shadow:inset 0 calc(var(--csp-size) * -.1) calc(var(--csp-size) * .18) rgba(0,0,0,calc(.45 * var(--csp-depth))),inset 0 calc(var(--csp-size) * .06) calc(var(--csp-size) * .12) rgba(255,255,255,calc(.35 * var(--csp-depth))),inset 0 0 0 1px #00000014,0 calc(var(--csp-size) * .18) calc(var(--csp-size) * .3) rgba(0,0,0,calc(.3 * var(--csp-depth)))}.csp--hover-scale .csp__swatch:hover .csp__ring{transform:scale(1.08)}.csp__swatch:hover .csp__ring{border-color:#0000002e}}.csp__input:checked+.csp__swatch .csp__ring{border-color:var(--csp-ring-color)}.csp__input:checked+.csp__swatch .csp__name{font-weight:700;opacity:1}.csp__input:focus-visible+.csp__swatch .csp__ring{outline:2px solid var(--csp-ring-color);outline-offset:3px}.csp__item.is-popping .csp__ring{animation:csp-pop .45s cubic-bezier(.34,1.56,.64,1)}@keyframes csp-pop{0%{transform:scale(.88)}60%{transform:scale(1.08)}to{transform:scale(1)}}.csp__name{max-width:calc(var(--csp-size) + 32px);font-size:var(--csp-name-size);line-height:1.25;text-align:center;opacity:.75;word-break:break-word}.csp--tooltip .csp__swatch:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;z-index:3;padding:5px 9px;border-radius:6px;background:#121212;color:#fff;font-size:12px;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease}@media(hover:hover){.csp--tooltip .csp__swatch:hover:after{opacity:1;transform:translate(-50%)}}.csp__item.is-unavailable .csp__orb{opacity:.45}.csp--soldout-cross .csp__item.is-unavailable .csp__orb:after{content:"";position:absolute;top:50%;left:-10%;width:120%;height:2px;background:#fffffff2;box-shadow:0 0 0 1px #0000008c;transform:rotate(-45deg)}.csp--soldout-hide .csp__item.is-unavailable{display:none}@media(prefers-reduced-motion:reduce){.csp__ring,.csp__orb,.csp--tooltip .csp__swatch:after{transition:none}.csp__item.is-popping .csp__ring{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/color-swatch-premium.css.map */