.ba-container{position:relative;overflow:hidden;--position: 50%;height:100%}@media screen and (max-width:749px){.lens-color-guide:not(.replacement-lens-pdp) .ba-container{margin-left:-1.4rem}.lens-color-guide .ba-container{width:100vw}.lens-color-guide.replacement-lens-pdp .mainStageSwiper{width:100vw;margin-left:-1.4rem;margin-right:-1.4rem}.mm-modal-container .ba-container{margin-left:-2rem}}.mm-modal-container{overflow:hidden}.lens-color-guide:not(.replacement-lens-pdp) .ba-image-container{aspect-ratio:1.09}.lens-color-guide.replacement-lens-pdp .ba-image-container{aspect-ratio:1.6567}.ba-image{position:absolute;display:block;width:100%;max-width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:left;object-position:left}.before-image{position:absolute;top:0;right:0;bottom:0;left:0;width:var(--position);z-index:2}.after-image{position:absolute;z-index:1}.ba-range-slider{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;opacity:0;width:100%;height:100%;z-index:3}.ba-range-slider:focus-visible~.ba-slider-button{outline:2px solid black;outline-offset:2px}.ba-slider-line{position:absolute;top:0;right:0;bottom:0;left:0;width:.2rem;height:100%;background-color:#fff;left:var(--position);transform:translate(-50%);pointer-events:none;z-index:3}.ba-slider-button{position:absolute;background-color:#fff;color:rgb(var(--color-foreground));padding:.8rem;border-radius:100vw;display:-ms-grid;display:grid;place-items:center;top:50%;left:var(--position);transform:translate(-50%,-50%);pointer-events:none;box-shadow:1px 1px 1px #08030380;width:4.8rem;height:4.8rem;z-index:3}.ba-slider-button svg{display:block}.before-label,.after-label{position:absolute;top:2.4rem;z-index:4;padding:.4rem .8rem;background-color:#ffffffe6;border-radius:.4rem}.before-label{left:2.4rem}.after-label{right:2.4rem}.mobile-before-after-button{display:none;transition:opacity .2s ease-in-out}@media screen and (max-width:749px){.lens-color-guide .ba-range-slider,.lens-color-guide .ba-slider-line,.lens-color-guide .ba-slider-button{display:none}.lens-color-guide .before-label{opacity:0;left:unset;right:1.6rem;transition:opacity .2s ease-in-out}.lens-color-guide .after-label{right:unset;left:1.6rem;transition:opacity .2s ease-in-out}.lens-color-guide .ba-image{object-position:center}.lens-color-guide .before-image{width:100%;opacity:0;transition:opacity .2s ease-in-out}.mobile-before-after-button{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;transition:opacity .2s ease-in-out;z-index:5;border:none;background-color:transparent;color:#fff}.mobile-before-after-button-content{width:17rem}.mobile-before-after-button svg{display:inline-block;margin-bottom:1.6rem}}@media screen and (min-width:750px)and (max-width:1149px){.current-lens-image.small-hide{display:none}.current-lens-image.medium-up-hide{display:block!important}}@media screen and (min-width:1150px){.lens-color-guide{display:grid;grid-template-columns:calc(64% - 1.8rem) calc(36% - 1.8rem);gap:3.6rem;align-items:start}.ba-image-container{aspect-ratio:1.6567}}.current-lens-image img{display:block;width:100%;height:auto;margin-bottom:2.4rem}.lens-color-guide-swatches-wrap,.lens-color-guide-description,.lens-color-guide .quick-features{margin-bottom:1.6rem}.lens-color-guide-description p{margin-top:0}.lens-color-guide-swatches .product-form__input{margin-bottom:0}@media screen and (max-width:749px){.lens-color-guide-swatches-wrap{margin-top:1.6rem}}.lens-color-guide-summary{display:flex;width:100%;justify-content:space-between;align-items:center;padding:1.2rem .01rem;border-top:rgba(0,0,0,.12) solid 1px;border-bottom:rgba(0,0,0,.12) solid 1px}.lens-color-guide-conditions,.lens-color-guide-vlt{display:flex;align-items:center}.lens-color-guide-vlt{justify-content:flex-end}.lens-color-guide-vlt span{margin-left:.8rem}.lens-color-guide-vlt svg{display:block}.lens-color-guide-conditions svg{display:block;margin-right:.5rem;width:20px;height:20px}.vlt-title{font-weight:500}.vlt-info{position:relative}.vlt-info-link{display:block;border:none;padding:0;margin:0;background-color:transparent;color:rgb(var(--color-foreground))!important;font-family:var(--font-body-family)}.vlt-info-link svg{margin-top:4px}.tooltip-toggle{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.vlt-info-label{position:relative;display:inline-block;cursor:pointer}@media screen and (any-hover:none){.vlt-info-label:after{content:"";position:absolute;top:-1.4rem;bottom:-1.4rem;left:-1.4rem;right:-1.4rem;display:block}}.custom-tooltip{position:relative;display:inline-block}.tooltip-content{position:absolute;bottom:100%;right:-10px;margin-bottom:10px;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s,transform .2s;transform:translateY(10px);z-index:10;pointer-events:none}.tooltip-text{display:block;width:220px;background-color:#101010f2;color:#fff;text-align:left;padding:8px 10px;border-radius:2px;font-size:14px;white-space:normal;word-wrap:break-word}.tooltip-arrow{position:absolute;bottom:-5px;right:10px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid rgba(16,16,16,.95)}.custom-tooltip:hover .tooltip-content{visibility:visible;opacity:1;transform:translateY(0)}.tooltip-toggle:checked~.custom-tooltip .tooltip-content{visibility:visible;opacity:1;transform:translateY(0)}.tooltip-toggle:focus~.custom-tooltip{outline:1px dotted #000;outline-offset:2px}.lens-color-guide .swatch-input__input+.swatch-input__label.large-swatch{--swatch-input--size: 4.8rem}@media screen and (max-width:749px){.lens-color-guide .swatch-input__input+.swatch-input__label.large-swatch{--swatch-input--size: 13.75vw}}.lens-color-guide .variant-option-name,.lens-color-guide .product-form__input--dropdown{display:none}.lens-color-guide fieldset.product-form__input .form__label{margin-bottom:1.2rem;font-size:1.6rem;line-height:1.5}@media screen and (min-width:750px){.lens-color-guide fieldset.product-form__input .form__label{margin-bottom:.8rem}}.lens-color-guide fieldset.product-form__input .form__label .normal-weight{font-weight:500}.lens-color-guide-wrap-button{margin-top:0;margin-bottom:2.4rem}.lens-color-guide-wrap-button .link{font-size:1.6rem;font-weight:500;line-height:1.5;padding:0}@media screen and (min-width:750px){.lens-color-guide-wrap-button{margin-bottom:3.2rem}}.pop-lens-color-guide-modal .mm-modal-close{width:4.8rem;height:4.8rem;padding:.8rem;border-color:#00000052;color:rgb(var(--color-foreground))}.pop-lens-color-guide-modal .svg-wrapper{width:26px;height:26px}.pop-lens-color-guide-modal .lens-color-guide{margin-top:1rem}@media screen and (min-width:750px){.pop-lens-color-guide-modal .lens-color-guide{grid-template-columns:calc(57% - 1.2rem) calc(43% - 1.2rem);gap:2.4rem;align-items:start}.pop-lens-color-guide-modal .ba-image-container{aspect-ratio:1.075}}@media screen and (min-width:750px)and (max-height:900px){.pop-lens-color-guide-modal .lens-color-guide{grid-template-columns:1fr}.pop-lens-color-guide{scroll-margin-top:9rem}.pop-lens-color-guide-modal .lens-color-guide-info{grid-row-start:1;display:grid;grid-template-columns:calc(46% - .8rem) calc(54% - .8rem);gap:0 1.6rem}.pop-lens-color-guide-modal .current-lens-image{grid-row-start:1;grid-row-end:5}.pop-lens-color-guide-modal .ba-container{aspect-ratio:1.5/1}}lens-color-guide,guide-selects{display:block}.swiper-slide.swiper-thumb{overflow:hidden;width:6.4rem;height:6.4rem;margin-top:1.6rem;margin-right:1.2rem;cursor:pointer}.swiper-slide.swiper-thumb img{width:auto;height:6.4rem;position:relative;left:50%;transform:translate(-50%)}.lens-guide-color-variant-hdr-wrap{width:100%}.lens-guide-color-variant-hdr-wrap .product-form__label{width:100%;display:flex;gap:.8rem}.replacement-lenses-guide fieldset{display:block}.lens-color-guide .replacement-lenses-guide legend.form__label{font-size:2rem;margin-bottom:1.6rem;font-weight:500}@media screen and (min-width:990px){.lens-color-guide .replacement-lenses-guide legend.form__label{font-size:2.4rem}}.lens-guide-swatch-list{width:calc(100% - 1px);display:flex;overflow-x:auto;padding:4px 1rem 1rem 4px;max-width:445px;scrollbar-color:rgb(var(--color-foreground)) rgba(var(--color-foreground),.04)}@media screen and (max-width:749px){.lens-guide-swatch-list{max-width:calc(100vw - 2.8rem)}}@media screen and (min-width:750px)and (max-width:1149px){.lens-guide-swatch-list{max-width:calc(100vw - 11.2rem)}}@media screen and (min-width:1150px)and (max-width:1400px){.lens-guide-swatch-list{max-width:calc((100vw - 11.2rem)*.34 - 1.4rem)}}.fade-wrap{position:relative;width:100%;overflow:hidden}.fade-wrap:after{content:"";position:absolute;top:0;right:0;width:5rem;height:100%;pointer-events:none;background:linear-gradient(270deg,#fff 39.09%,#fff0 79.41%)}.lens-guide-swatch-list::-webkit-scrollbar,.lens-color-guide-summary-lenses::-webkit-scrollbar{height:.4rem;width:.4rem}.lens-color-guide-summary-lenses::-webkit-scrollbar{display:none}.lens-guide-swatch-list::-webkit-scrollbar-thumb,.lens-color-guide-summary-lenses::-webkit-scrollbar-thumb{background-color:rgb(var(--color-foreground));border-radius:.4rem;border:0}.lens-guide-swatch-list::-webkit-scrollbar-track,.lens-color-guide-summary-lenses::-webkit-scrollbar-track{background:rgba(var(--color-foreground),.04);border-radius:.4rem}.lens-guide-swatch-list label{margin-right:.8rem!important}.lens-guide-swatch-list .swatch{--swatch--size: 3.6rem}.lens-guide-swatch-list .swatch-input__label{height:3.6rem}.replacement-lenses-guide .product-form__label.mega-swatches__form-label{font-size:1.4rem}.replacement-lenses-guide .swatch-input__input:checked+.swatch-input__label,.replacement-lenses-guide .swatch-input__label.is-selected{outline:.1rem solid rgb(var(--color-foreground))}.replacement-lenses-guide .eyewear-options{gap:.8rem}@media screen and (max-width:749px){.replacement-lenses-guide .eyewear-options{flex-wrap:wrap}}.vlt-replacement-lenses{background-color:#f6f4f3;padding:.8rem 1.6rem;border-radius:.4rem;margin-bottom:1.6rem}.vlt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.vlt-header h4{font-weight:500;margin:0;line-height:1.5}.vlt-info-link .svg-wrapper{width:1.2rem;height:1.2rem;color:#6b7280}.vlt-bar{position:relative;height:1.2rem;border-radius:4px;background:#dcdad7;margin-bottom:1px}.vlt-bar:after{content:"";position:absolute;top:0;bottom:0;height:1.2rem;border-radius:4px;background:#5f5f5f;left:var(--vlt-bar-start);width:calc(var(--vlt-bar-end) - var(--vlt-bar-start))}.brightness-conditions-icons{width:100%;display:flex;justify-content:space-between}.brightness-icon{display:flex;justify-content:center;align-items:center;width:2.4rem;height:2.4rem}.brightness-icon img{display:block;object-fit:contain}.lens-color-guide-summary-lenses{display:flex;width:100%;align-items:center;padding:1.6rem .01rem;gap:.8rem;border-top:rgba(0,0,0,.12) solid 1px;border-bottom:rgba(0,0,0,.12) solid 1px;max-width:423px;overflow-x:auto;scrollbar-color:rgb(var(--color-foreground)) rgba(var(--color-foreground),.04);-ms-overflow-style:none;scrollbar-width:none}@media screen and (max-width:1149px){.lens-color-guide-summary-lenses{max-width:100%}}.lens-color-guide-summary-lenses h4{font-weight:500;margin:0;white-space:nowrap}.summary-activity{position:relative;padding-right:1.8rem;display:flex;align-items:center;gap:.8rem}.summary-activity-icon{padding-left:.6rem}.summary-activity-icon img{display:block}.summary-activity:not(:last-of-type):after{content:"/";position:absolute;width:.4rem;height:.4rem;top:0;right:.2rem;display:block}.swiper-thumb{border:#fff solid 2px}.swiper-slide-thumb-active{border:#000 solid 2px}@media screen and (min-width:1150px){.stack-swatches-desktop .lens-guide-swatch-list,.stack-swatches-desktop.eyewear-options{width:100%;flex-wrap:wrap;row-gap:1.2rem;padding:4px}.stack-swatches-desktop.fade-wrap:after{content:unset}}@media screen and (max-width:749px){.stack-swatches-mobile .lens-guide-swatch-list,.stack-swatches-mobile.eyewear-options{width:100%;flex-wrap:wrap;row-gap:1.2rem;padding:4px}.stack-swatches-mobile.fade-wrap:after{content:unset}}.lens-color-guide-conditions-svg img{display:block}
/*# sourceMappingURL=/cdn/shop/t/525/assets/section-lens-color-guide.css.map */