.swatch{--swatch--size: var(--swatch-input--size, 4.4rem);--swatch--border-radius: var(--swatch-input--border-radius, 50%);display:block;width:var(--swatch--size);max-width:100%;aspect-ratio:1 / 1;background:var(--swatch--background);background-position:var(--swatch-focal-point, initial);background-size:cover;background-origin:border-box;border:.1rem solid rgba(var(--color-foreground),.15);border-radius:var(--swatch--border-radius)}.swatch--square{--swatch--border-radius: var(--swatch-input--border-radius, .2rem)}.swatch--unavailable{border-style:dashed;border-color:rgba(var(--color-foreground),.5)}.product-card-color-swatches{margin-top:.8rem}.product-card-color-swatches .swatch-container{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.product-card-color-swatches .swatch-label{display:block;width:2.4rem;height:2.4rem;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s ease;position:relative;background-size:cover;background-position:center}.product-card-color-swatches .swatch-label:hover{transform:scale(1.1);border-color:rgba(var(--color-foreground),.3)}.product-card-color-swatches .swatch-input:checked+.swatch-label{border-color:rgba(var(--color-foreground),.8);box-shadow:0 0 0 2px rgba(var(--color-foreground),.1)}.product-card-color-swatches .swatch-label:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:.8rem;height:.8rem;background:#fff;border-radius:50%;opacity:0;transition:opacity .2s ease}.product-card-color-swatches .swatch-input:checked+.swatch-label:after{opacity:1}.product-card-image{transition:opacity .3s ease}@media screen and (max-width: 749px){.product-card-color-swatches .swatch-label{width:2rem;height:2rem}.product-card-color-swatches .swatch-label:after{width:.6rem;height:.6rem}}.variant-selector{margin-top:1rem}.swatch-container .swatch-wrapper{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.swatch-container .swatch-wrapper .swatch-element{width:30px;height:30px;background-size:cover;background-position:center;background-repeat:no-repeat;display:block;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:all .2s ease;position:relative;background-color:#f0f0f0}.swatch-container .swatch-wrapper .swatch-element[style*=background-image]{background-color:transparent}.swatch-container .swatch-wrapper .swatch-element:hover{transform:scale(1.1);border-color:rgba(var(--color-foreground),.3)}.swatch-container .swatch-wrapper .swatch-element.active{border-color:rgba(var(--color-foreground),.8);box-shadow:0 0 0 2px rgba(var(--color-foreground),.1)}.swatch-container .swatch-wrapper .swatch-element.active:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 2px #0000004d}.add-to-cart-container{display:flex;align-items:center;gap:10px;margin-top:15px}.quantity-selector{display:flex;align-items:center;border:1px solid rgba(var(--color-foreground),.2);border-radius:4px;overflow:hidden}.quantity-button{background:rgba(var(--color-foreground),.05);border:none;padding:8px 12px;cursor:pointer;font-size:14px;font-weight:700;transition:background-color .2s ease}.quantity-button:hover{background:rgba(var(--color-foreground),.1)}.quantity-button:active{background:rgba(var(--color-foreground),.15)}.quantity-input{border:none;padding:8px 12px;text-align:center;min-width:50px;font-size:14px;background:transparent}.quantity-input:focus{outline:none;background:rgba(var(--color-foreground),.02)}.add-to-cart-button{background:rgb(var(--color-button));color:rgb(var(--color-button-text));border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;flex:1}.add-to-cart-button:hover{background:rgb(var(--color-button));opacity:.9;transform:translateY(-1px)}.add-to-cart-button:active{transform:translateY(0)}.primary_image{transition:opacity .3s ease}@media screen and (max-width: 749px){.swatch-container .swatch-wrapper .swatch-element{width:25px;height:25px}.swatch-container .swatch-wrapper .swatch-element.active:after{width:6px;height:6px}.add-to-cart-container{flex-direction:column;align-items:stretch}.quantity-selector{justify-content:center}.add-to-cart-button{margin-top:10px}}
/*# sourceMappingURL=/cdn/shop/t/16/assets/component-swatch.css.map */