.thread-colors-modal{position:fixed;inset:0;z-index:var(--z-index-popups)}.thread-colors-modal__wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-large)}.thread-colors-modal[open] .thread-colors-modal__wrapper{opacity:1}.thread-colors-modal__panel{width:100%;height:100%;background:var(--color-white)}
@media(min-width:1024px){.thread-colors-modal__panel{width:895px;height:600px;max-width:calc(100% - var(--gutter) * 2);max-height:calc(100% - var(--gutter) * 2)}}.thread-colors{position:relative;display:flex;flex-direction:column;gap:var(--space-40);height:100%;padding:var(--space-40) var(--space-24) 0}@media(min-width:1024px){.thread-colors{padding:var(--space-80) var(--space-80) 0}
}.thread-colors__close{position:absolute;top:var(--space-14);right:var(--space-14);display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--color-grey-8)}@media(min-width:1024px){.thread-colors__close{top:var(--space-30);right:var(--space-70)}}.thread-colors__close svg{display:block;width:24px;height:24px}
.thread-colors__header{display:flex;flex-direction:column;gap:var(--space-24);text-align:center}.thread-colors__title{margin:0}.thread-colors__copy{color:var(--color-grey-7)}.thread-colors__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-16) var(--space-4);flex:1;align-content:start;min-height:0;margin:0;padding:0 0 var(--space-40);overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:thin;list-style:none}
@media(min-width:1024px){.thread-colors__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-24) var(--space-8);padding-bottom:var(--space-80)}}.thread-colors__item{display:flex;flex-direction:column;align-items:center;width:78px}@media(min-width:1024px){.thread-colors__item{width:auto}}.thread-colors__swatch{display:block;width:100%;padding:var(--space-4) var(--space-8)}
.thread-colors__swatch-image{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;background:var(--color-grey-2);-o-object-fit:cover;object-fit:cover}.thread-colors__label{display:block;width:100%;color:var(--color-grey-7);text-align:center;word-break:break-word}