.material-cards{display:grid;grid-template-columns:repeat(var(--material-count, 2),1fr);gap:.7rem;margin-top:1rem;width:100%}.material-card{position:relative;border:2px solid #e8e8e8;border-radius:10px;background:#fff;transition:all .25s ease;cursor:pointer;box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:130px}.material-card.is-available:hover{border-color:#999;box-shadow:0 6px 20px #00000014;transform:translateY(-3px)}.material-card.is-selected{border-color:#000;box-shadow:0 6px 24px #0000001f;background:#fafafa}.material-card:not(.is-available){opacity:.4;cursor:not-allowed;background:#f5f5f5}.material-card:not(.is-available):hover{transform:none;box-shadow:none}.material-card:not(.is-available):after{content:"";position:absolute;top:50%;left:15%;right:15%;height:2px;background:#999;transform:translateY(-50%) rotate(-12deg)}.material-card__input{position:absolute;opacity:0;width:0;height:0}.material-card__label{display:flex;flex-direction:column;flex:1;justify-content:center;padding:1.25rem;cursor:pointer;margin:0}.material-card__content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem}.material-card__swatch{width:56px;height:56px;border-radius:50%;overflow:hidden}.material-card__swatch-image{width:100%;height:100%;object-fit:cover}.material-card__swatch-color{display:block;width:100%;height:100%;border-radius:50%}.material-card__name{font-size:.8125rem;font-weight:500;color:#282828;line-height:1.3;min-height:2.4em;display:flex;align-items:center;justify-content:center}.material-card__checkmark{position:absolute;top:.5rem;right:.5rem;width:22px;height:22px;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:0;transform:scale(0);transition:all .2s ease;z-index:2}.material-card.is-selected .material-card__checkmark{opacity:1;transform:scale(1)}.material-card__input:focus-visible+.material-card__label{outline:2px solid #000;outline-offset:2px;border-radius:10px}@media(max-width:749px){.material-cards{gap:.5rem}.material-card{min-height:115px}.material-card__label{padding:.8rem .4rem}.material-card__swatch{width:45px;height:45px}.material-card__name{font-size:.65rem}.material-card__checkmark{width:18px;height:18px;font-size:11px}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/material-cards.css.map */