@media (max-width: 768px) {

    /* FILTER PAGE ONLY */
    form.filter-box:has(.pc-mobile-search-close) {
        padding-top: 76px !important;
        padding-bottom: 92px !important;
    }

    /*
     * Move the actual filter content down so Make / Model
     * sit below the fixed website header.
     * Does NOT alter filter button styling.
     */
    form.filter-box:has(.pc-mobile-search-close) .filter-inner {
        margin-top: 0 !important;
    }


    /* =========================
       FIXED BOTTOM ACTION BAR
       ========================= */

    form.filter-box:has(.pc-mobile-search-close) .search-btn-container {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        z-index: 9990 !important;

        display: grid !important;
        grid-template-columns: 88px 88px minmax(0, 1fr) !important;

        gap: 8px !important;

        width: 100% !important;

        padding:
            10px
            12px
            max(10px, env(safe-area-inset-bottom)) !important;

        margin: 0 !important;

        background: rgba(255,255,255,.98) !important;

        border-top: 1px solid #eceef1 !important;

        box-shadow: 0 -8px 22px rgba(20,24,28,.08) !important;

        backdrop-filter: blur(10px);
    }


    form.filter-box:has(.pc-mobile-search-close) .mobile-buttons-container {
        display: contents !important;
    }


    /* CLEAR ALL */

    form.filter-box:has(.pc-mobile-search-close)
    .clear-all-link:not(.pc-mobile-search-close) {

        grid-column: 1 !important;

        width: 88px !important;
        height: 48px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 1px solid #e1e3e7 !important;
        border-radius: 12px !important;

        background: #f6f7f8 !important;

        color: #e32636 !important;

        font-size: 12px !important;
        font-weight: 750 !important;

        text-decoration: none !important;

        box-shadow: none !important;
    }


    /* CLOSE */

    form.filter-box:has(.pc-mobile-search-close)
    .pc-mobile-search-close {

        grid-column: 2 !important;

        position: static !important;

        width: 88px !important;
        height: 48px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 1px solid #e1e3e7 !important;
        border-radius: 12px !important;

        background: #ffffff !important;

        color: #33363a !important;

        font-size: 12px !important;
        font-weight: 750 !important;

        text-decoration: none !important;

        box-shadow: none !important;
    }


    /* SEARCH */

    form.filter-box:has(.pc-mobile-search-close)
    .search-btn {

        grid-column: 3 !important;

        width: 100% !important;
        height: 48px !important;

        padding: 0 16px !important;

        border: 0 !important;
        border-radius: 12px !important;

        background: #111111 !important;

        color: #ffffff !important;

        font-size: 15px !important;
        font-weight: 800 !important;

        box-shadow: none !important;
    }

}



@media (max-width: 768px) {

    /* Filter page mobile selector only */
    form.filter-box:has(.pc-mobile-search-close)
    .custom-select-header {
        border-bottom: 0 !important;
    }

    /* Remove the divider from the first "Any..." option */
    form.filter-box:has(.pc-mobile-search-close)
    .custom-select-list li:first-child .dropdown-item {
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

}


@media (max-width: 768px) {

    /* Keep the normal separator directly under the modal header */
    .custom-select-header {
        border-bottom: 1px solid #f1efef !important;
    }

    /*
     * First "Any..." option:
     * remove only its internal/extra lower separator.
     * Other option rows keep their normal separators.
     */
    form.filter-box:has(.pc-mobile-search-close)
    .custom-select-list > li:first-child .dropdown-item {
        border-bottom: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
        background-image: none !important;
    }

    /*
     * Put the normal separator between "Any..." and the first real option,
     * so the list still has proper row separation.
     */
    form.filter-box:has(.pc-mobile-search-close)
    .custom-select-list > li:nth-child(2) .dropdown-item {
        border-top: 1px solid #dddddd !important;
    }

}

@media (max-width: 768px) {

    /*
     * Keep list flush directly under the selector header
     */
    form.filter-box:has(.pc-mobile-search-close)
    .custom-select-list {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /*
     * Make the first "Any..." row exactly the same size
     * as the rest of the option rows.
     */
    form.filter-box:has(.pc-mobile-search-close)
    .custom-select-list > li:first-child {
        margin: 0 !important;
        padding: 0 !important;
    }

    form.filter-box:has(.pc-mobile-search-close)
    .custom-select-list > li:first-child .dropdown-item {
        min-height: 52px !important;

        display: flex !important;
        align-items: center !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        padding-left: 35px !important;
        padding-right: 16px !important;

        margin: 0 !important;

        line-height: 1.2 !important;

        border-bottom: 0 !important;
    }

    /*
     * Keep the normal separator before the first real option.
     */
    form.filter-box:has(.pc-mobile-search-close)
    .custom-select-list > li:nth-child(2) .dropdown-item {
        border-top: 1px solid #dddddd !important;
    }

}

@media (max-width: 768px) {

    form.filter-box:has(.pc-mobile-search-close) .search-btn-container {
        background: #f4f5f6 !important;

        border-top: 1px solid #d9dde3 !important;

        box-shadow:
            0 -8px 24px rgba(0, 0, 0, 0.10),
            0 -1px 3px rgba(0, 0, 0, 0.06) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

}