.variant-option--buttons:has(.titan-color-swatch){display:flex;flex-wrap:wrap;gap:var(--gap-sm, 8px);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(10px 0%,calc(100% - 10px) 0%,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0% calc(100% - 10px),0% 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{content:"";position:absolute;top:-3px;right:-4px;bottom:-3px;left:-4px;clip-path:polygon(10px 0%,calc(100% - 10px) 0%,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0% calc(100% - 10px),0% 10px);background:#888}.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;background:#111;color:#fff;font-size:11px;line-height:1.2;padding:4px 8px;border-radius:4px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;z-index:20}.variant-option__button-label--titan-swatch:hover .titan-swatch__name,.variant-option__button-label--titan-swatch:focus-within .titan-swatch__name{opacity:1;visibility:visible}.titan-swatch__dot.titan-swatch--sold-out{opacity:.3}.variant-option__button-label--titan-swatch:has(input[type=radio]:focus-visible) .titan-swatch__dot{filter:drop-shadow(2px 0 0 var(--titan-swatch-ring, currentColor)) drop-shadow(-2px 0 0 var(--titan-swatch-ring, currentColor)) drop-shadow(0 2px 0 var(--titan-swatch-ring, currentColor)) drop-shadow(0 -2px 0 var(--titan-swatch-ring, currentColor))}
/*# sourceMappingURL=/cdn/shop/t/52/assets/titan-color-swatches.css.map */