.shade-studio{display:block;width:100%}.shade-studio__layout{display:flex;flex-direction:column;gap:2.5rem;margin-top:2rem}@media screen and (min-width:900px){.shade-studio__layout{flex-direction:row;align-items:center;gap:6rem}}.shade-studio__image-pane{flex:1 1 50%;min-width:0}.shade-studio__image-link{display:block;text-decoration:none;color:inherit}.shade-studio__image-wrapper{position:relative;width:100%;overflow:hidden;aspect-ratio:4 / 5;max-height:50vh}@media screen and (min-width:900px){.shade-studio__image-wrapper{aspect-ratio:4 / 5;max-height:75vh}}.shade-studio__main-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:bottom;transition:opacity .4s ease-in-out;opacity:1}.shade-studio__main-image.is-fading{opacity:0}.shade-studio__controls{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2.5rem}@media screen and (min-width:900px){.shade-studio__controls{align-items:flex-start}}.shade-studio__caption{text-align:center}@media screen and (min-width:900px){.shade-studio__caption{text-align:left}}.shade-studio__active-name{margin:0;font-weight:700;letter-spacing:-.02em;transition:opacity .2s ease}.shade-studio__active-desc{margin:.5rem 0 0;font-size:1.6rem;opacity:.7}.shade-studio__gallery{width:100%;position:relative}@media screen and (max-width:599px){.shade-studio__gallery:before{content:"";position:absolute;top:50%;left:calc(50% - 36px);transform:translateY(-50%);width:2px;height:52px;background:#0003;border-radius:1px;pointer-events:none;z-index:1}.shade-studio__gallery:after{content:"";position:absolute;top:50%;left:calc(50% + 36px);transform:translateY(-50%);width:2px;height:52px;background:#0003;border-radius:1px;pointer-events:none;z-index:1}.shade-swatch{position:relative;z-index:2}.shade-swatch:after{display:none!important}.shade-swatch.is-active .shade-swatch__color{width:80%;height:80%}}@media screen and (min-width:600px){.shade-studio__gallery:before,.shade-studio__gallery:after{display:none}}.shade-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:1.2rem;padding:1.2rem calc(50% - 32px);-webkit-overflow-scrolling:touch;scrollbar-width:none}.shade-grid::-webkit-scrollbar{display:none}@media screen and (min-width:600px){.shade-grid{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:400px;padding:0;margin-left:0;overflow-x:visible}}.shade-swatch{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:0;margin:0;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 65px;aspect-ratio:1 / 1;transition:transform .2s cubic-bezier(.2,0,0,1);scroll-snap-align:center}@media screen and (min-width:600px){.shade-swatch{width:100%;flex:auto}}.shade-swatch:hover{transform:scale(1.1)}.shade-swatch:active{transform:scale(.95)}.shade-swatch__color{display:block;width:80%;height:80%;border-radius:50%;box-shadow:inset 0 2px 4px #0006;border:1px solid rgba(0,0,0,.08);transition:all .3s ease}.shade-swatch:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid transparent;transition:border-color .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);transform:scale(.8)}.shade-swatch:focus,.shade-swatch:focus-visible{outline:none!important;box-shadow:none!important}.shade-swatch.is-active:after{border:1px solid rgba(150,150,150,.4);transform:scale(1)}.shade-swatch.is-active .shade-swatch__color{width:70%;height:70%}.shade-studio__cta{text-decoration:none;width:auto;text-align:center}@media screen and (min-width:900px){.shade-studio__cta{width:100%;max-width:400px}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/section-shade-selector.css.map */