.dn-charts{--dn-gap: .25rem;--dn-swatch-size: 190px}.dn-set{margin-bottom:2rem}.dn-set__title{margin-bottom:.75rem}.dn-set__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--dn-swatch-size),1fr));grid-auto-rows:1fr;gap:var(--dn-gap);align-items:start}.dn-swatch,.dn-swatch__toggle,.dn-swatch__image-wrap{min-width:0;min-height:0}.dn-swatch{position:relative;isolation:isolate}.dn-swatch.is-enlarged{grid-column:span 2;grid-row:span 2;z-index:2}.dn-swatch__toggle{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:.35rem;width:100%;height:100%;cursor:pointer}.dn-swatch__image-wrap{position:relative;width:100%;height:100%;aspect-ratio:1 / 1;overflow:hidden;border-radius:0}.dn-swatch__image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.dn-swatch__name{font-size:.85rem;text-align:center;line-height:1.2}.dn-swatch__name--inside{position:absolute;left:0;right:0;bottom:.4rem;max-height:30%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;padding:0 .4rem;font-size:.8rem;font-weight:600;line-height:1.15;text-align:center;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 1.5px 0 #000,0 -1.5px 0 #000,1.5px 0 0 #000,-1.5px 0 0 #000}.dn-swatch__compare-actions{display:none;gap:.35rem;justify-content:center;margin-top:.5rem}.dn-swatch.is-enlarged .dn-swatch__compare-actions{display:flex}.dn-compare{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);display:flex;gap:1rem;align-items:center;padding:.75rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 4px 16px #00000026;z-index:10}.dn-compare__preview{position:relative;width:4.5rem;height:4.5rem;flex:0 0 auto}.dn-compare__swatch{position:absolute;background-size:cover;background-position:center;border:1px solid rgba(0,0,0,.15)}.dn-compare__swatch--outline{top:0;left:0;width:100%;height:100%;z-index:1}.dn-compare__swatch--fill{top:20%;left:20%;width:60%;height:60%;z-index:2}.dn-compare__labels{display:flex;flex-direction:column;gap:.25rem}.dn-compare__slot{display:flex;gap:.35rem;align-items:baseline;font-size:.8rem}.dn-compare__label{font-weight:600;min-width:3.25rem}.dn-charts__brand-group{margin-bottom:2.5rem}@media(max-width:480px){.dn-charts{--dn-swatch-size: 130px}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/color-charts.css.map */