.product-form__input--variant-image{--variant-image-size: 80px;--variant-image-radius: 4px;--variant-image-gap: 4px;display:flex;flex-wrap:wrap;gap:var(--variant-image-gap);border:0;margin:0 0 1.2rem;padding:0;max-width:100%;position:relative}.product-form__input--variant-image legend{flex:1 0 100%;margin-block-end:.6rem;padding:0}.product-form__input--variant-image input[type=radio]{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}.variant-image__label{display:block;position:relative;inline-size:clamp(44px,var(--variant-image-size),120px);min-block-size:44px;padding:0;border:1px solid rgba(var(--color-foreground),.12);border-radius:var(--variant-image-radius);cursor:pointer;background-color:rgb(var(--color-background));-webkit-tap-highlight-color:transparent;transition:border-color var(--duration-short, .1s) ease,outline-color var(--duration-short, .1s) ease;margin-right:5px}.variant-image__img{display:block;inline-size:100%;block-size:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:calc(var(--variant-image-radius) - 1px);transition:opacity var(--duration-short, .1s) ease}.variant-image__text{display:flex;align-items:center;justify-content:center;inline-size:100%;aspect-ratio:3 / 4;padding:2px;font-size:1.1rem;line-height:1.2;text-align:center;overflow-wrap:anywhere;color:rgba(var(--color-foreground),.85);background-color:rgba(var(--color-foreground),.04);border-radius:calc(var(--variant-image-radius) - 1px)}.product-form__input--variant-image input[type=radio]:checked+.variant-image__label{border-color:rgb(var(--color-foreground));outline:.1rem solid rgb(var(--color-foreground));outline-offset:.2rem}.product-form__input--variant-image input[type=radio]:checked+.variant-image__label .variant-image__img{opacity:.75}.product-form__input--variant-image input[type=radio]:focus-visible+.variant-image__label{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.2rem}.variant-image__label--soldout .variant-image__img,.variant-image__label--soldout .variant-image__text{opacity:.45}.variant-image__label--soldout:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:calc(var(--variant-image-radius) - 1px);overflow:hidden;background-image:linear-gradient(to top left,transparent calc(50% - 1px),rgba(var(--color-foreground),.55) calc(50% - 1px),rgba(var(--color-foreground),.55) calc(50% + 1px),transparent calc(50% + 1px))}.variant-image__tooltip{display:none}@media(min-width:750px)and (hover:hover)and (pointer:fine){.variant-image__tooltip{display:block;position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;transform:translate(-50%);z-index:2;padding:4px 8px;border-radius:8px;background-color:rgb(var(--color-foreground));color:rgb(var(--color-background));font-size:1.1rem;line-height:1.4;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-short, .1s) ease,visibility 0s linear var(--duration-short, .1s)}.variant-image__label:hover .variant-image__tooltip,.product-form__input--variant-image input[type=radio]:focus-visible+.variant-image__label .variant-image__tooltip{opacity:1;visibility:visible;transition-delay:0s}.variant-image__label:hover{border-color:rgba(var(--color-foreground),.4)}}@media(prefers-reduced-motion:reduce){.variant-image__label,.variant-image__img,.variant-image__tooltip{transition:none}}@media screen and (forced-colors:active){.product-form__input--variant-image input[type=radio]:checked+.variant-image__label{outline:.2rem solid CanvasText}.variant-image__label--soldout:after{background-image:none;border-block-start:.1rem solid CanvasText}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-variant-image-picker.css.map */