.pgpd-variation-field {
    white-space: pre-line;
}

.pgpd-variation-field[hidden] {
    display: none;
}

.pgpd-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pgpd-gap, 0.5rem);
}

.pgpd-selector__label {
    width: 100%;
    font-weight: 600;
}

.pgpd-pill {
    cursor: pointer;
    padding: 0.5em 1em;
    border: 1px solid var(--pgpd-border, #ddd);
    border-radius: var(--pgpd-radius, 999px);
    background: var(--pgpd-bg, #fff);
    color: var(--pgpd-color, #333);
    font: inherit;
    line-height: 1.2;
    transition: background-color 0.15s, border-color 0.15s;
}

.pgpd-pill:hover {
    border-color: var(--pgpd-active-bg, #fed535);
}

.pgpd-pill[aria-pressed="true"] {
    background: var(--pgpd-active-bg, #fed535);
    border-color: var(--pgpd-active-bg, #fed535);
    color: var(--pgpd-active-color, #333);
}

.pgpd-pill:focus-visible,
.pgpd-select:focus-visible {
    outline: 2px solid var(--pgpd-active-bg, #fed535);
    outline-offset: 2px;
}

.pgpd-select {
    padding: 0.5em 1em;
    border: 1px solid var(--pgpd-border, #ddd);
    border-radius: var(--pgpd-radius-select, 8px);
    background: var(--pgpd-bg, #fff);
    color: var(--pgpd-color, #333);
    font: inherit;
}