/* Mobile — anchor variant dropdowns below the pill (not bottom sheet) */

@media (max-width: 768px) {
    .pv-page .pv-options,
    .pv-page .pv-details-col,
    .pv-page .pv-variant-wrap {
        overflow: visible !important;
    }

    .pv-page .pv-variant-wrap {
        position: relative;
        z-index: 1;
    }

    .pv-page .pv-variant-wrap:has(.pv-dd--open) {
        z-index: 450;
    }

    .pv-page .pv-variant-wrap .pv-dropdown {
        position: absolute !important;
        top: calc(100% + 7px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: auto !important;
        min-width: 100% !important;
        width: max-content !important;
        max-width: min(320px, calc(100vw - 24px)) !important;
        border-radius: var(--r-md, 12px) !important;
        max-height: min(260px, 42vh) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        animation: pvDdAnchorPop 0.18s ease both !important;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14) !important;
        z-index: 500 !important;
        transform: none !important;
    }

    .pv-page .pv-variant-wrap .pv-dropdown.pv-dd--above {
        top: auto !important;
        bottom: calc(100% + 7px) !important;
        animation: pvDdAnchorPopAbove 0.18s ease both !important;
    }

    .pv-page .pv-variant-wrap .pv-dropdown.pv-dd--align-right {
        left: auto !important;
        right: 0 !important;
    }

    /* Full-width processor / connectivity rows — wider menu */
    .pv-page #processorPillWrapper .pv-dropdown,
    .pv-page #connectivityPillWrapper .pv-dropdown,
    .pv-page #caseSizePillWrapper .pv-dropdown {
        min-width: min(100%, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
    }

    @keyframes pvDdAnchorPop {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pvDdAnchorPopAbove {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}