.oai-color-grid-picker{display:block}.oai-color-grid-picker__fieldset{margin:0 0 1.8rem;padding:0;border:0}.oai-color-grid-picker__legend{margin-bottom:1rem}.oai-color-grid-picker__legend [data-selected-value]{font-weight:600}.oai-color-grid-picker__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}.oai-color-grid-picker__input{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.oai-color-grid-picker__tile{position:relative;display:flex;flex-direction:column;gap:0;cursor:pointer;border:1px solid rgba(18,18,18,.12);border-radius:1.6rem;background:rgb(var(--color-background));padding:.35rem;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background-color .22s ease;overflow:hidden}.oai-color-grid-picker__tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .22s ease;pointer-events:none}.oai-color-grid-picker__media-wrap{position:relative;display:block;border-radius:1.25rem;overflow:hidden;background:transparent;aspect-ratio:1 / 1;padding:0}.oai-color-grid-picker__image,.oai-color-grid-picker__placeholder{width:100%;height:100%;display:block}.oai-color-grid-picker__image{object-fit:cover;object-position:center;transition:transform .28s ease;background:transparent}.oai-color-grid-picker__placeholder{display:grid;place-items:center;font-size:2rem;font-weight:700;background:#f5f5f5}.oai-color-grid-picker__badge{position:absolute;left:.8rem;right:.8rem;bottom:.8rem;display:inline-flex;justify-content:center;align-items:center;min-height:2.8rem;border-radius:999px;padding:.4rem .9rem;background:#121212c2;color:#fff;font-size:1.1rem;line-height:1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.oai-color-grid-picker__tile.is-unavailable{opacity:.58}.oai-color-grid-picker__input:focus-visible+.oai-color-grid-picker__tile{outline:0;box-shadow:0 0 0 .25rem #1212121f}.oai-color-grid-picker__input:checked+.oai-color-grid-picker__tile{border-color:#121212d9;background:#12121205;box-shadow:0 1rem 2rem #12121214}.oai-color-grid-picker__input:checked+.oai-color-grid-picker__tile:after{box-shadow:inset 0 0 0 1px #121212d9}@media(hover:hover){.oai-color-grid-picker__tile:hover{transform:translateY(-.2rem);border-color:#12121247;box-shadow:0 1rem 2rem #12121212}.oai-color-grid-picker__tile:hover .oai-color-grid-picker__image,.oai-color-grid-picker__input:checked+.oai-color-grid-picker__tile .oai-color-grid-picker__image{transform:scale(1.03)}}@media screen and (min-width:990px){.oai-color-grid-picker__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.oai-color-grid-picker__tile{padding:.4rem}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-oai-color-grid-picker.css.map */