.color-chart-section{background-color:var(--section-bg);color:var(--text-color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:var(--font-body-family)}.color-chart-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}@media screen and (max-width:1279px){.color-chart-grid{grid-template-columns:repeat(4,1fr)}}@media screen and (max-width:767px){.color-chart-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}.color-card-wrapper,.color-card{display:flex;flex-direction:column}.color-swatch-container{width:100%;aspect-ratio:1.8 / 1;border-radius:10px;overflow:hidden;position:relative;cursor:pointer;box-shadow:0 2px 8px #0000000f;transition:transform .3s cubic-bezier(.165,.84,.44,1),box-shadow .3s ease}.color-swatch-container:hover{transform:translateY(-4px);box-shadow:0 10px 20px #0000001f}.color-swatch{width:100%;height:100%;position:relative}.color-swatch-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px;opacity:0;transition:opacity .25s ease;text-align:center;color:#fff}.color-swatch-container:hover .color-swatch-overlay{opacity:1}.overlay-rgb{font-size:14px;opacity:.7;margin-bottom:8px}.overlay-copy-icon{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;text-transform:uppercase;background:#fff3;padding:4px 8px;border-radius:12px;transition:background .2s ease}.color-swatch-overlay:hover .overlay-copy-icon{background:#ffffff4d}.color-card-info{display:flex;justify-content:space-between;align-items:center;padding:8px 2px 0}.color-card-name{font-size:15px;font-weight:500;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.color-chart-toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%,100px);background:#121212;color:#fff;padding:10px 20px;border-radius:30px;font-size:12px;font-weight:500;box-shadow:0 4px 20px #0003;opacity:0;z-index:9999;transition:transform .35s cubic-bezier(.175,.885,.32,1.275),opacity .35s ease;display:flex;align-items:center;gap:8px}.color-chart-toast.show{transform:translate(-50%);opacity:1}.color-chart-toast svg{color:#4caf50}
/*# sourceMappingURL=/cdn/shop/t/8/assets/color-chart-section.css.map */