/* Compact PG/VG ratio badge on product miniatures (e.g. "PG 80 - VG 20").
   Self-contained pill with token fallbacks so it renders on every listing
   and on the home featured-products grid, regardless of the filter sidebar. */
.product-pgvg {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 3px;
    background: var(--af-pgvg-bg, #202020);
    color: var(--af-pgvg-fg, #ededf3);
    /* Match the alterbadge Format pill exactly (15px Brockmann Medium token) so
       the two badges share one design when sitting side by side. */
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.5;
    white-space: nowrap;
}

.product-extra-features .product-pgvg {
    margin-top: 0;
}

/* Mirror alterbadge's responsive density steps (padding + font-size) so the
   Format and PG/VG pills shrink in lock-step on tablet/mobile. */
@media (max-width: 768px) {
    .product-pgvg {
        padding: 2px 8px;
        font-size: 13px;
    }
}

@media (max-width: 425px) {
    .product-pgvg {
        padding: 1px 7px;
        font-size: 12px;
    }
}