.variant-preview{width:100%;max-width:1536px;margin:3rem auto;padding-left:1rem;padding-right:1rem}@media (min-width:640px){.variant-preview{margin-top:5rem;margin-bottom:5rem}}.variant-preview__container{align-items:flex-start;gap:2rem;width:100%;display:grid}@media (min-width:640px){.variant-preview__container{grid-template-columns:repeat(3,minmax(0,1fr))}}.variant-preview__form-section{max-width:28rem}.variant-preview__form-section>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.variant-preview__form>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.variant-preview__variant-section>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.variant-preview__variant-list{flex-direction:column;gap:.5rem 1rem;display:flex}@media (min-width:640px){.variant-preview__variant-list{gap:.5rem}}.variant-preview__variant-item>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.variant-preview__variant-radio{display:none}.variant-preview__variant-label{cursor:pointer;font-family:var(--font-inter-tight), sans-serif;--tw-text-opacity:1;color:rgba(33,33,33,var(--tw-text-opacity,1));font-size:1.5rem;font-weight:100;line-height:2rem}.variant-preview__variant-label--selected{font-weight:400}.variant-preview__color-section>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.variant-preview__color-list{display:flex}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.variant-preview__color-list{flex-wrap:wrap;gap:.75rem;padding-top:.25rem;padding-left:.125rem;transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation:.3s ease-out fade-in}.variant-preview__color-item>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.variant-preview__color-button{border-radius:9999px;padding:.25rem;transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;display:flex}.variant-preview__color-button--selected{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgba(235,235,235,var(--tw-ring-opacity,1))}.variant-preview__color-swatch{border-radius:9999px;width:1.5rem;height:1.5rem;position:relative;overflow:hidden}.variant-preview__color-swatch--filled{--tw-border-opacity:1;border-width:1px;border-color:rgba(235,235,235,var(--tw-border-opacity,1))}.variant-preview__image-section{aspect-ratio:4/3;border-radius:var(--radius);width:100%;position:relative;overflow:hidden}@media (min-width:640px){.variant-preview__image-section{grid-column:span 2/span 2}}.variant-preview__highlights-container{z-index:10;--tw-translate-x:-50%;width:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));position:absolute;top:0;left:50%}@media (min-width:1024px){.variant-preview__highlights-container{top:2rem}}.variant-preview__media-wrapper{width:100%;height:100%;position:relative}.variant-preview__loader-container{z-index:10;opacity:1;justify-content:center;align-items:center;width:100%;height:100%;transition-property:all;transition-duration:.5s;transition-timing-function:cubic-bezier(0,0,.2,1);animation-duration:.5s;animation-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.variant-preview__loader-container--hidden{visibility:hidden;opacity:0}.variant-preview__image-container{--tw-translate-y:.625rem;width:100%;height:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition:all .5s cubic-bezier(0,0,.2,1) .1s;animation-duration:.5s;animation-timing-function:cubic-bezier(0,0,.2,1);animation-delay:.1s;position:absolute;top:0;bottom:0;left:0;right:0}.variant-preview__image-container--loaded{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1}.variant-preview__form-label{font-family:var(--font-inter-tight), sans-serif;--tw-text-opacity:1;color:rgba(33,33,33,var(--tw-text-opacity,1));font-size:.875rem;line-height:1.25rem}.variant-preview__form-label-color{font-family:var(--font-inter-tight), sans-serif;--tw-text-opacity:1;color:rgba(94,94,94,var(--tw-text-opacity,1));font-size:.875rem;line-height:1.25rem}.variant-preview__image-cover{object-fit:cover}