.color-swatches-block{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.color-swatches-block .color-box{border-radius:14px;cursor:pointer;height:207px;position:relative}.color-swatches-block .color-swatch{position:relative}.color-swatches-block .color-swatch:active .color-box,.color-swatches-block .color-swatch:focus .color-box,.color-swatches-block .color-swatch:hover .color-box{border:1px solid #54595f}.color-swatches-block .color-copy-popup{background:#fff;border:1px solid #ccc;border-radius:14px 14px 0 0;padding:32px;position:relative;z-index:10}.color-swatches-block .color-copy-popup>p{margin-bottom:32px}.color-swatches-block .color-copy-popup>div{display:flex;justify-content:space-between}.color-swatches-block .color-copy-popup>div p{border-bottom:1px solid #5c5e63;flex:1;margin-right:12px}.color-swatches-block .color-copy-popup>div p span{color:#5c5e63}.color-swatches-block .color-copy-popup>div:not(:last-child){margin-bottom:32px}.color-swatches-block .color-copy-popup button{align-items:center;background-color:transparent;border:none;display:flex;flex-shrink:0;justify-content:center;margin:0;padding:0}.color-swatches-block .color-values{font-size:12px;margin-top:8px}.color-swatches-block .color-values.desktop-only{bottom:24px;font-size:16px;left:14px;position:absolute}.color-swatches-block .color-values.desktop-only>div:not(:last-child){margin-bottom:5px}@media only screen and (max-width:768px){.color-swatches-block{gap:24px;grid-template-columns:repeat(2,1fr)}.color-swatches-block .color-box{height:87px}.color-swatches-block .desktop-only{display:none!important}.color-swatches-block .color-copy-popup{bottom:0;left:0;position:fixed;right:0}.color-swatches-block .color-copy-popup-overlay{background:rgba(0,0,0,.5);display:flex;inset:0;overflow:hidden;pointer-events:none;position:fixed;touch-action:none;z-index:9}.color-swatches-block .color-copy-popup-thumb{border:1px solid #e2e2e2;border-radius:6px;height:24px;position:absolute;right:32px;top:32px;width:32px}.color-swatches-block .color-copy-popup .button{background-color:#f2f2f2;border-radius:16px;color:#222426;padding:17px 40px}}@media only screen and (min-width:769px){.color-swatches-block .mobile-only{display:none!important}.color-swatches-block .color-copy-popup{border-radius:14px;bottom:-10%;box-shadow:0 0 10px rgba(0,0,0,.1);padding:24px 16px;position:absolute;right:6%;width:80%}.color-swatches-block .color-copy-popup>div:not(:last-child),.color-swatches-block .color-copy-popup>p{margin-bottom:12px}}
.color-grid{display:grid;gap:24px;grid-template-columns:repeat(2,1fr)}.color-grid .color-card,.color-grid .color-swatch{display:flex;flex-direction:column}.color-grid .color-swatch{border-radius:10px;color:#fff;flex:1;justify-content:flex-end;min-height:87px;overflow:hidden;padding:1rem;position:relative}.color-grid .color-swatch .copy-button{background-color:transparent;border:none;color:#fff;cursor:pointer;margin:0;padding:4px;position:absolute;right:8px;top:8px;transform:translateY(-150%)}.color-grid .color-swatch:hover .copy-button{transform:translateY(0)}.color-grid .color-swatch .color-rgb{display:flex;gap:5px}.color-grid .color-data{font-size:14px;line-height:1.2;margin-top:8px}@media only screen and (max-width:768px){.color-grid{padding-bottom:40px}.color-grid .desktop-only{display:none!important}.color-grid .color-data{font-size:12px;margin-top:.5rem}.color-grid .color-card:nth-child(2n){margin:40px 0 -40px}}@media only screen and (min-width:769px){.color-grid{gap:16px;grid-template-areas:"a c c d d" "b c c d d" "e e f f g" "e e f f h";grid-template-columns:repeat(5,1fr)}.color-grid .color-card.area-a{grid-area:a}.color-grid .color-card.area-b{grid-area:b}.color-grid .color-card.area-c{grid-area:c}.color-grid .color-card.area-d{grid-area:d}.color-grid .color-card.area-e{grid-area:e}.color-grid .color-card.area-f{grid-area:f}.color-grid .color-card.area-g{grid-area:g}.color-grid .color-card.area-h{grid-area:h}.color-grid .color-card.area-a,.color-grid .color-card.area-h{min-height:128px}.color-grid .color-card.area-d .color-data.desktop-only,.color-grid .color-card.area-f .color-data.desktop-only{display:flex;justify-content:space-between}.color-grid .color-swatch{min-height:72px}.color-grid .mobile-only{display:none!important}.color-grid .color-card.area-a{-ms-grid-column:1;-ms-grid-row:1}.color-grid .color-card.area-b{-ms-grid-column:1;-ms-grid-row:3}.color-grid .color-card.area-c{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:3;-ms-grid-column-span:3}.color-grid .color-card.area-d{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:7;-ms-grid-column-span:3}.color-grid .color-card.area-e{-ms-grid-row:5;-ms-grid-row-span:3;-ms-grid-column:1;-ms-grid-column-span:3}.color-grid .color-card.area-f{-ms-grid-row:5;-ms-grid-row-span:3;-ms-grid-column:5;-ms-grid-column-span:3}.color-grid .color-card.area-g{-ms-grid-column:9;-ms-grid-row:5}.color-grid .color-card.area-h{-ms-grid-column:9;-ms-grid-row:7}}