:root{--matayi-swatch-size: 36px;--matayi-swatch-size-card: 24px;--matayi-swatch-border: 1px;--matayi-swatch-gap: 8px;--matayi-variant-gap: 24px;--matayi-border-light: #e5e5e5;--matayi-border-hover: #999999;--matayi-border-selected: #000000;--matayi-gap-selected: 1.5px;--metal-sterling-silver: #b8b8b8;--metal-silver: #c4c4c4;--metal-10k-white-gold: #f0f0f0;--metal-14k-white-gold: #f5f5f5;--metal-18k-white-gold: #fafafa;--metal-10k-yellow-gold: #ffd942;--metal-14k-yellow-gold: #ffcc00;--metal-18k-yellow-gold: #ffbf00;--metal-10k-rose-gold: #e8b5b5;--metal-14k-rose-gold: #f4c2c2;--metal-18k-rose-gold: #ffcccc;--gem-amethyst: #9966cc;--gem-diamond: #f3f3f3;--gem-black-onyx: #1a1a1a;--gem-coffee-diamond: #8b6f47;--gem-black-sapphire: #2c2c3e;--gem-blue-sapphire: #0f52ba;--gem-blue-topaz: #0099cc;--gem-citrine: #ffb347;--gem-cubic-zirconia: #e6e6e6;--gem-sky-blue-topaz: #87ceeb;--gem-garnet: #8b0000;--gem-onyx: #353535;--gem-peridot: #8fbc8f;--gem-white-sapphire: #f8f8ff;--gem-white-topaz: #f8f8f8;--gem-pearl: #fef5e7;--gem-emerald: #50C878}.matayi-combined-variants{margin-top:-1.3rem}.matayi-combined-variants variant-picker{margin-bottom:var(--matayi-variant-gap);position:relative}.matayi-combined-variants fieldset{border:none;padding:0;margin:0;position:relative;padding-top:1.5rem}.matayi-combined-variants~variant-picker,variant-picker:not(.matayi-combined-variants variant-picker){display:none!important}.matayi-selected-option{position:absolute;top:0;left:0;font-size:.875rem;color:var(--color-foreground);line-height:1;opacity:0;transition:opacity .2s ease}.matayi-selected-option.active{opacity:1}.matayi-combined-variants fieldset{display:flex;flex-wrap:wrap;gap:var(--matayi-swatch-gap);align-items:center;margin-right:2rem;margin-top:1.5rem}.matayi-combined-variants fieldset:last-of-type{margin-right:0}.matayi-combined-variants fieldset legend{display:block;font-size:.875rem;margin-bottom:.1rem;color:var(--color-foreground)}.matayi-combined-variants fieldset:has(input[name="Jewelry material"])>legend,.matayi-combined-variants fieldset:has(input[name*=material])>legend,.matayi-combined-variants fieldset:has(input[name*=Material])>legend,.matayi-combined-variants fieldset:has(input[name=Gemstones])>legend,.matayi-combined-variants fieldset:has(input[name*=gem])>legend,.matayi-combined-variants fieldset:has(input[name*=Gem])>legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.matayi-combined-variants fieldset:has(input[name=Size])>legend,.matayi-combined-variants fieldset:has(input[name*=size])>legend,.matayi-combined-variants.size-as-option2 fieldset:nth-of-type(2)>legend{display:block!important;position:static!important;width:0px;height:0px;padding:0!important;margin-bottom:.2rem!important;overflow:visible!important;clip:auto!important;white-space:normal!important;border:none!important;font-size:.875rem;color:var(--color-foreground)}.matayi-combined-variants label{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--matayi-swatch-size);height:var(--matayi-swatch-size);border-radius:50%;cursor:pointer;transition:all .2s ease}.matayi-combined-variants input[type=radio]{position:absolute;opacity:0;pointer-events:none}.matayi-combined-variants fieldset:has(input[name="Jewelry material"]) label,.matayi-combined-variants fieldset:has(input[name*=material]) label,.matayi-combined-variants fieldset:has(input[name*=Material]) label,.matayi-combined-variants fieldset:has(input[name=Gemstones]) label,.matayi-combined-variants fieldset:has(input[name*=gem]) label,.matayi-combined-variants fieldset:has(input[name*=Gem]) label{border:var(--matayi-swatch-border) solid var(--matayi-border-light);background-color:var(--swatch-color)}.matayi-combined-variants fieldset:has(input[name="Jewelry material"]) label:hover,.matayi-combined-variants fieldset:has(input[name*=material]) label:hover,.matayi-combined-variants fieldset:has(input[name*=Material]) label:hover,.matayi-combined-variants fieldset:has(input[name=Gemstones]) label:hover,.matayi-combined-variants fieldset:has(input[name*=gem]) label:hover,.matayi-combined-variants fieldset:has(input[name*=Gem]) label:hover{box-shadow:0 0 0 2px var(--matayi-border-hover)}.matayi-combined-variants fieldset:has(input[name="Jewelry material"]) label:has(input:checked),.matayi-combined-variants fieldset:has(input[name*=material]) label:has(input:checked),.matayi-combined-variants fieldset:has(input[name*=Material]) label:has(input:checked),.matayi-combined-variants fieldset:has(input[name=Gemstones]) label:has(input:checked),.matayi-combined-variants fieldset:has(input[name*=gem]) label:has(input:checked),.matayi-combined-variants fieldset:has(input[name*=Gem]) label:has(input:checked){box-shadow:inset 0 0 0 var(--matayi-gap-selected) #fff,0 0 0 calc(var(--matayi-gap-selected) + 0px) var(--matayi-border-selected)}label:has(input[value="Sterling Silver"]){--swatch-color: var(--metal-sterling-silver)}label:has(input[value=Silver]){--swatch-color: var(--metal-silver)}label:has(input[value="10k White Gold"]){--swatch-color: var(--metal-10k-white-gold)}label:has(input[value="14k White Gold"]){--swatch-color: var(--metal-14k-white-gold)}label:has(input[value="18k White Gold"]){--swatch-color: var(--metal-18k-white-gold)}label:has(input[value="10k Yellow Gold"]){--swatch-color: var(--metal-10k-yellow-gold)}label:has(input[value="14k Yellow Gold"]){--swatch-color: var(--metal-14k-yellow-gold)}label:has(input[value="18k Yellow Gold"]){--swatch-color: var(--metal-18k-yellow-gold)}label:has(input[value="10k Rose Gold"]){--swatch-color: var(--metal-10k-rose-gold)}label:has(input[value="14k Rose Gold"]){--swatch-color: var(--metal-14k-rose-gold)}label:has(input[value="18k Rose Gold"]){--swatch-color: var(--metal-18k-rose-gold)}label:has(input[value=Amethyst]){--swatch-color: var(--gem-amethyst)}label:has(input[value=Diamond]){--swatch-color: var(--gem-diamond)}label:has(input[value="Black Onyx"]){--swatch-color: var(--gem-black-onyx)}label:has(input[value="Coffee Diamond"]){--swatch-color: var(--gem-coffee-diamond)}label:has(input[value="Black Sapphire"]){--swatch-color: var(--gem-black-sapphire)}label:has(input[value="Blue Sapphire"]){--swatch-color: var(--gem-blue-sapphire)}label:has(input[value="Blue Topaz"]){--swatch-color: var(--gem-blue-topaz)}label:has(input[value=Citrine]){--swatch-color: var(--gem-citrine)}label:has(input[value="Cubic Zirconia"]){--swatch-color: var(--gem-cubic-zirconia)}label:has(input[value="Sky Blue Topaz"]){--swatch-color: var(--gem-sky-blue-topaz)}label:has(input[value=Garnet]){--swatch-color: var(--gem-garnet)}label:has(input[value=Onyx]){--swatch-color: var(--gem-onyx)}label:has(input[value=Peridot]){--swatch-color: var(--gem-peridot)}label:has(input[value="White Sapphire"]){--swatch-color: var(--gem-white-sapphire)}label:has(input[value="White Topaz"]){--swatch-color: var(--gem-white-topaz)}label:has(input[value=Pearl]){--swatch-color: var(--gem-pearl)}label:has(input[value=Emerald]){--swatch-color: var(--gem-emerald)}.matayi-combined-variants fieldset:has(input[name=Size]) label,.matayi-combined-variants fieldset:has(input[name*=size]) label,.matayi-combined-variants.size-as-option2 fieldset:nth-of-type(2) label{border:var(--matayi-swatch-border) solid var(--matayi-border-light);background:#fff;font-size:.875rem;color:var(--color-foreground);text-align:center;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;padding:2px;box-sizing:border-box}.matayi-combined-variants fieldset:has(input[name=Size]) label:has(input[value*=" "]),.matayi-combined-variants fieldset:has(input[name*=size]) label:has(input[value*=" "]),.matayi-combined-variants.size-as-option2 fieldset:nth-of-type(2) label:has(input[value*=" "]){font-size:.7rem}.matayi-combined-variants fieldset:has(input[name=Size]) label,.matayi-combined-variants fieldset:has(input[name*=size]) label,.matayi-combined-variants.size-as-option2 fieldset:nth-of-type(2) label{font-size:clamp(.6rem,2.5vw,.7rem)}.matayi-combined-variants fieldset:has(input[name=Size]) label:hover,.matayi-combined-variants fieldset:has(input[name*=size]) label:hover,.matayi-combined-variants.size-as-option2 fieldset:nth-of-type(2) label:hover{border-color:var(--matayi-border-hover)}.matayi-combined-variants fieldset:has(input[name=Size]) label:has(input:checked),.matayi-combined-variants fieldset:has(input[name*=size]) label:has(input:checked),.matayi-combined-variants.size-as-option2 fieldset:nth-of-type(2) label:has(input:checked){background:var(--color-foreground);color:var(--color-background);border-color:var(--color-foreground)}.matayi-card-variants{margin-top:-.4rem}.matayi-card-variants .variant-swatches{display:flex;gap:6px;margin-bottom:.375rem;margin-left:.1rem}.matayi-card-variants .variant-swatch{position:relative;width:var(--matayi-swatch-size-card);height:var(--matayi-swatch-size-card);border-radius:50%;border:var(--matayi-swatch-border) solid var(--matayi-border-light);background-color:var(--swatch-color);cursor:pointer;transition:all .2s ease}.matayi-card-variants .variant-swatch:hover{box-shadow:0 0 0 1.5px var(--matayi-border-hover)}.matayi-card-variants .variant-swatch.selected{box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--matayi-border-selected)}.matayi-card-variant-text{font-size:.75rem;line-height:1.2;color:var(--color-foreground-60, #666);margin:0}.matayi-combined-variants .variant-option__button-label__text,.matayi-combined-variants .variant-option__swatch-value{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/*# sourceMappingURL=/cdn/shop/t/8/assets/matayi-variant-picker.css.map */