product-swatches{display:flex;align-items:center;gap:var(--spacing-1);min-width:0;overflow:hidden}product-swatches[data-use-swiper] .product-swatches__swiper{flex:1;min-width:0;max-width:100%;overflow:hidden}product-swatches[data-use-swiper] .swiper-wrapper{max-width:100%}product-swatches[data-use-swiper] .product-swatches__list{align-items:center}product-swatches:not([data-use-swiper]) .product-swatches__list{display:flex;flex-wrap:wrap;gap:var(--spacing-2);list-style:none;margin:0;padding:0}product-swatches .product-swatches__button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:none;background:transparent;cursor:pointer;transition:opacity var(--duration-instant);flex-shrink:0}product-swatches .product-swatches__button.swiper-button-disabled{opacity:.5;cursor:not-allowed}product-swatches .product-swatches__swatch{display:grid;place-items:center;gap:var(--spacing-0-5);cursor:pointer;outline:none;position:relative}product-swatches[data-use-swiper] .product-swatches__swatch{width:36px;flex-shrink:0}product-swatches:not([data-use-swiper]) .product-swatches__swatch{width:auto}product-swatches .product-swatches__swatch:focus{outline:none}product-swatches .product-swatches__swatch:focus-visible{outline:2px solid var(--color-foreground);outline-offset:2px;border-radius:4px}product-swatches .product-swatches__swatch:focus-visible .product-swatches__swatch-image{outline:2px solid var(--color-foreground);outline-offset:2px}product-swatches .product-swatches__swatch-label{font-size:var(--text-xs);font-weight:var(--font-weight-bold)}product-swatches .product-swatches__swatch-image{border-radius:99px;overflow:hidden;width:32px;height:32px;object-fit:cover;border:2px solid transparent;transition:border-color var(--duration-instant),box-shadow var(--duration-instant);position:relative}product-swatches .product-swatches__swatch:hover:not([data-disabled]) .product-swatches__swatch-image{border-color:var(--color-foreground);box-shadow:0 0 0 3px var(--color-gray-200)}product-swatches .product-swatches__swatch:focus-visible .product-swatches__swatch-image{border-color:var(--color-foreground);box-shadow:0 0 0 3px var(--color-gray-300)}product-swatches .product-swatches__swatch[data-active] .product-swatches__swatch-image{border-color:var(--color-foreground);box-shadow:0 0 0 3px var(--color-gray-200)}product-swatches .product-swatches__swatch[data-disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
/*# sourceMappingURL=/cdn/shop/t/200/assets/snippet.product-swatches.css.map */