.swatches-container{width:100%;max-width:calc(100vw - var(--spacing-x-large));display:inline-block}.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 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 .swatch__block{outline:1px solid var(--border-color);outline-offset:1px;display:flex;width:100%;min-width:var(--spacing-normal);height:auto;aspect-ratio:1;overflow:hidden;position:relative}.swatches-container{margin-left:0}.product-card .swatches{gap:0}.product-card .swatches li{max-width:24px}.product-card .swatch{min-width:32px;min-height:32px}.product-card .swatch .swatch__block{width:16px}.product-card .swatch:before{content:"";display:block;background-color:transparent;position:absolute;width:32px;height:32px;pointer-events:auto;right:0;bottom:0;left:0;top:-50%}.swatch .swatch__color-label{position:static;position:initial;font-size:var(--font-size-x-small);text-align:center;text-transform:capitalize;display:none}.swatch:hover{text-decoration:none}.swatch:hover .swatch__block,.swatch.active .swatch__block{outline-color:var(--body-text-color)}.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{display:grid;grid-template-columns:repeat(5,1fr);margin:0;gap:var(--spacing-x-small)}.swatches.swatches--image::-webkit-scrollbar{display:none}.swatches.swatches--image li{list-style:none}.swatches.swatches--image .swatch{gap:var(--spacing-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:var(--spacing-x-small)}.swatches.swatches--image .swatch .swatch__block img{border-radius:var(--spacing-x-small);pointer-events:none}.swatches.swatches--image .swatch .swatch__block{outline-offset:var(--spacing-xxx-small)}.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)}[lang=ar] .swatch .swatch__color-label{font-size:var(--font-size-normal);line-height:1}