.tone-group{margin:0 auto 1rem;max-width:1140px;width:100%}h3.tone-group__header__title{font-size:1.25rem;font-weight:400}.tones{display:flex;flex-flow:row wrap;justify-content:center;margin:1rem -1% 2rem}.tones,.tones *{box-sizing:border-box}.tones__tone{border-bottom:1px solid #ccc;display:flex;flex-basis:20%;flex-flow:column;margin:0;max-width:180px;padding:1rem .5rem;position:relative}.tones__tone__name{margin-bottom:.5rem;margin-top:auto;text-align:center}.tones__tone__color{margin:0 0 .5rem;padding:0;position:relative}.tones__tone__color--modal{height:370px;left:calc(50% - 185px);margin:0;position:fixed;top:calc(50% - 185px);width:370px;z-index:6505}.modal--tone{background:rgba(0,0,0,.1);height:100vh;left:0;position:fixed;top:0;width:100vw}.modal--tone--hidden{display:none}.tones__tone__color__image{display:block;max-width:100%}.tones__add-btn{background-color:transparent;border:none;cursor:pointer;inset:0;margin:0;padding:0;position:absolute;transition:.25s ease;width:100%}.tones__add-btn:focus-within,.tones__add-btn:hover{background-color:rgba(0,0,0,.25)}.tones-selection{background-color:#d3d3d3;border:none;display:none;height:100%;inset:0;padding:0;position:absolute;width:100%}.tone-dialog-wrapper{inset:0;overflow:hidden;position:absolute}.tone-dialog-area{align-items:stretch;display:flex;flex-direction:row;height:100%;transform:translateX(0)}.tones-selection-wrapper{display:flex;flex:1 0 100%;flex-direction:column;position:relative}.tone__type-btn{align-items:center;background-color:transparent;border:none;cursor:pointer;display:flex;flex:1;font-size:.8rem;gap:.35rem;justify-content:flex-start;overflow:hidden;padding:0 .25rem;text-align:center;transition:.25s ease}.tone__type-btn[disabled]{background-color:#999;color:#666;text-decoration:line-through}.tone__type-btn[disabled] svg{opacity:0}.tone__type-btn.active{background-color:#116cb5;color:#fff;font-weight:700;justify-content:center}.tone__type-btn.shadow{color:#666;font-weight:700;justify-content:center}.tone__type-btn.active svg,.tone__type-btn.shadow svg{animation:fadeOut .25s forwards;position:relative}.tones__divider{border:1px solid #000;margin:0;width:100%}.tones-selection.active .tones__divider{display:none}.tones__close-btn{border:none;border-radius:50%;cursor:pointer;height:30px;margin:0;overflow:hidden;padding:0;position:absolute;right:-10px;top:-10px;width:30px}.tones__close-btn>svg{background-color:#fff;height:100%;width:100%}.tone-selection-finish{align-items:center;background-color:#116cb5;display:flex;flex-direction:column;gap:.5rem;inset:0;justify-content:center;padding:.25rem;position:absolute}.tone-selection-finish>span{color:#fff;display:block;font-size:.975rem;font-weight:700}.tone-basket{background-color:#fff;bottom:0;box-shadow:0 0 10px 0 rgba(0,0,0,.75);display:none;gap:1.5rem;justify-content:center;min-height:150px;opacity:1;padding:1rem 0;position:fixed;right:0;transition-duration:.2s;transition-property:opacity;width:100%;z-index:3}.tone-basket--visible{display:flex}.tone-basket--transitioning{opacity:0}.tone-basket--attached{background-color:transparent;box-shadow:none;position:relative}.tone-basket-detach{background:none;border:none;color:#666;height:44px;padding:none;position:absolute;right:0;top:0;width:44px}.tone-basket--attached+.tone-basket-detach{align-items:center;display:flex;justify-content:center;z-index:100}.tone-basket-detach{display:none}.tone-basket-list{display:grid;gap:0 1rem;grid-auto-rows:1fr;grid-template-columns:repeat(4,175px);list-style:none;margin:0;padding:0}.tone-basket--attached .tone-basket-list{grid-template-columns:repeat(4,1fr);max-height:unset;overflow:visible;padding:0;width:100%}@media (max-width:640px){.tone-basket--attached .tone-basket-list{grid-template-columns:repeat(3,1fr)}}@media (max-width:460px){.tone-basket--attached .tone-basket-list{grid-template-columns:repeat(2,1fr)}}.tone-basket-item{position:relative;width:100%}.tone-basket-item-img-wrapper{height:50px;margin:0;overflow:hidden;padding:0}.tone-basket-item-body{align-items:center;display:flex;flex-direction:row;font-size:12px;font-weight:500;gap:.3rem;justify-content:flex-end;padding-right:.2rem}.tone-basket-item__name{background:#fff;font-size:10px;font-weight:700;left:2px;padding:.2rem;position:absolute;top:2px}.tone-basket-item__wood{text-transform:lowercase}.tone-basket-item__remove-btn{background-color:#fff;border:none;border-radius:50%;cursor:pointer;height:30px;margin:0;overflow:hidden;padding:0;position:absolute;right:-10px;top:10%;transform:translateY(-10%);width:30px}.tone-basket-checkout{align-self:flex-start;background-color:#116cb5;border:2px solid #116cb5;color:#fff!important;font-weight:700;padding:3rem 2rem;text-decoration:none;transition:all .25s ease}.tone-basket--attached .tone-basket-checkout{display:none}.tone-basket-checkout:focus-within,.tone-basket-checkout:hover{background-color:#fff;color:#116cb5!important}@keyframes fadeOut{0%{opacity:1;width:30px}to{opacity:0;width:0}}@media (max-width:1190px){.tones__tone__type{font-size:.7125rem}.tone-basket-list{grid-template-columns:repeat(4,150px)}}@media (max-width:960px){.tone-basket{align-items:center;flex-direction:column;justify-content:center;padding:1rem 0}.tone-basket-checkout{align-self:center;padding:.5rem 3rem}.tone-basket-item-body{font-size:.6875rem}}@media (max-width:768px){.tones--custom__button,.tones__tone{flex-basis:25%}.tones__tone__type{font-size:.75rem}}@media (max-width:687px){.tones--custom__button,.tones__tone{flex-basis:33%}.tone-basket-list{gap:0 .5rem;grid-template-columns:repeat(4,150px);max-height:150px;overflow-y:scroll;padding:1rem;-ms-overflow-style:none;scrollbar-width:none}.tone-basket-list::-webkit-scrollbar{display:none}}@media (max-width:640px){.tone-basket-list{grid-template-columns:repeat(3,150px)}}@media (max-width:460px){.tones--custom__button,.tones__tone{flex-basis:50%!important}.tone-basket-list{grid-template-columns:repeat(3,110px)}}