.tlpb-swatches {
margin: 0 0 var( --tlpb-space-5 );
}
.tlpb-swatches__heading {
display: block;
margin: 0 0 var( --tlpb-space-2 );
color: var( --tlpb-ink );
font-family: var( --tlpb-font-heading );
font-size: var( --tlpb-text-sm );
font-weight: 700;
line-height: 1.35;
}
.tlpb-swatches__list {
display: flex;
flex-wrap: wrap;
gap: var( --tlpb-space-2 );
margin: 0;
padding: 0;
list-style: none;
}
.tlpb-swatches__item {
margin: 0;
padding: 0;
list-style: none;
}  .tlpb-swatches .tlpb-swatch {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var( --tlpb-space-8 );
min-height: var( --tlpb-control-h ); padding: 0 var( --tlpb-space-4 );
border: 0;
border-radius: var( --tlpb-radius-md );
background: var( --tlpb-panel );
box-shadow: inset 0 0 0 1px var( --tlpb-field-line );
color: var( --tlpb-ink );
font-family: var( --tlpb-font-heading );
font-size: var( --tlpb-text-h3 );
font-weight: 800;
line-height: 1;
text-align: center;
text-decoration: none;
transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.tlpb-swatches .tlpb-swatch:hover {
box-shadow: inset 0 0 0 2px var( --tlpb-plum );
color: var( --tlpb-plum );
text-decoration: none;
}
.tlpb-swatches .tlpb-swatch:focus-visible {
outline: 2px solid var( --tlpb-plum );
outline-offset: 3px;
}
.tlpb-swatches .tlpb-swatch.is-active {
background: var( --tlpb-plum );
box-shadow: inset 0 0 0 2px var( --tlpb-plum );
color: var( --tlpb-on-accent );
cursor: default;
} .tlpb-swatch__suffix {
margin-left: 1px;
} .tlpb-swatch__color {
display: block;
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var( --tlpb-line );
} .tlpb-swatches--color .tlpb-swatch,
.tlpb-swatches--image .tlpb-swatch {
min-width: 0;
min-height: 0;
padding: var( --tlpb-space-1 );
border-radius: 50%;
}
.tlpb-swatches--color .tlpb-swatch.is-active,
.tlpb-swatches--image .tlpb-swatch.is-active {
background: var( --tlpb-panel );
box-shadow: inset 0 0 0 2px var( --tlpb-plum );
}
.tlpb-swatch__image {
display: block;
width: 44px;
height: 44px;
overflow: hidden;
border-radius: 50%;
}
.tlpb-swatch__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}  .tlpb-swatches .tlpb-swatch.is-out-of-stock {
background: transparent;
color: var( --tlpb-ink-muted );
}
.tlpb-swatch.is-out-of-stock::after {
content: "";
position: absolute;
top: 50%;
left: 14%;
width: 72%;
height: 2px;
border-radius: var( --tlpb-radius-pill );
background: currentColor;
transform: rotate( -24deg );
pointer-events: none;
} .tlpb-is-loading .tlpb-swatches__list {
opacity: 0.6;
transition: opacity 0.15s ease;
}
.tlpb-is-loading {
cursor: progress;
}
.tlpb-swapped {
animation: tlpb-fade-in 0.25s ease;
}
@keyframes tlpb-fade-in {
from {
opacity: 0.35;
}
to {
opacity: 1;
}
}
@media ( prefers-reduced-motion: reduce ) {
.tlpb-swatches .tlpb-swatch,
.tlpb-is-loading .tlpb-swatches__list {
transition: none;
}
.tlpb-swapped {
animation: none;
}
}