.q4-swatches{--q4-swatch-gap: 10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:var(--q4-swatch-justify, flex-start);gap:var(--q4-swatch-gap);width:100%;margin:0;padding:4px 3px;box-sizing:border-box}.q4-swatches--empty{height:calc(var(--q4-swatch-size, 28px) * .86 + 8px);pointer-events:none}@media screen and (min-width:700px){.q4-swatches--empty{height:calc(var(--q4-swatch-size, 28px) + 8px)}}.q4-swatch{--size: calc(var(--q4-swatch-size, 28px) * .86);position:relative;display:inline-flex;flex:none;width:var(--size);height:var(--size);margin:0;padding:0;border:0;border-radius:50%;background:#ededed;box-shadow:inset 0 0 0 1px #00000014;cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;transition:transform .2s ease}@media screen and (min-width:700px){.q4-swatch{--size: var(--q4-swatch-size, 28px)}}.q4-swatch__image,.q4-swatch__color{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;pointer-events:none}.q4-swatch__image{object-fit:cover;object-position:center 28%;max-width:none;margin:0}.q4-swatch__color{box-shadow:inset 0 0 0 1px #0000001a}.q4-swatch:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;border:1px solid currentColor;opacity:0;transition:opacity .2s ease;pointer-events:none}@media(hover:hover){.q4-swatch:hover:after{opacity:.35}}.q4-swatch[aria-pressed=true]:after{opacity:1}.q4-swatch:focus-visible{outline:none}.q4-swatch:focus-visible:after{opacity:1;border-width:2px}.q4-swatch--sold-out .q4-swatch__image,.q4-swatch--sold-out .q4-swatch__color{opacity:.45}.q4-swatch--sold-out:before{content:"";position:absolute;top:50%;left:8%;width:84%;height:1px;background:currentColor;opacity:.55;transform:rotate(-45deg);pointer-events:none;z-index:1}.q4-swatches__more{font-size:11px;line-height:1;letter-spacing:.04em;opacity:.7;text-decoration:none;color:inherit;padding:4px 2px}.q4-swatches__more:hover{opacity:1}.q4-variant-selected .product-card__image--secondary{display:none!important}.q4-variant-selected .product-card__image--primary{opacity:1!important;visibility:visible!important}
/*# sourceMappingURL=/cdn/shop/t/15/assets/q4-color-swatches.css.map */