.product-form__input--variant-image{--variant-image-size: 56px;--variant-image-radius: 8px;--variant-image-gap: 8px;--variant-image-ratio: 1 / 1;display:flex;flex-wrap:wrap;gap:var(--variant-image-gap);border:0;margin:0 0 1.4rem;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(40px,var(--variant-image-size),120px);min-block-size:40px;padding:2px;border:1px solid rgba(var(--color-foreground),.18);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, .15s) ease,box-shadow var(--duration-short, .15s) ease}.variant-image__label:hover{border-color:rgba(var(--color-foreground),.45)}.variant-image__img{display:block;inline-size:100%;block-size:auto;aspect-ratio:var(--variant-image-ratio, 1 / 1);object-fit:cover;border-radius:max(0px,calc(var(--variant-image-radius) - 2px));transition:opacity var(--duration-short, .15s) ease}.variant-image__text{display:flex;align-items:center;justify-content:center;inline-size:100%;aspect-ratio:var(--variant-image-ratio, 1 / 1);padding:4px;font-size:1.2rem;font-weight:500;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:max(0px,calc(var(--variant-image-radius) - 2px))}.product-form__input--variant-image input[type=radio]:checked+.variant-image__label{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 calc(var(--variant-image-border-w, 1px) - 1px) rgb(var(--color-foreground));transform:none}.product-form__input--vi-solid input[type=radio]:checked+.variant-image__label{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 calc(var(--variant-image-border-w, 1px) - 1px) rgb(var(--color-foreground));transform:none}.product-form__input--vi-subtle input[type=radio]:checked+.variant-image__label{border-color:rgb(var(--color-foreground));box-shadow:none;transform:none}.product-form__input--vi-ring input[type=radio]:checked+.variant-image__label{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 .5px rgb(var(--color-foreground));transform:none}.product-form__input--variant-image input[type=radio]:checked+.variant-image__label .variant-image__img{opacity:1}.product-form__input--variant-image input[type=radio]:focus-visible+.variant-image__label{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.3rem}.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/33/assets/component-variant-image-picker.css.map */