.color-collection{position:relative;padding:16px 0 106px}.color-collection__text{width:85%}.color-collection__title-wrapper{padding-bottom:8px}.color-collection__products{z-index:1;position:relative;display:flex;flex-direction:column;gap:0}.color-collection__row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:2px}.color-collection__product{width:100%;transition:opacity .3s ease;position:relative;cursor:pointer}.color-collection__product--faded{opacity:.6}.color-collection__product:hover{opacity:1!important}.color-collection__product-color{position:absolute;top:100%;left:0;margin-top:4px;opacity:0;transition:opacity .3s ease;text-transform:uppercase;display:none}@media(min-width:768px){.color-collection__product-color{display:block}}.color-collection__product:hover .color-collection__product-color{opacity:1}.color-collection__modal{overflow-y:auto;position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-primary-white);z-index:1000;display:none;opacity:0;transition:opacity .3s ease}.color-collection__modal.is-active{display:block;opacity:1}.color-collection__modal-close{position:fixed;width:24px;height:24px;right:10px;top:10px;border:none;background:none;cursor:pointer;padding:0;z-index:1}.color-collection__modal-close-icon{position:relative;display:block;width:100%;height:100%}.color-collection__modal-close-icon:before,.color-collection__modal-close-icon:after{content:"";position:absolute;left:25%;right:25%;top:50%;border-top:1.5px solid #100A0D;transform-origin:center}.color-collection__modal-close-icon:before{transform:rotate(45deg)}.color-collection__modal-close-icon:after{transform:rotate(-45deg)}.color-collection__product-button{display:flex;flex-direction:column;width:100%;border:none;background:transparent;cursor:pointer;padding:0}.color-collection__grid{padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;transition:all .3s ease}.color-collection__grid-item{grid-column:span 1}@media(max-width:767px){.color-collection__grid.compact-grid{width:100%;grid-template-columns:repeat(3,1fr);padding:20px 10px}.color-collection__modal .image-grid{display:none!important}.color-collection__grid-item.active{grid-column:span 3!important;scroll-margin-top:10px}.color-collection__grid-item.active .color-collection__product-button img{width:100%;object-fit:cover}}@media(min-width:768px){.color-collection__grid{grid-row-gap:40px}.color-collection__grid.compact-grid{width:50vw;margin-left:auto;grid-template-columns:repeat(6,1fr)}.color-collection__grid.compact-grid .color-collection__grid-item:nth-child(odd){grid-column:1 / span 1}.color-collection__grid.compact-grid .color-collection__grid-item:nth-child(2n+2){grid-column:3 / span 1}.color-collection__grid-item.active{grid-column:1 / span 3!important;scroll-margin-top:10px}.color-collection__product-button.reduced-opacity{opacity:.5}}@media(max-width:767px){.color-collection__product-button.active+.hide-when-active{display:none}}.color-collection__modal .image-grid{height:100vh;display:grid;position:fixed;width:50vw;left:0;top:0;grid-template-columns:repeat(6,1fr);transform:translate(0);transition:none}.color-collection__modal .image-grid__item{grid-column:span 5;width:100%;height:100%;overflow:hidden}.color-collection__modal .image-grid__item-vertical-carousel{grid-column:span 1;width:100%;height:100%;overflow:hidden}.color-collection__modal .selected-color-image{object-fit:cover;width:100%;height:100%}.color-collection__main-slide-title{font-size:14px;font-weight:400;line-height:1.2;text-transform:uppercase;margin-top:4px;text-align:left;font-family:var(--font-body-family);margin-bottom:8px;display:none}.hide-when-active .color-collection__main-slide-close-button{display:none;background:none;border:none;padding:0;cursor:pointer}.hide-when-active .svg-wrapper{display:none;height:12px;width:12px;min-height:28px;cursor:pointer}.color-collection__grid-item.active .color-collection__main-slide-title,.color-collection__grid-item.active .hide-when-active .svg-wrapper,.color-collection__grid-item.active .color-collection__main-slide-close-button{display:block}.color-collection__main-slide-description{display:none;margin-top:8px;width:75%;font-size:14px}.color-collection__grid-item.active .color-collection__main-slide-description{display:block}.color-collection__grid-item.active .color-collection__product-container{margin:40px 0}@media(min-width:768px){.color-collection__grid-item.active .color-collection__product-container{margin:0}}.color-collection__product-container img{aspect-ratio:117/176;object-fit:cover}.color-collection__product-container-grid{display:flex;flex-direction:column;gap:4px}.color-collection__product-container-grid-title-container{align-self:flex-start;text-align:left;display:flex;flex-direction:row;justify-content:space-between}@media(min-width:768px){.color-collection__modal .image-grid__item-vertical-carousel .color-collection__product-container-grid{height:auto;align-items:flex-start;justify-content:flex-start;padding:20px 8px}}@media(max-width:1023px){.color-collection__title-wrapper{padding-bottom:8rem}.color-collection__row{gap:.2rem}.color-collection{padding-bottom:16rem}}@media(min-width:1024px){.color-collection{padding:8px 0 214px}.color-collection__title-wrapper{padding-bottom:125px}.color-collection__products{gap:80px}.color-collection__product{width:10%}.color-collection__row{display:flex;flex-direction:row;justify-content:space-between}}.color-collection__main-slide-link{display:none}.color-collection__main-slide-link span{font-size:12px;font-weight:400;line-height:1.2;text-transform:uppercase;font-family:var(--font-body-family)}.color-collection__grid-item.active .color-collection__main-slide-link{display:flex;flex-direction:row;align-items:center;gap:4px;text-decoration:none;color:var(--color-primary-black);font-size:12px;margin-top:40px}@media(min-width:768px){.color-collection__grid-item.active .color-collection__main-slide-link{position:fixed;top:50%;transform:translateY(-50%);right:10px}}.color-collection__grid-item.active .color-collection__main-slide-link svg{width:10px;height:10px}.color-collection__text p{font-size:16px}@media(min-width:1024px){.color-collection__text p{font-size:14px}}
/*# sourceMappingURL=/cdn/shop/t/133/assets/color-collection.css.map */