/**
 * Product Selections — 2-column grid of slot pickers.
 *
 * Layout strategy:
 *   - Outer wrapper is a CSS grid: 2 columns on desktop, 1 column on mobile.
 *   - Each .ps-slot is a flex column (label stacked above select), so labels
 *     never wrap into the select's space and alignment stays clean across
 *     varying label lengths ("Symbol 1" vs longer custom slot labels).
 *   - Sub-select sits below the primary, inheriting the slot's full width.
 */

.product-selections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 columns side-by-side */
    gap: 1em 1.5em;                          /* row-gap | column-gap */
    margin-bottom: 3em;
    width: 100%;
}

.product-selections .ps-slot {
    display: flex;
    flex-direction: column;
    min-width: 0; /* prevents long <option> text from blowing out the column */
}

.product-selections .ps-slot-label {
    display: block;
    margin-bottom: 0.4em;
    font-weight: 600;
    white-space: nowrap; /* keeps "Symbol 1" on one line */
}

.product-selections .ps-primary,
.product-selections .ps-sub {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.product-selections .ps-sub {
    margin-top: 0.5em;
}

/* Single column on narrow viewports — 4 slots stacked is friendlier than
   a cramped 2-col on phones. */
@media (max-width: 600px) {
    .product-selections {
        grid-template-columns: 1fr;
        gap: 0.75em;
    }
}