/* Product page — memory, storage & color on one row (same pill format) */

.pv-options {
    flex-wrap: wrap;
    gap: 8px;
}

/* Full-width rows for other variant pickers */
#processorPillWrapper,
#connectivityPillWrapper,
#caseSizePillWrapper {
    flex: 1 1 100%;
    min-width: 0;
}

/* Memory, storage, color — equal thirds, single row */
#ramPillWrapper,
#storagePillWrapper,
#colorPillWrapper {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 0;
    max-width: calc(33.333% - 6px);
}

#ramPillWrapper .pv-pill,
#storagePillWrapper .pv-pill,
#colorPillWrapper .pv-pill {
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}

#ramPillWrapper .pv-pill-value,
#storagePillWrapper .pv-pill-value,
#colorPillWrapper .pv-pill-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

#ramPillWrapper .pv-chev,
#storagePillWrapper .pv-chev,
#colorPillWrapper .pv-chev {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    #ramPillWrapper .pv-pill,
    #storagePillWrapper .pv-pill,
    #colorPillWrapper .pv-pill {
        padding: 10px 8px;
        font-size: 0.74rem;
        border-radius: var(--r-sm, 8px);
    }

    #ramPillWrapper .pv-pill-label,
    #storagePillWrapper .pv-pill-label,
    #colorPillWrapper .pv-pill-label {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .pv-options {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #ramPillWrapper,
    #storagePillWrapper,
    #colorPillWrapper {
        flex: 1 1 calc(33.333% - 5px);
        max-width: calc(33.333% - 5px);
    }

    #ramPillWrapper .pv-pill,
    #storagePillWrapper .pv-pill,
    #colorPillWrapper .pv-pill {
        padding: 9px 6px;
        font-size: 0.68rem;
        gap: 3px;
    }

    #ramPillWrapper .pv-pill-label,
    #storagePillWrapper .pv-pill-label,
    #colorPillWrapper .pv-pill-label {
        font-size: 0.55rem;
    }

    #ramPillWrapper .pv-color-dot,
    #colorPillWrapper .pv-color-dot {
        width: 11px;
        height: 11px;
    }
}
