/* Option picker inside a product card. Deliberately plain and self-contained so it
   sits correctly on the Tailwind home page and on the Bootstrap-based listing pages
   without either of them having to know about it. */

.card-feature-picker {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: 100%;
    margin: .6rem 0 .1rem;
    text-align: right;
}

.card-feature-picker__row {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
}

.card-feature-picker__label {
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-feature-picker__select {
    width: 100%;
    max-width: 100%;
    padding: .35rem .5rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #fff;
    color: #0f172a;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    /* Long option names must not stretch the card. */
    text-overflow: ellipsis;
}

.card-feature-picker__select:hover {
    border-color: #94a3b8;
}

.card-feature-picker__select:focus-visible {
    outline: 3px solid rgba(0, 136, 204, .3);
    outline-offset: 1px;
    border-color: #0088cc;
}

/* Two-column mobile grids leave a card barely 150px wide. Values like
   "IPAD 12.9PRO 2024" overflow there, so tighten the type rather than let the
   text clip mid-word. */
@media (max-width: 480px) {
    .card-feature-picker {
        gap: .3rem;
    }

    .card-feature-picker__label {
        font-size: .62rem;
    }

    .card-feature-picker__select {
        padding: .3rem .35rem;
        font-size: .66rem;
    }
}