.variant-picker-inline{display:flex;gap:var(--vpi-gap, 16px);margin-bottom:20px;width:100%}.variant-picker-inline--bundle{flex-wrap:wrap;align-items:flex-start}.variant-picker-inline--bundle .variant-picker-inline__group{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.variant-picker-inline__group{flex:1;min-width:0;margin:0;padding:0;border:none;display:flex;flex-direction:column}.variant-picker-inline__label{display:flex;align-items:center;font-size:.8125rem;font-weight:var(--font-body-bold-weight, 600);letter-spacing:.02em;text-transform:uppercase;margin-bottom:9px;color:var(--color-body);white-space:nowrap}.variant-picker-inline__buttons{display:flex;flex-wrap:wrap;gap:var(--vpi-button-gap, 8px);align-content:flex-start}.variant-picker-inline__button-input{position:absolute;clip:rect(0,0,0,0);overflow:hidden;height:1px;width:1px}.variant-picker-inline__button-label{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:6px 18px;font-size:.875rem;font-weight:500;color:var(--color-body);background-color:var(--bg-body, #fff);border:var(--vpi-border-width, 2px) solid var(--color-border, #e2e2e2);border-radius:var(--vpi-border-radius, 8px);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}.variant-picker-inline__button-label:hover{border-color:var(--color-body)}.variant-picker-inline__button-input:checked+.variant-picker-inline__button-label{border-color:var(--color-body);background-color:rgba(var(--color-body-rgb, 21, 21, 21),.03)}.variant-picker-inline__button-input:focus-visible+.variant-picker-inline__button-label{outline:2px solid var(--color-accent, #151515);outline-offset:2px}.variant-picker-inline__button-input.is-disabled+.variant-picker-inline__button-label{position:relative;opacity:.5}.variant-picker-inline__button-input.is-disabled+.variant-picker-inline__button-label:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom left,transparent calc(50% - 1px),var(--color-border),transparent calc(50% + 1px)) no-repeat;border-radius:inherit}.variant-picker-inline__swatches{display:flex;flex-wrap:wrap;gap:var(--vpi-button-gap, 8px);align-content:flex-start}.variant-picker-inline__swatch-input{position:absolute;clip:rect(0,0,0,0);overflow:hidden;height:1px;width:1px}.variant-picker-inline__swatch-label{position:relative;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:var(--vpi-border-width, 2px) solid var(--color-border, #e2e2e2);border-radius:var(--vpi-border-radius, 8px);cursor:pointer;transition:border-color .2s ease;text-indent:-9999px;color:transparent}.variant-picker-inline__swatch-label:after{content:"";position:absolute;top:10px;left:10px;right:10px;bottom:10px;border-radius:50%;background-color:var(--swatch-color, #ccc);background-image:var(--swatch-image);background-size:cover;background-position:center;transition:transform .2s ease;border:1px solid rgba(0,0,0,.1)}.variant-picker-inline__swatch-label:hover{border-color:var(--color-body)}.variant-picker-inline__swatch-label:hover:after{transform:scale(.9)}.variant-picker-inline__swatch-input:checked+.variant-picker-inline__swatch-label{border-color:var(--color-body)}.variant-picker-inline__swatch-input:focus-visible+.variant-picker-inline__swatch-label{outline:2px solid var(--color-accent, #151515);outline-offset:2px}.variant-picker-inline__swatch-input.is-disabled+.variant-picker-inline__swatch-label:after{opacity:.4}.variant-picker-inline__swatch-input.is-disabled+.variant-picker-inline__swatch-label:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom left,transparent calc(50% - 1px),var(--color-border),transparent calc(50% + 1px)) no-repeat;z-index:2;border-radius:inherit}.variant-picker-inline__swatches--large .variant-picker-inline__swatch-label{width:68px;height:68px}.variant-picker-inline__swatches--large .variant-picker-inline__swatch-label:after{top:12px;left:12px;right:12px;bottom:12px}.variant-picker-inline__swatches--xlarge .variant-picker-inline__swatch-label{width:84px;height:84px}.variant-picker-inline__swatches--xlarge .variant-picker-inline__swatch-label:after{top:14px;left:14px;right:14px;bottom:14px}.variant-picker-inline__select-wrapper{position:relative;width:100%}.variant-picker-inline__select{appearance:none;-webkit-appearance:none;width:100%;height:52px;padding:0 40px 0 18px;font-size:.875rem;font-weight:500;color:var(--color-body);background-color:var(--bg-body, #fff);border:var(--vpi-border-width, 2px) solid var(--color-border, #e2e2e2);border-radius:var(--vpi-border-radius, 8px);cursor:pointer;transition:border-color .2s ease}.variant-picker-inline__select:hover,.variant-picker-inline__select:focus{border-color:var(--color-body);outline:none}.variant-picker-inline__select-arrow{position:absolute;top:50%;right:16px;transform:translateY(-50%);pointer-events:none;color:var(--color-body);opacity:.6}.variant-picker-inline__select-arrow svg{width:10px;height:10px;display:block}@media screen and (max-width:479px){.variant-picker-inline{gap:10px}.variant-picker-inline--bundle .variant-picker-inline__group{flex:1 1 calc(50% - 5px);min-width:calc(50% - 5px);max-width:calc(50% - 5px)}.variant-picker-inline__label{font-size:.75rem;margin-bottom:7px}.variant-picker-inline__button-label{min-width:44px;height:46px;padding:5px 12px;font-size:.8125rem}.variant-picker-inline__swatch-label{width:46px;height:46px}.variant-picker-inline__select{height:46px;font-size:.8125rem}}@media screen and (min-width:480px){.variant-picker-inline--bundle{align-items:stretch;display:flex}.variant-picker-inline--bundle .variant-picker-inline__group{flex:1 1 calc(50% - 8px);min-width:calc(50% - 8px);max-width:calc(50% - 8px);display:flex;flex-direction:column}.variant-picker-inline--bundle .variant-picker-inline__buttons,.variant-picker-inline--bundle .variant-picker-inline__swatches{flex-wrap:wrap}}@media screen and (min-width:750px){.variant-picker-inline--bundle{align-items:stretch;display:flex;flex-wrap:nowrap}.variant-picker-inline--bundle .variant-picker-inline__group{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.variant-picker-inline--bundle .variant-picker-inline__buttons,.variant-picker-inline--bundle .variant-picker-inline__swatches{flex-wrap:wrap}}
/*# sourceMappingURL=/cdn/shop/t/24/assets/product-variant-picker-inline.css.map */