#custom-swatch-builder{position:relative;padding:0 30px 0 30px}@media screen and (min-width:1400px){#custom-swatch-builder{display:grid;grid-template-columns:calc(100% / 24 * 16) auto;gap:64px}}#custom-swatch-builder .collection{display:none;margin:64px 0;padding:0}#custom-swatch-builder .collection.is-active{display:block}#custom-swatch-builder h3.title{display:block!important;margin:0 0 16px 0!important;padding:0!important;font-family:var(--heading-font-family)!important;font-style:normal!important;font-size:56px!important;line-height:56px!important;letter-spacing:0!important;color:#000!important;text-align:left!important;text-transform:capitalize!important}#custom-swatch-builder h4.title{display:block!important;margin:0 0 24px 0!important;padding:0!important;font-family:var(--heading-font-family)!important;font-style:normal!important;font-size:24px!important;line-height:24px!important;letter-spacing:0!important;color:#000!important;text-align:left!important;text-transform:capitalize!important}#custom-swatch-builder .items{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:left;gap:10px;margin:0 0 64px 0;padding:0;list-style:none}@media screen and (min-width:412px){#custom-swatch-builder .items{gap:32px}}#custom-swatch-builder .items .item{display:inline;width:96px;min-height:120px}#custom-swatch-builder .items .item button{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}#custom-swatch-builder .items .item button .item__image{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 0 8px 0;padding:0;width:96px;height:96px;border:solid 2px #fff;box-shadow:inset 0 0 0 6px #fff;border-radius:100%;background-color:#f5f5f5;transition:all .3s ease-in-out;pointer-events:none}#custom-swatch-builder .items .item button.is-active .item__image{border:solid 2px #eecd8a}#custom-swatch-builder .items .item button .item__image img{width:80px;height:80px;border-radius:80px;pointer-events:none}#custom-swatch-builder .items .item button.is-active .item__image img{pointer-events:none}#custom-swatch-builder .items .item button .item__title{font-family:var(--sub-heading-font-family);font-size:12px;line-height:16px;color:#515358;text-transform:capitalize}#custom-swatch-builder .your-selection{display:none}@media screen and (min-width:1400px){#custom-swatch-builder .your-selection{display:block}}#custom-swatch-builder .sticky{position:sticky;top:calc(var(--header-height) + 64px);border:1px solid #a8a9ab;border-radius:8px;text-align:center;margin-top:64px;padding:40px}#custom-swatch-builder .sticky h4{margin:0 0 8px 0;padding:0;font-family:var(--heading-font-family);font-size:32px;line-height:40px;color:#000}#custom-swatch-builder .sticky p{margin:0;padding:0;font-family:var(--sub-heading-font-family);font-size:16px;line-height:24px;color:#515358}#custom-swatch-builder .results{padding:32px 0 48px 0;display:flex;flex-direction:column}#custom-swatch-builder .results.items{display:flex;flex-direction:row;flex-wrap:wrap;column-gap:24px;row-gap:24px;margin:0 auto;width:calc(60px * 3 + 48px)}#custom-swatch-builder .results.items .item{width:60px;height:60px;min-height:60px}#custom-swatch-builder .results.items .item button .item__image{position:relative;width:60px;height:60px;margin:0;padding:0;border:none;background-color:#f5f5f5;box-shadow:none}#custom-swatch-builder .results.items .item button .item__image:before{content:'';position:absolute;top:0;left:0;width:60px;height:60px;border:1px dashed #a8a9ab;border-radius:58px;z-index:0}#custom-swatch-builder .results.items .item button .item__image img{position:relative;z-index:1}#custom-swatch-builder .results:empty{display:none}#custom-swatch-builder form{padding:0}#custom-swatch-builder form button{margin:0;height:64px;width:100%}#custom-swatch-builder .mobile-results{display:flex;position:fixed;bottom:0;left:0;width:100vw;height:auto;padding:0 30px;transform:translate(0,calc(100% - 70px));background-color:#fff;z-index:19;-webkit-box-shadow:0 -8px 16px 0 rgba(0,0,0,.2);box-shadow:0 -8px 16px 0 rgba(0,0,0,.2);transition:transform .3s ease-in-out}@media screen and (max-width:1099px){#custom-swatch-builder .mobile-results.is-active{transform:translate(0,0);transition:transform .3s ease-in-out}#custom-swatch-builder .mobile-results .left{width:100%;justify-content:center!important}#custom-swatch-builder .mobile-results .left h4{cursor:pointer}#custom-swatch-builder .mobile-results .left h4{padding-bottom:0!important}#custom-swatch-builder .mobile-results .center{width:100%}#custom-swatch-builder .mobile-results .right{width:100%;justify-content:center!important}#custom-swatch-builder .mobile-results .right button{margin-bottom:20px}}@media screen and (min-width:1100px){#custom-swatch-builder .mobile-results{height:100px;transform:translate(0,calc(100% - 100px))}}@media screen and (min-width:1400px){#custom-swatch-builder .mobile-results{display:none}}#custom-swatch-builder .mobile-results .container{margin:0 auto;padding:0;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}@media screen and (min-width:1100px){#custom-swatch-builder .mobile-results .container{gap:30px}}#custom-swatch-builder .mobile-results .container .left{display:flex;justify-content:flex-start;align-items:center;flex-grow:1}#custom-swatch-builder .mobile-results .container .left h4{margin:0;padding:20px 0;font-family:var(--heading-font-family);font-size:26px;line-height:30px;color:#000}@media screen and (min-width:1100px){#custom-swatch-builder .mobile-results .container .left h4{padding:0}}@media screen and (min-width:1400px){#custom-swatch-builder .mobile-results .container .left h4{font-size:32px;line-height:40px}}#custom-swatch-builder .mobile-results .container .center{display:flex;justify-content:center;align-items:center;flex-grow:1}#custom-swatch-builder .mobile-results .container .center .results.items{display:flex;flex-direction:row;flex-wrap:wrap;column-gap:10px;row-gap:24px;margin:0 auto;padding:0;width:100%;justify-content:center}@media screen and (min-width:576px){#custom-swatch-builder .mobile-results .container .center .results.items{display:flex;flex-direction:row;flex-wrap:wrap;column-gap:24px;row-gap:24px;margin:0 auto;padding:0;width:100%;justify-content:center}}#custom-swatch-builder .mobile-results .container .center .results.items .item{width:40px;height:40px;min-height:40px}#custom-swatch-builder .mobile-results .container .center .results.items .item button .item__image{width:40px;height:40px;transition:none}#custom-swatch-builder .mobile-results .container .center .results.items .item button .item__image:before{content:'';position:absolute;top:0;left:0;width:40px;height:40px;border:1px dashed #a8a9ab;border-radius:40px;z-index:0}@media screen and (min-width:576px){#custom-swatch-builder .mobile-results .container .center .results.items .item{width:60px;height:60px;min-height:60px}#custom-swatch-builder .mobile-results .container .center .results.items .item button .item__image{width:60px;height:60px}#custom-swatch-builder .mobile-results .container .center .results.items .item button .item__image:before{content:'';position:absolute;top:0;left:0;width:60px;height:60px;border:1px dashed #a8a9ab;border-radius:60px;z-index:0}}#custom-swatch-builder .mobile-results .container .center .results.items .item button .item__title{display:none}#custom-swatch-builder .mobile-results .container .right{display:flex;justify-content:flex-end;align-items:center;flex-grow:1}#custom-swatch-builder ul.actions{display:flex;width:100%;height:50px;margin:64px 0 0 0;list-style:none;border-bottom:solid 1px #a8a9ab}#custom-swatch-builder ul.actions li{margin:0;padding:0;width:50%}@media screen and (min-width:576px){#custom-swatch-builder ul.actions li{width:auto}}#custom-swatch-builder ul.actions li button{display:block;margin:0;padding:0 32px 14px 32px;font-family:var(--heading-font-family);font-size:24px;line-height:32px;color:#a8a9ab;text-transform:capitalize;width:100%}@media screen and (min-width:576px){#custom-swatch-builder ul.actions li button{width:auto}}#custom-swatch-builder ul.actions li button.is-active{position:relative;color:#000}#custom-swatch-builder ul.actions li button.is-active:after{content:'';position:absolute;top:100%;left:0;width:100%;height:2px;transform:translate(0,2px);background-color:#000}