.swatch-item{--swatch--border-radius: var(--variant-pills-radius, 50%);border:var(--variant-pills-border-width) solid rgb(var(--color-black-rgb) / var(--opacity-15));border-radius:var(--swatch--border-radius);padding:.2rem;box-shadow:var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset) var(--variant-pills-shadow-blur-radius) var(--color-shadow)}.swatch-item:after{content:"";position:absolute;inset:calc(var(--variant-pills-border-width) * -1);border:var(--variant-pills-border-width) solid rgb(var(--color-black-rgb) / var(--opacity-100));border-radius:var(--swatch--border-radius);pointer-events:none;transform:scale(.8);transition:transform .3s ease,opacity .3s ease;opacity:var(--opacity-0)}.swatch-item.active:after{transform:scale(1);opacity:var(--opacity-100)}.swatch-item label{cursor:pointer}.swatch{--swatch--size: var(--swatch-input--size, 4.4rem);width:var(--swatch--size);aspect-ratio:1 / 1;background-color:var(--swatch--background-color);background-image:var(--swatch--background);background-position:var(--swatch-focal-point, initial);background-size:cover;background-origin:border-box;border-radius:var(--swatch--border-radius)}.swatch-item:has(.swatch--unavailable){border-style:dashed;border-color:rgb(var(--color-black-rgb) / var(--opacity-50))}.swatch-item:has(.swatch.active){border-style:solid;border-color:#000}.swatch-item .tooltip{display:none}@media(min-width:1025px){.swatch-item .tooltip{display:block;opacity:var(--opacity-0);visibility:hidden;pointer-events:none;color:#fff;background:#232323;padding:var(--padding-2xs);min-width:var(--size-40);margin:0 0 var(--margin-sm);border-radius:.2rem;transition:opacity ease .3s,transform ease .3s;font-size:var(--font-size--2xs);transform:translateY(.5rem)}.swatch-item .tooltip:before{content:"";position:absolute;bottom:-.4rem;left:1rem;height:0;width:0;border-top:.7rem solid #232323;border-left:.7rem solid transparent;border-right:.7rem solid transparent;transform:translate(-50%)}.swatch-item:hover .tooltip{opacity:var(--opacity-100);visibility:visible;transform:translateY(0)}.product-card-wrapper .swatch-item:nth-child(n+5) .tooltip{right:0;left:auto}.product-card-wrapper .swatch-item:nth-child(n+5) .tooltip:before{right:.3rem;left:auto;transform:none}.product-card-wrapper:has(.swatch-item:hover),:is(.product-grid__item,.grid__item,.swiper-slide,.resource-list__item):has(.product-card-wrapper .swatch-item:hover){position:relative;z-index:20}}.product-card-wrapper .card__swatch,.product-card-wrapper .card__swatch color-swatch{display:block;width:100%}.product-card-wrapper .card__swatch .swatch-list{justify-content:flex-start;width:100%}.product-card-wrapper .card__swatch .swatch-item{flex:0 0 auto}.product-card-wrapper .cyril-card-swatch-button{-webkit-appearance:none;appearance:none;position:relative;display:block;padding:0;border:0;color:inherit;background:transparent;cursor:pointer}.product-card-wrapper .cyril-card-swatch-button .swatch{--swatch--size: 3.2rem}.product-card-wrapper .cyril-card-swatch-button:focus-visible{outline:.2rem solid rgb(var(--color-foreground-rgb));outline-offset:.3rem}@media screen and (min-width:750px){.template-collection .product-card-wrapper .card__swatch .swatch-list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.4rem;align-items:start;width:100%}.template-collection .product-card-wrapper .card__swatch .swatch-item{width:100%;max-width:3.6rem}.template-collection .product-card-wrapper .cyril-card-swatch-button,.template-collection .product-card-wrapper .cyril-card-swatch-button .swatch{width:100%}.template-collection .product-card-wrapper .cyril-card-swatch-button .swatch{--swatch--size: auto;aspect-ratio:1 / 1}}@media screen and (max-width:749px){.product-card-wrapper .card__swatch .swatch-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;align-items:start;width:100%}.product-card-wrapper .card__swatch .swatch-item{width:fit-content;padding:.15rem}.product-card-wrapper .cyril-card-swatch-button .swatch{--swatch--size: 2.4rem}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/component-swatch.css.map */