.nearest-locations-grid {
    /* ===== CONFIG ===== */
    --pill-fixed-width: 200px;
    --pill-auto-width: 0;
    /* 0 = fissa | 1 = variabile */

    /* ===== LAYOUT ===== */
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    gap: 0.5rem;
    margin-bottom: 1rem;
    cursor: pointer;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;

    /* trucco: se auto → colonne auto, se no → larghezza fissa */
    grid-auto-columns:
        calc((1 - var(--pill-auto-width)) * var(--pill-fixed-width) + var(--pill-auto-width) * max-content);
}

.nearest-locations-pill {
    display: inline-flex;
    /* necessario per max-content */
    align-items: center;
    gap: 0.5rem;

    border: 1px solid var(--primary-color);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    box-sizing: border-box;

    white-space: nowrap;
    scroll-snap-align: start;
    font-weight: bold;
}

.nearest-locations-pill:hover {
    background-color: var(--primary-hover);
    color: var(--background-alt);
}