.variant-image-button{display:inline-flex;flex-direction:column;align-items:center;gap:var(--padding-xs, 4px)}.variant-image-button__button{position:relative;border:2px solid var(--color-variant-border, #e0e0e0);border-radius:var(--variant-picker-swatch-radius, 50%);background:transparent;padding:0;cursor:pointer;transition:all var(--animation-speed, .2s) var(--animation-easing, ease);overflow:hidden;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.variant-image-button--small .variant-image-button__button{width:44px;height:44px}.variant-image-button--medium .variant-image-button__button{width:60px;height:60px}.variant-image-button--large .variant-image-button__button{width:80px;height:80px}.variant-image-button__image{width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform var(--animation-speed, .2s) var(--animation-easing, ease)}.variant-image-button__placeholder{width:100%;height:100%;background:var(--color-variant-background, #f5f5f5);border-radius:inherit;display:flex;align-items:center;justify-content:center;color:var(--color-variant-text, #666);font-size:.75rem;font-weight:600;text-transform:uppercase}.variant-image-button__placeholder-text{line-height:1}.variant-image-button__label{font-size:.75rem;color:var(--color-foreground, #333);text-align:center;line-height:1.2;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.variant-image-button__unavailable{position:absolute;top:0;left:0;right:0;bottom:0;background:#0000004d;border-radius:inherit;display:flex;align-items:center;justify-content:center}.variant-image-button__unavailable:after{content:"";width:100%;height:2px;background:#fff;transform:rotate(45deg);position:absolute}.variant-image-button__button:hover{border-color:var(--color-variant-hover-border, #333);transform:scale(1.05)}.variant-image-button__button:hover .variant-image-button__image{transform:scale(1.1)}.variant-image-button__button:focus-visible{outline:var(--focus-outline-width, 2px) solid var(--color-foreground, #333);outline-offset:var(--focus-outline-offset, 2px)}.variant-image-button__button[aria-pressed=true],.variant-image-button__button.selected{border-color:var(--color-foreground, #333);box-shadow:0 0 0 2px var(--color-background, #fff),0 0 0 4px var(--color-foreground, #333)}.variant-image-button__button:disabled{opacity:.6;cursor:not-allowed}.variant-image-button__button:disabled:hover{transform:none;border-color:var(--color-variant-border, #e0e0e0)}.variant-image-button__button:disabled:hover .variant-image-button__image{transform:none}.variant-image-buttons-group{display:flex;flex-wrap:wrap;gap:var(--gap-sm, 8px);align-items:flex-start}.variant-image-buttons-group--center{justify-content:center}.variant-image-buttons-group--end{justify-content:flex-end}@media (max-width: 749px){.variant-image-button__button{width:50px;height:50px}.variant-image-button--small .variant-image-button__button{width:40px;height:40px}.variant-image-button--large .variant-image-button__button{width:70px;height:70px}.variant-image-button__label{font-size:.7rem;max-width:50px}}@media (prefers-contrast: more){.variant-image-button__button{border-width:3px}.variant-image-button__button:focus-visible{outline-width:3px}.variant-image-button__button[aria-pressed=true],.variant-image-button__button.selected{box-shadow:0 0 0 3px var(--color-background, #fff),0 0 0 6px var(--color-foreground, #333)}}
/*# sourceMappingURL=/cdn/shop/t/108/assets/variant-image-buttons.css.map */