.russo-card-swatches { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin: 0 0 8px; min-height: 44px; font-family: 'Poppins', sans-serif; }
.russo-card-swatches .russo-card-swatch { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 2px; text-decoration: none; color: #222; font-size: 12px; line-height: 1; background: transparent; }
.russo-card-swatches .russo-card-swatch:hover, .russo-card-swatches .russo-card-swatch:focus-visible { border-color: #BE3455; outline-offset: 2px; }
.russo-color-chip { display: block; width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid rgba(34,34,34,.3); border-radius: 0; }
.russo-card-swatches .russo-card-swatch { box-sizing: border-box; }
.russo-card-swatches .russo-card-swatch .russo-color-chip { box-sizing: border-box; width: 100%; height: 42px; flex: 0 0 100%; }
.russo-card-swatches.russo-swatches-overflow .russo-card-color:nth-child(n+4) { display: none; }
.russo-swatch-unset { font-size: 12px; color: #66605C; }
.single-product .russo-option.russo-color-option { position: relative; padding: 10px; min-width: 44px; min-height: 44px; width: 44px; }
.single-product .russo-color-option[aria-pressed="true"]::after { content: '✓'; display: grid; place-items: center; position: absolute; bottom: 1px; right: 1px; width: 14px; height: 14px; color: #942842; background: #fff; font-size: 12px; line-height: 1; }
.single-product .russo-color-option[aria-disabled="true"]::before { content: ''; position: absolute; inset: 50% 5px auto; border-top: 1px solid #66605C; transform: rotate(-45deg); }
.single-product .russo-selected-color { font-weight: 400; margin-left: 4px; color: #66605C; }
.single-product .russo-option.russo-thumbnail-option { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex: 0 0 88px; width: 88px; min-height: 44px; padding: 0; border: 0; gap: 8px; background: transparent; color: #222; box-shadow: none; text-align: left; font-size: 12px; font-weight: 400; text-decoration: none; }
.single-product .russo-thumbnail-option .russo-variant-preview { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid #D1C9C3; border-radius: 2px; background: #F3F0EE; font-size: 10px; color: #66605C; }
.single-product .russo-variant-preview img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.single-product .russo-variant-name { display: block; line-height: 1.4; overflow-wrap: anywhere; }
.single-product .russo-thumbnail-option:hover .russo-variant-preview { border-color: #BE3455; }
.single-product .russo-thumbnail-option[aria-pressed="true"] .russo-variant-preview { border-color: #BE3455; box-shadow: inset 0 0 0 1px #BE3455; }
.single-product .russo-thumbnail-option[aria-pressed="true"] .russo-variant-preview::after { content: '✓'; display: grid; place-items: center; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; background: #BE3455; color: #fff; border-radius: 2px; font-size: 12px; line-height: 1; }
.single-product .russo-thumbnail-option[aria-pressed="true"] .russo-variant-name { font-weight: 500; }
.single-product .russo-thumbnail-option[aria-pressed="true"]::after, .single-product .russo-thumbnail-option[aria-disabled="true"]::before { content: none; }
.single-product .russo-thumbnail-option[aria-disabled="true"] .russo-variant-preview { opacity: .45; }
.single-product .russo-thumbnail-option[aria-disabled="true"] .russo-variant-name { text-decoration: line-through; color: #827A74; }
/* The active catalog filter defines each card's default color. */
.russo-card-swatches .russo-card-swatch[aria-current="true"] { position: relative; border-color: #BE3455; }
.russo-card-swatches .russo-card-swatch[aria-current="true"]::before { content: ''; position: absolute; top: 1px; right: 1px; width: 14px; height: 12px; border-radius: 2px; background: #fff; pointer-events: none; }
.russo-card-swatches .russo-card-swatch[aria-current="true"]::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 5px; border: solid #222; border-width: 0 0 2px 2px; transform: rotate(-45deg); pointer-events: none; }