.mto-color-cards{width:100%;border:0;margin:0;padding:0;min-inline-size:0}.mto-color-cards>legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .75rem;padding:0;margin:0 0 .75rem;font-weight:600}.mto-color-cards__selected{font-weight:400;opacity:.7}.mto-color-cards__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.625rem;width:100%}@media(min-width:480px){.mto-color-cards__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(min-width:750px){.mto-color-cards__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@supports (width: 1cqw){.mto-color-cards{container-type:inline-size}@container (min-width: 420px){.mto-color-cards__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}}.mto-color-cards__card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.45rem;margin:0;padding:.65rem .4rem .55rem;border:1.5px solid rgb(var(--color-foreground-rgb, 20 19 18) / .18);border-radius:10px;background:rgb(var(--color-background-rgb, 255 255 255));cursor:pointer;text-align:center;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;min-height:5.25rem}.mto-color-cards__card:hover{border-color:rgb(var(--color-foreground-rgb, 20 19 18) / .45)}.mto-color-cards__card:focus-within{outline:2px solid rgb(var(--color-foreground-rgb, 20 19 18) / .55);outline-offset:2px}.mto-color-cards__card input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}.mto-color-cards__card:has(input:checked){border-color:rgb(var(--color-foreground-rgb, 20 19 18) / .9);box-shadow:0 0 0 1px rgb(var(--color-foreground-rgb, 20 19 18) / .9);background:rgb(var(--color-foreground-rgb, 20 19 18) / .04)}.mto-color-cards__card:has(input[aria-disabled=true]){opacity:.45;cursor:not-allowed}.mto-color-cards__swatch{width:2rem;height:2rem;border-radius:999px;background:var(--mto-swatch, #ccc);box-shadow:inset 0 0 0 1px #0000001f;flex-shrink:0}.mto-color-cards__swatch--bordered{box-shadow:inset 0 0 0 1px #00000047}.mto-color-cards__label{font-size:.72rem;line-height:1.2;letter-spacing:.01em;color:var(--color-foreground, inherit);word-break:break-word}.mto-color-cards .variant-option__button-label__pill{display:none!important}.mto-color-cards__upcharge{display:block;font-size:.65rem;font-weight:600;color:var(--color-foreground, inherit);opacity:.75;margin-top:.15rem}
/*# sourceMappingURL=/cdn/shop/t/30/assets/mto-color-cards.css.map */