:root{--swatch-gap-desktop:20px;--swatch-gap-mobile:15px;--swatch-radius:8px;--swatch-border:3px;--swatch-selected-extra:2px;--swatch-pad-y:10px;--swatch-pad-x:12px;--swatch-row-height:48px;--swatch-line-height:1.2;--swatch-label-reserve:1.5em;--swatch-label-gap:10px}
.product-form__input--swatch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:calc(var(--swatch-label-reserve) + var(--swatch-label-gap));grid-auto-rows:var(--swatch-row-height);align-content:start;column-gap:var(--swatch-gap-desktop);row-gap:var(--swatch-gap-desktop);width:100%;margin:10px 3px 0;padding:0;box-sizing:border-box;min-height:calc(var(--swatch-label-reserve) + var(--swatch-label-gap) + (var(--swatch-row-height)*1))}
@media (max-width:520px){.product-form__input--swatch{column-gap:var(--swatch-gap-mobile);row-gap:var(--swatch-gap-mobile);min-height:calc(var(--swatch-label-reserve) + var(--swatch-label-gap) + (var(--swatch-row-height)*1))}}
.product-form__input--swatch>legend.form__label{grid-column:1/-1;grid-row:1;display:block;margin:0;padding:0;line-height:1.2;min-height:var(--swatch-label-reserve);max-height:var(--swatch-label-reserve);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:end}
.product-form__input--swatch input[type="radio"]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
.product-form__input--swatch .variant-swatch__label{--swatch-accent:var(--swatch-bg,#000);display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:var(--swatch-row-height);padding:var(--swatch-pad-y) var(--swatch-pad-x);background:#fff;color:#000;border:var(--swatch-border) solid var(--swatch-accent);border-radius:var(--swatch-radius);box-sizing:border-box;font-size:var(--font-size-body);line-height:var(--swatch-line-height);letter-spacing:.02rem;font-family:var(--font-body-family);font-style:var(--font-body-style);font-weight:var(--font-body-weight);text-align:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.product-form__input--swatch input[type="radio"]:checked+.variant-swatch__label{box-shadow:0 0 0 var(--swatch-selected-extra) var(--swatch-accent) inset}
.product-form__input--swatch .variant-swatch__name{margin:0;padding:0;line-height:inherit;color:inherit;white-space:nowrap}
.product-form__input--swatch .variant-swatch__name br{display:none!important}
.product-form__input--swatch .variant-swatch__label>*{pointer-events:none}
.variant-swatch__label .label-unavailable{display:none}
input.visually-disabled+.variant-swatch__label{opacity:.55;cursor:not-allowed}
