.swatch-modal{position:fixed;inset:0;z-index:var(--z-index-popups);display:flex;justify-content:flex-end}.swatch-modal__wrapper{width:100%;max-width:588px;height:100%;background:var(--color-white);overflow:hidden auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform var(--transition-large);scrollbar-width:thin}
.swatch-modal[open] .swatch-modal__wrapper{transform:translateX(0)}.swatch-modal__panel{display:flex;flex-direction:column;min-height:100%}.swatch-modal-content{--swatch-modal-padding:var(--gutter);display:flex;flex-direction:column;flex:1;min-height:0}@media(min-width:768px){.swatch-modal-content{--swatch-modal-padding:var(--space-40)}
}.swatch-modal-content__bar{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;padding:var(--space-24) var(--swatch-modal-padding) var(--space-8);background:var(--color-white)}@media(min-width:768px){.swatch-modal-content__bar{margin-top:55px}}.swatch-modal-content__inner{display:flex;flex-direction:column;flex:1;padding:0 var(--swatch-modal-padding) var(--space-40)}
.swatch-modal-content__header{display:flex;flex-direction:column;gap:var(--space-8);text-align:center;align-items:center;color:var(--color-grey-7);margin-bottom:var(--space-40)}.swatch-modal-content__close{--icon-size:24px;--hit-area-inset:var(--space-10);display:flex;align-items:center;justify-content:center;width:calc(var(--icon-size) + var(--hit-area-inset) * 2);height:calc(var(--icon-size) + var(--hit-area-inset) * 2);background:0;padding:0;margin:calc(var(--hit-area-inset) * -1) calc(var(--hit-area-inset) * -1) calc(var(--hit-area-inset) * -1) 0}
.swatch-modal-content__close-icon{display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size)}.swatch-modal-content__close-icon svg{width:100%;height:100%}.swatch-modal-content__title{width:100%;max-width:300px}.swatch-modal-content__description{width:100%;font:var(--font-body);text-transform:var(--font-body-text-transform);letter-spacing:var(--font-body-letter-spacing)}
.swatch-modal-content__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24) var(--space-16);list-style:none;padding:0;margin:0}@media(min-width:768px){.swatch-modal-content__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-40) var(--space-24)}}.swatch-modal-content__grid--compact{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:768px){.swatch-modal-content__grid--compact{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:767px){.swatch-modal-content__grid--compact .swatch-modal-content__swatch-title{font:var(--font-body-2);text-transform:var(--font-body-2-text-transform);letter-spacing:var(--font-body-2-letter-spacing)}
}.swatch-modal-content__swatch{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);width:100%;padding:0;background:0;border:0;text-align:center}.swatch-modal-content__swatch:disabled{cursor:not-allowed;opacity:.4}.swatch-modal-content__swatch-media{position:relative;display:block;width:100%;aspect-ratio:1;background:var(--color-grey-2);overflow:hidden}
.swatch-modal-content__swatch-image{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.swatch-modal-content__swatch-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--color-white);color:var(--color-grey-8);opacity:0;transition:opacity var(--transition-small);pointer-events:none}
.swatch-modal-content__swatch-icon{display:none;align-items:center;justify-content:center}.swatch-modal-content__swatch-icon svg{width:24px;height:24px}.swatch-modal-content__swatch--selected .swatch-modal-content__swatch-overlay{opacity:1}.swatch-modal-content__swatch--selected .swatch-modal-content__swatch-icon--selected{display:flex}
.swatch-modal-content__swatch:not(:disabled):not(.swatch-modal-content__swatch--selected):focus-visible .swatch-modal-content__swatch-overlay{opacity:.8}.swatch-modal-content__swatch:not(:disabled):not(.swatch-modal-content__swatch--selected):focus-visible .swatch-modal-content__swatch-icon--add{display:flex}@media(hover:hover) and (pointer:fine){.swatch-modal-content__swatch:not(:disabled):not(.swatch-modal-content__swatch--selected):hover .swatch-modal-content__swatch-overlay{opacity:.8}
.swatch-modal-content__swatch:not(:disabled):not(.swatch-modal-content__swatch--selected):hover .swatch-modal-content__swatch-icon--add{display:flex}}.swatch-modal-content--at-limit .swatch-modal-content__swatch:not(:disabled):not(.swatch-modal-content__swatch--selected){cursor:not-allowed}.swatch-modal-content__swatch-title{font:var(--font-body);text-transform:var(--font-body-text-transform);letter-spacing:var(--font-body-letter-spacing);color:var(--color-grey-7)}
.swatch-modal-content__footer{position:sticky;bottom:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-8);padding:var(--space-24) var(--swatch-modal-padding);background:var(--color-white);border-top:1px solid var(--color-grey-3)}@media(min-width:768px){.swatch-modal-content__footer{padding:var(--space-40) var(--swatch-modal-padding)}
}.swatch-modal-content__add{--button-min-width:271px}.swatch-modal-content__message{font:var(--font-caption-1);text-transform:var(--font-caption-1-text-transform);letter-spacing:var(--font-caption-1-letter-spacing);color:var(--color-grey-7);text-align:center}.swatch-modal-content__message:empty{display:none}.swatch-modal-content__message--error{color:var(--color-error)}
.swatch-request-trigger{display:block;margin-left:auto;margin-bottom:2px}.swatch-request-trigger button[aria-busy=true]{cursor:progress}