.plp-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.plp-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 24px;
border: 1px solid #c9c6c0;
border-radius: 999px;
background: #f2f0ec;
color: #252627;
font-size: 15px;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
transition-property: background-color, color, border-color, box-shadow, transform;
transition-duration: 200ms;
transition-timing-function: ease;
}
.plp-pill:hover,
.plp-pill:focus-visible {
background: #fa782d;
border-color: #fa782d;
color: #fff;
}
.plp-pill:focus-visible {
outline: 2px solid #252627;
outline-offset: 2px;
}
.plp-pill.is-current {
background: #252627;
border-color: #252627;
color: #fff;
}
.plp-empty {
padding: 14px 16px;
border: 1px dashed #c9c6c0;
font-size: 14px;
color: #6b6b6b;
}
@media (prefers-reduced-motion: reduce) {
.plp-pill { transition: none; }
}