.tf-color-variants{--tf-cv-size: 42px;--tf-cv-size-mobile: 64px;--tf-cv-columns: 6;--tf-cv-columns-mobile: 4;--tf-cv-ratio: .8;--tf-cv-background: #f3eee9;--tf-cv-border: rgba(var(--color-foreground), 1);display:flex;flex-direction:column;gap:1.2rem;margin:1.5rem 0 0}.tf-color-variants[hidden]{display:none}.tf-color-variants__title{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;font-size:1.4rem;line-height:1.4;letter-spacing:.06rem;text-transform:uppercase;font-weight:400}.tf-color-variants__current-name{color:rgba(var(--color-foreground),.75)}.tf-color-variants__list{display:grid;grid-template-columns:repeat(var(--tf-cv-columns),minmax(0,var(--tf-cv-size)));justify-content:start;gap:1rem;margin:0;padding:0;list-style:none}.tf-color-variants__item{margin:0;padding:0}.tf-color-variants__swatch{position:relative;display:block;color:inherit;text-decoration:none}.tf-color-variants__swatch:after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--tf-cv-border);opacity:0;transition:opacity var(--duration-short, .1s) ease;z-index:2}.tf-color-variants__swatch:hover:after,.tf-color-variants__swatch:focus-visible:after,.tf-color-variants__swatch--current:after{opacity:1}.tf-color-variants__swatch:focus-visible{outline:0;box-shadow:0 0 0 .2rem rgba(var(--color-foreground),.15)}.tf-color-variants__swatch--current{cursor:default;pointer-events:none}.tf-color-variants__media{position:relative;display:block;width:100%;aspect-ratio:var(--tf-cv-ratio);overflow:hidden;background:var(--tf-cv-background)}.tf-color-variants__image{display:block;box-sizing:border-box;width:100%;height:100%;padding:.4rem;object-fit:contain}.tf-color-variants__image--placeholder{padding:0;fill:rgba(var(--color-foreground),.35)}.tf-color-variants__item--added{animation:tf-color-variants-in var(--duration-default, .2s) ease both}@keyframes tf-color-variants-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.tf-color-variants__item--added{animation:none}}.tf-color-variants__note{display:none;margin:0;font-size:1.3rem;color:rgba(var(--color-foreground),.75)}.tf-color-variants--empty .tf-color-variants__note{display:block}@media screen and (max-width:749px){.tf-color-variants__list{grid-template-columns:repeat(var(--tf-cv-columns-mobile),minmax(0,var(--tf-cv-size-mobile)))}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/tf-color-variants.css.map */