.cro-swatches--img{display:flex;flex-wrap:wrap;gap:12px}.cro-swatch--img{flex-direction:column;align-items:center;gap:8px;width:var(--cro-swatch-size,88px);max-width:100%;padding:0;border:0;border-radius:0;background:none;text-align:center;cursor:pointer}.cro-swatch--img:hover,.cro-swatch--img.is-active{background:none;border-color:transparent}.cro-swatch-tile{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;border-radius:12px;background:var(--cro-swatch-tile-bg,#eef3f8);overflow:hidden;transition:box-shadow .15s ease,transform .15s ease}.cro-swatch-img{display:block;width:100%;height:100%;object-fit:cover}.cro-swatch-name{font-size:12px;font-weight:500;line-height:1.3;color:var(--cro-swatch-label,#6b7280)}.cro-swatch--img:hover .cro-swatch-tile{transform:translateY(-2px)}.cro-swatch--img:focus-visible .cro-swatch-tile{box-shadow:0 0 0 2px var(--cro-swatch-gap,#fff),0 0 0 4px var(--cro-swatch-focus,#3f8dd8)}.cro-swatch--img.is-active .cro-swatch-tile{box-shadow:0 0 0 2px var(--cro-swatch-gap,#fff),0 0 0 4px var(--cro-swatch-ring,#37466a)}.cro-swatch--img.is-active .cro-swatch-name{color:var(--cro-swatch-label-active,#37466a);font-weight:600}@media(max-width:749px){.cro-swatches--img{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;justify-content:stretch}.cro-swatch--img{width:auto;min-width:0;padding:0}.cro-swatch-name{overflow-wrap:break-word}}@media(prefers-reduced-motion:reduce){.cro-swatch--img:hover .cro-swatch-tile{transform:none}}@media(max-width:749px){html.cro-layout-carousel .ers-pdp__option-values{display:flex!important;flex-wrap:nowrap;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;scroll-padding-right:20px;-webkit-overflow-scrolling:touch;gap:12px;width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;padding:8px 20px 10px;scrollbar-width:none;-ms-overflow-style:none}html.cro-layout-carousel .ers-pdp__option-values::-webkit-scrollbar{display:none;width:0;height:0}html.cro-layout-carousel .ers-pdp__option-values>*{flex:0 0 auto;scroll-snap-align:start}html.cro-layout-carousel .cro-swatch--img{width:var(--cro-swatch-size,88px)}}
/*# sourceMappingURL=/cdn/shop/t/56/assets/cro-swatch.css.map */