.variant-explorer__frame{position:relative;display:block;overflow:hidden;background-color:rgba(var(--color-foreground),.08);-webkit-user-select:none;user-select:none}.variant-explorer__frame>img,.variant-explorer__frame>svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.variant-explorer__header{display:flex;flex-direction:column;gap:2rem;margin-block-end:4rem}.variant-explorer__body{display:flex;align-items:stretch}.variant-explorer__browse{flex:0 0 60%;max-width:60%;min-width:0;padding-inline-end:5rem;border-inline-end:.1rem solid rgba(var(--color-foreground),.1)}.variant-explorer__preview{flex:1 1 40%;min-width:0;padding-inline-start:5rem}.variant-explorer__pills{display:flex;flex-wrap:wrap;gap:1rem;margin-block-end:2.4rem}.variant-explorer__pill{--buttons-padding: 2.4rem;height:4.8rem;border:.1rem solid rgba(var(--color-foreground),.2)}.variant-explorer__pill[aria-pressed=true]{--color-border: var(--color-button);background:rgb(var(--color-button));color:rgb(var(--color-button-text));border-color:transparent;pointer-events:none}.variant-explorer__grid{overflow:hidden}.variant-explorer__page{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;height:auto}.variant-explorer__dots{--color-swiper-controls: var(--color-foreground);margin-block-start:4rem}.variant-explorer__dots[hidden]{display:none}.variant-explorer__tile,.variant-explorer__thumb{--ve-ring-gap: .7rem;position:relative;display:block;width:100%;aspect-ratio:var(--ve-tile-ratio, 4/5);padding:0;border:0;background:none;color:inherit;cursor:pointer;text-align:start;height:auto;white-space:normal;text-transform:none;letter-spacing:normal;font:inherit;line-height:inherit;border-radius:var(--blocks-radius)}.variant-explorer__tile[hidden],.variant-explorer__thumb[hidden]{display:none}.variant-explorer__tile .variant-explorer__frame,.variant-explorer__thumb .variant-explorer__frame{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--blocks-radius);transition:inset .2s ease,border-radius .2s ease}.variant-explorer__tile:after,.variant-explorer__thumb:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:.1rem solid rgb(var(--color-foreground));border-radius:var(--blocks-radius);opacity:0;pointer-events:none}.variant-explorer__tile[aria-pressed=true]:after,.variant-explorer__thumb[aria-pressed=true]:after{opacity:1}.variant-explorer__tile[aria-pressed=true] .variant-explorer__frame,.variant-explorer__thumb[aria-pressed=true] .variant-explorer__frame{inset:var(--ve-ring-gap);border-radius:calc(var(--blocks-radius) - .4rem)}.variant-explorer__tile[data-available=false] .variant-explorer__frame>img,.variant-explorer__tile[data-available=false] .variant-explorer__frame>svg,.variant-explorer__thumb[data-available=false] .variant-explorer__frame>img,.variant-explorer__thumb[data-available=false] .variant-explorer__frame>svg{opacity:.5}.variant-explorer__tile:focus-visible:after,.variant-explorer__thumb:focus-visible:after{opacity:1}.variant-explorer__tile .variant-explorer__frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 75%,rgba(0,0,0,.7));pointer-events:none}.variant-explorer__tile-label{position:absolute;inset-inline:0;bottom:0;z-index:1;padding:1.2rem;color:#fff;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;pointer-events:none}.variant-explorer__strip{display:none}.variant-explorer__media{position:relative}.variant-explorer__preview-frame{--ve-reveal-duration: .6s;--ve-reveal-easing: cubic-bezier(.6, 0, .4, 1);aspect-ratio:var(--ve-preview-ratio, 4/5);display:none;border-radius:var(--blocks-radius)}.variant-explorer__preview-frame.is-active,.variant-explorer__preview-frame.is-under{display:block}.variant-explorer__preview-frame.is-active{z-index:1}.variant-explorer__preview-frame.is-under{position:absolute;top:0;right:0;bottom:0;left:0}.variant-explorer__preview-frame.is-revealing{-webkit-mask-image:linear-gradient(to bottom,transparent 43.5%,#000 56.5%);mask-image:linear-gradient(to bottom,transparent 43.5%,#000 56.5%);-webkit-mask-size:100% 230%;mask-size:100% 230%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 100%;mask-position:0 100%;animation:variant-explorer-reveal var(--ve-reveal-duration) var(--ve-reveal-easing) forwards}.variant-explorer__preview-frame.is-revealing>img,.variant-explorer__preview-frame.is-revealing>svg{animation:variant-explorer-reveal-blur var(--ve-reveal-duration) var(--ve-reveal-easing) forwards}.variant-explorer__card{position:absolute;z-index:2;inset-inline:1.6rem;bottom:1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;padding:1.6rem;border-radius:calc(var(--blocks-radius) - .4rem);background:rgb(var(--color-background));color:rgb(var(--color-foreground))}.variant-explorer__card-info{display:flex;flex-direction:column;gap:.6rem;flex:1;min-width:0}.variant-explorer__card-title{display:flex;align-items:center;gap:.8rem;min-width:0}.variant-explorer__card-swatch{display:inline-flex;flex-shrink:0}.variant-explorer__card-swatch .swatch-color{width:3.2rem;height:3.2rem;border-radius:50%}.variant-explorer__card-swatch input:disabled+label.swatch-color{opacity:1;cursor:default}.variant-explorer__card-name{font-weight:500}.variant-explorer__card-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}.variant-explorer__card-description[hidden]{display:none}.variant-explorer__form{display:contents}.variant-explorer__add{flex-shrink:0}.variant-explorer__error{flex:1 1 100%;margin:0;padding:1rem 1.2rem}.variant-explorer__error[hidden]{display:none}.variant-explorer__notice{padding-block:2rem;text-align:center}@keyframes variant-explorer-reveal{0%{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:0 100%;mask-position:0 100%}}@keyframes variant-explorer-reveal-blur{0%{filter:blur(1rem);scale:1.08}to{filter:blur(0);scale:1}}@media(prefers-reduced-motion:reduce){.variant-explorer__preview-frame,.variant-explorer__preview-frame>img,.variant-explorer__preview-frame>svg{animation:none}}@media(max-width:1023.98px){.variant-explorer__header{margin-block-end:3.2rem}.variant-explorer__body{flex-direction:column;align-items:stretch}.variant-explorer__browse{display:contents}.variant-explorer__pills,.variant-explorer__strip{margin-inline-end:calc(-1 * var(--page-padding));padding-inline-end:var(--page-padding)}.variant-explorer__pills{order:1;flex-wrap:nowrap;overflow-x:auto;margin-block-end:3.2rem;scrollbar-width:none}.variant-explorer__pills::-webkit-scrollbar{display:none}.variant-explorer__pill{flex-shrink:0}.variant-explorer__grid-wrap{display:none}.variant-explorer__preview{order:2;flex:none;padding-inline-start:0}.variant-explorer__preview-frame{aspect-ratio:var(--ve-preview-ratio-mobile, var(--ve-preview-ratio, 4/5))}.variant-explorer__strip{order:3;display:flex;gap:.8rem;margin-block-start:1.2rem;overflow-x:auto;scrollbar-width:none}.variant-explorer__strip::-webkit-scrollbar{display:none}.variant-explorer__thumb{--ve-ring-gap: .5rem;flex:0 0 9rem;width:9rem;border-radius:var(--medium-blocks-radius)}.variant-explorer__thumb .variant-explorer__frame,.variant-explorer__thumb:after{border-radius:var(--medium-blocks-radius)}.variant-explorer__thumb[aria-pressed=true] .variant-explorer__frame{border-radius:var(--small-blocks-radius)}}
/*# sourceMappingURL=/cdn/shop/t/30/assets/section-variant-explorer.css.map */