.color-swatch-card{position:relative;display:grid;width:100%;min-width:80px;height:100%;cursor:pointer;border-radius:10px;background-color:transparent;grid-template-rows:1fr 54px}@media (min-width: 1028px){.color-swatch-card{width:100%;max-width:167px;height:254px;grid-template-rows:1fr 74px}}.color-swatch-card:hover{background-color:#fbe9e8}.color-swatch-card:hover .color-swatch picture{transform:translateY(-4px)}@media (min-width: 768px){.color-swatch-card:hover .color-swatch picture{transform:translateY(-20%)}}.color-swatch-card:hover .color-swatch picture:last-child{transform:translateY(20%)}@media (min-width: 768px){.color-swatch-card:hover .color-swatch picture:last-child{transform:translateY(20%)}}@media (min-width: 1028px){.color-swatch-card:hover .button-zoom{display:flex}}.color-swatch-card:hover .title-holder h5:not(:only-child){transform:translateY(0)}.color-swatch-card:hover .title-holder h6 .label{transform:translateY(0);opacity:0}.color-swatch-card:hover .title-holder h6 .finish{opacity:1}.color-swatch-card input{font-family:Poppins,georgia;font-size:1.6rem;font-weight:400;font-style:normal;line-height:2.1rem;font-feature-settings:"ss06" on}@media (min-width: 768px){.color-swatch-card input{font-size:1.4rem;line-height:2.24rem}}.color-swatch-card input{overflow:hidden;width:100%;height:100%;margin:0;cursor:pointer;transition:box-shadow .3s ease,background-color .3s ease;border-radius:10px;background-color:#fff;background-color:transparent;box-shadow:-5px 12px 20px #1d1b1f00;-webkit-appearance:none;appearance:none;grid-row:1/3;grid-column:1}.color-swatch-card input:checked{background-color:var(--color-white);box-shadow:-5px 12px 20px #1d1b1f26}.color-swatch-card input:checked~label .checkmark-icon{display:block}.color-swatch-card input:checked~label .title-holder h5:not(:only-child){transform:translateY(0)}.color-swatch-card input:checked~label .title-holder span{opacity:0}.color-swatch-card input:checked~label .title-holder h6 .label{transform:translateY(0);opacity:0}.color-swatch-card input:checked~label .title-holder h6 .finish{opacity:1}.color-swatch-card input:checked~label .color-swatch-holder picture{transform:translateY(-4px)}@media (min-width: 768px){.color-swatch-card input:checked~label .color-swatch-holder picture{transform:translateY(-20%)}}.color-swatch-card input:checked~label .color-swatch-holder picture:last-child{transform:translateY(20%)}@media (min-width: 768px){.color-swatch-card input:checked~label .color-swatch-holder picture:last-child{transform:translateY(20%)}}.color-swatch-card .checkmark-icon{position:absolute;top:4px;right:var(--spacing-1x);display:none}@media (min-width: 1028px){.color-swatch-card .checkmark-icon{top:15px;right:13px}}.color-swatch-card .checkmark-icon svg{width:12px;height:12px}@media (min-width: 1028px){.color-swatch-card .checkmark-icon svg{width:26px;height:26px}}.color-swatch-card .button-zoom{position:absolute;z-index:100;top:4px;right:var(--spacing-1x);display:none;width:26px;height:26px;border:none;border-radius:4px;background-color:var(--color-white)}@media (min-width: 1028px){.color-swatch-card .button-zoom{top:15px;right:13px}}.color-swatch-card .button-zoom:hover{opacity:1;color:var(--color-dark);background-color:var(--color-white)}.color-swatch-card .button-zoom:active{opacity:1;color:var(--color-white);background-color:var(--color-dark)}.color-swatch-card .button-zoom:active svg path{stroke:var(--color-white)}.color-swatch-card .button-zoom svg{width:9px;height:6.8px}@media (min-width: 1028px){.color-swatch-card .button-zoom svg{width:20px;height:20px}}.color-swatch-card .color-swatch-holder{padding:6px 12px 0;grid-row:1;grid-column:1}@media (min-width: 768px){.color-swatch-card .color-swatch-holder{padding:6px 20px 0}}@media (min-width: 1028px){.color-swatch-card .color-swatch-holder{padding:22px 16px 0}}.color-swatch-card .color-swatch-holder .color-swatch{position:relative;height:100%}.color-swatch-card .title-holder{position:relative;display:flex;align-items:center;flex-flow:column;justify-content:center;grid-column:1}.color-swatch-card .title-holder h5{font-family:Poppins,georgia;font-size:1.6rem;font-weight:400;font-style:normal;line-height:2.1rem;font-feature-settings:"ss06" on}@media (min-width: 768px){.color-swatch-card .title-holder h5{font-size:1.4rem;line-height:2.24rem}}.color-swatch-card .title-holder h5{font-size:1.1rem;font-weight:600;line-height:1.32rem;align-self:center;margin-bottom:2px;padding:0 8px;transition:transform .3s ease;text-align:center;letter-spacing:5%;text-transform:uppercase}.color-swatch-card .title-holder h5:not(:only-child){transform:translateY(20%)}@media (min-width: 1028px){.color-swatch-card .title-holder h5:not(:only-child){transform:translateY(90%)}}@media (min-width: 768px){.color-swatch-card .title-holder h5{font-size:1rem;line-height:1rem;margin-bottom:8px;padding:0 8px;text-transform:capitalize}}@media (min-width: 1028px){.color-swatch-card .title-holder h5{font-size:1.4rem;line-height:1.68rem;transform:translateY(50%)}}.color-swatch-card .title-holder h6{font-family:Poppins,georgia;font-size:1.6rem;font-weight:400;font-style:normal;line-height:2.1rem;font-feature-settings:"ss06" on}@media (min-width: 768px){.color-swatch-card .title-holder h6{font-size:1.4rem;line-height:2.24rem}}.color-swatch-card .title-holder h6{font-size:.8rem;font-weight:500;line-height:.96rem;align-self:center;text-align:center;letter-spacing:5%;text-transform:uppercase}.color-swatch-card .title-holder h6 .finish{transition:opacity .3s ease;opacity:0}.color-swatch-card .title-holder h6 .label{transition:opacity .3s ease,transform .3s ease;transform:translateY(4px)}@media (min-width: 1028px){.color-swatch-card .title-holder h6 .label{transform:translateY(16px)}}@media (min-width: 768px){.color-swatch-card .title-holder h6{font-size:1rem;line-height:1rem}}@media (min-width: 1028px){.color-swatch-card .title-holder h6{font-size:1.1rem;line-height:1.32rem}}
/*# sourceMappingURL=/cdn/shop/t/77/assets/snippets-color-swatch-card.css.map */