.variant-option--buttons:has(.titan-color-swatch){display:flex;flex-wrap:wrap;gap:var(--gap-sm, 11.2px);grid-template-columns:none}.variant-option--buttons:has(.titan-color-swatch) .variant-option__button-label--titan-swatch{flex:0 0 auto;width:auto;min-width:0;min-height:0}.variant-option__button-label--titan-swatch{padding:3px;border:0;background:none;overflow:visible}.variant-option__button-label--titan-swatch:before,.variant-option__button-label--titan-swatch:after{display:none}.titan-color-swatch{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.titan-swatch__dot{display:block;width:32px;height:32px;clip-path:polygon(var(--titan-cut, 10px) 0%,calc(100% - var(--titan-cut, 10px)) 0%,100% var(--titan-cut, 10px),100% calc(100% - var(--titan-cut, 10px)),calc(100% - var(--titan-cut, 10px)) 100%,var(--titan-cut, 10px) 100%,0% calc(100% - var(--titan-cut, 10px)),0% var(--titan-cut, 10px));background:var(--titan-bg);filter:drop-shadow(0 0 .5px rgba(0,0,0,.25));cursor:pointer;position:relative;transition:transform .15s ease,filter .15s ease}.variant-option__button-label--titan-swatch:has(input[type=radio]:checked) .titan-color-swatch:before,.variant-option__button-label--titan-swatch:has(input[type=radio]:checked) .titan-color-swatch:after,.variant-option__button-label--titan-swatch:has(input[type=radio]:focus-visible) .titan-color-swatch:before,.variant-option__button-label--titan-swatch:has(input[type=radio]:focus-visible) .titan-color-swatch:after{content:"";position:absolute;clip-path:polygon(var(--titan-cut, 10px) 0%,calc(100% - var(--titan-cut, 10px)) 0%,100% var(--titan-cut, 10px),100% calc(100% - var(--titan-cut, 10px)),calc(100% - var(--titan-cut, 10px)) 100%,var(--titan-cut, 10px) 100%,0% calc(100% - var(--titan-cut, 10px)),0% var(--titan-cut, 10px));pointer-events:none}.variant-option__button-label--titan-swatch:has(input[type=radio]:checked) .titan-color-swatch:before,.variant-option__button-label--titan-swatch:has(input[type=radio]:focus-visible) .titan-color-swatch:before{top:-4px;right:-4px;bottom:-4px;left:-4px;background:var(--color-foreground, currentColor);z-index:0}.variant-option__button-label--titan-swatch:has(input[type=radio]:checked) .titan-color-swatch:after,.variant-option__button-label--titan-swatch:has(input[type=radio]:focus-visible) .titan-color-swatch:after{top:-2px;right:-2px;bottom:-2px;left:-2px;background:var(--color-background, #fff);z-index:1}.variant-option__button-label--titan-swatch:has(input[type=radio]:checked) .titan-swatch__dot,.variant-option__button-label--titan-swatch:has(input[type=radio]:focus-visible) .titan-swatch__dot{position:relative;z-index:2}.variant-option__button-label--titan-swatch:has(input[type=radio]:checked) .titan-swatch__dot{transform:scale(1.05)}.variant-option__button-label--titan-swatch:hover .titan-swatch__dot{transform:scale(1.08)}.titan-swatch__name{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);width:max-content;max-width:min(160px,42vw);overflow-wrap:anywhere;text-align:center;background:#111;color:#fff;font-size:11px;line-height:1.2;padding:4px 8px;border-radius:4px;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;z-index:20}@media(hover:hover)and (pointer:fine){.variant-option__button-label--titan-swatch:hover .titan-swatch__name,.variant-option__button-label--titan-swatch:has(:focus-visible) .titan-swatch__name{opacity:1;visibility:visible}}.titan-swatch__dot.titan-swatch--sold-out{opacity:.3}@media(forced-colors:active){.variant-option__button-label--titan-swatch:has(input[type=radio]:checked) .titan-swatch__dot,.variant-option__button-label--titan-swatch:has(input[type=radio]:focus-visible) .titan-swatch__dot{outline:2px solid CanvasText;outline-offset:2px}}.variant-option--buttons:has(.titan-color-swatch) .variant-option__button-label--titan-swatch:first-of-type:not(.variant-option__button-label--titan-last) .titan-swatch__name{left:0;right:auto;transform:none}.variant-option--buttons:has(.titan-color-swatch) .variant-option__button-label--titan-swatch:last-of-type:not(.variant-option__button-label--titan-last) .titan-swatch__name,.variant-option--buttons:has(.titan-color-swatch) .variant-option__button-label--titan-last .titan-swatch__name{left:auto;right:0;transform:none}@media(prefers-reduced-motion:reduce){.titan-swatch__dot,.titan-swatch__name{transition:none}}.titan-swatch__dot--img{width:var(--titan-sw-m, 52px);height:var(--titan-sw-m, 52px);background:none}.titan-swatch__img{width:100%;height:100%;object-fit:var(--titan-fit, cover);object-position:var(--titan-pos, center top);display:block}.variant-option__button-label--titan-img{padding:4px}.variant-option--buttons:has(.titan-swatch__dot--img){gap:var(--titan-gap-m, 10px);overflow-x:clip;overflow-y:visible}.variant-option--buttons:has(.titan-swatch__dot--img) .variant-option__button-label--titan-last{order:1}.variant-option__button-label--titan-hidden{display:none}@media screen and (min-width:750px){.titan-swatch__dot--img{width:var(--titan-sw-d, 56px);height:var(--titan-sw-d, 56px)}.variant-option--buttons:has(.titan-swatch__dot--img){gap:var(--titan-gap-d, 12px)}}variant-picker.titan-picker--offscreen{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
/*# sourceMappingURL=/cdn/shop/t/87/assets/titan-color-swatches.css.map */