.swatches-container{max-width:calc(100vw - var(--spacing-x-large))}.swatches{display:flex;flex-wrap:wrap;gap:var(--spacing-x-small);padding-top:var(--spacing-xxx-small);padding-left:var(--spacing-xxx-small)}.swatches li{padding:0}.swatches--overflow-no{display:flex;align-items:center;justify-content:center;font-size:var(--font-size-small)}.swatches li:not(:last-child){margin:0}.swatches li:before{display:none}.swatch{display:flex;flex-direction:column;max-width:-moz-min-content;max-width:min-content}.swatch.color{--swatch--size: var(--swatch-input--size, 4.4rem);--swatch--border-radius: var(--swatch-input--border-radius, 50%);display:block;width:var(--swatch--size);max-width:100%;aspect-ratio:1 / 1;background:var(--swatch--background);background-position:var(--swatch-focal-point, initial);background-size:cover;background-origin:border-box;border-width:.1rem;border-style:solid;border-color:color-mix(in srgb,black 20%,var(--swatch--background));border-radius:var(--swatch--border-radius)}.swatch .swatch__block{display:flex;width:100%;min-width:var(--spacing-normal);height:auto;aspect-ratio:1;overflow:hidden;position:relative}.swatch .swatch__color-label{display:none;position:static;position:initial;font-size:var(--font-size-x-small);text-align:center;text-transform:capitalize}.swatch:hover{text-decoration:none}.swatch:hover .swatch__block,.swatch.active .swatch__block{outline:1px solid var(--body-text-color);outline-offset:1px}.swatch:hover .swatch__color-label{text-decoration:none}.swatch.unavailable .swatch__block:before{content:"";width:200%;height:1px;background-color:var(--border-color);display:block;z-index:1;position:absolute;left:-50%;top:50%;margin:auto;rotate:-45deg}.swatches.swatches--color .swatch{max-width:var(--spacing-normal);max-height:var(--spacing-normal);border-radius:50%}.swatches.swatches--color .swatch .swatch__block{border-radius:50%}.swatches.swatches--image{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;-ms-overflow-style:none;display:flex;margin:0;gap:var(--spacing-x-small)}.swatches.swatches--image::-webkit-scrollbar{display:none}.swatches.swatches--image li{min-width:45px;max-width:45px;margin-right:0;scroll-snap-align:start}.swatches.swatches--image .swatch{gap:var(--spacing-x-small);max-width:none;max-width:initial;padding:3px}.swatches.swatches--image .swatch.unavailable .swatch__block:before{background-color:var(--bg-color-white)}.swatches.swatches--image .swatch .swatch__block{width:100%;border-radius:0;background-color:#f0eee9}.swatches.swatches--image .swatch .swatch__block img{border-radius:0;pointer-events:none;-o-object-fit:contain;object-fit:contain}.swatches.swatches--image .swatch .swatch__block{outline-offset:2px}.swatch--filter .swatch__block{border-radius:50%;min-width:var(--spacing-large);cursor:pointer}.swatch-filter-label{display:flex;align-items:center;gap:var(--spacing-x-small);margin:0}.swatch-filter-wrapper input{cursor:pointer}.swatch-filter-wrapper input:checked+label .swatch__block{outline-color:var(--body-text-color)}.swatch-filter-wrapper:hover .swatch__block{outline-color:var(--body-text-color)}