@charset "UTF-8";.option-selector__btns--tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--color-tile-min, 68px),1fr));gap:var(--color-tile-gap, 8px);align-items:start}.opt-label--color-tile{position:relative;display:block;margin:0;width:auto;min-width:0;padding:0;overflow:hidden;cursor:pointer;background-color:var(--theme-bg, #fff);border:1px solid rgba(0,0,0,.14);border-radius:2px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.opt-label--color-tile .opt-label__tile{display:block;position:relative;width:100%;aspect-ratio:1 / 1;overflow:hidden}.opt-label__tile-img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:contain;padding:6%}.opt-label--color-tile:hover{border-color:#0006}.opt-btn:checked+.opt-label--color-tile{border-color:rgb(var(--text-color, 42 43 42));box-shadow:inset 0 0 0 1px rgb(var(--text-color, 42 43 42))}.opt-btn:focus-visible+.opt-label--color-tile{outline:2px solid currentColor;outline-offset:2px}.opt-label--crossed{position:relative;opacity:.55}.opt-btn:disabled+.opt-label--crossed{cursor:not-allowed}.opt-label--crossed:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background-image:linear-gradient(to top left,transparent calc(50% - 1px),var(--color-tile-cross, rgba(0, 0, 0, .65)) calc(50% - 1px),var(--color-tile-cross, rgba(0, 0, 0, .65)) calc(50% + 1px),transparent calc(50% + 1px))}@media(prefers-contrast:more){.opt-label--crossed{opacity:1}.opt-label--crossed:before{--color-tile-cross: currentColor}}variant-picker[data-loading] .option-selector__btns{opacity:.6;pointer-events:none}variant-picker .option-selector__btns{transition:opacity .12s ease-in-out}@media(prefers-reduced-motion:reduce){.opt-label--color-tile,variant-picker .option-selector__btns{transition:none}}@media(max-width:767px){.option-selector__btns--tiles{--color-tile-min: 58px;--color-tile-gap: 6px}}[data-swatch][data-display-type=split]:before{background-image:linear-gradient(135deg,var(--swatch-color, rgb(var(--text-color) / .08)) 0 50%,var(--swatch-color-2, var(--swatch-color, rgb(var(--text-color) / .08))) 50% 100%)}.opt-label__tile-swatch{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.opt-label__tile-swatch:before{content:"";display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover}
/*# sourceMappingURL=/cdn/shop/t/72/assets/color-variants.css.map */