/* --- MOBILE (Pixel Perfect Mobile Spec, matches 600px breakpoint) --- */
@media (max-width: 600px) {

    /*
     * Safety net against page-wide sideways scrolling on mobile. The parts
     * table is intentionally allowed to scroll horizontally on its own
     * (see .tps-table-scroll below) when it's wider than the screen, but
     * that scroll must stay contained inside the table - it should never
     * make the whole page scroll sideways. Since this stylesheet is only
     * ever enqueued on the dedicated widget page (see
     * PartsController::enqueue_parts_assets), it's safe to constrain the
     * page itself here.
     */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .tps-search-container {
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
        overflow-x: hidden;
    }

    /*
     * Bug fix: at the desktop 30px size (with no wrap/shrink rule) a long
     * title (e.g. the Lexus variant, which runs longer than the Toyota one)
     * can exceed the 306px form width and get visually clipped by the
     * `overflow-x: hidden` safety net above. Shrinking the font and allowing
     * the title to wrap onto a second line keeps it fully visible instead.
     */
    .tps-main-title {
        font-size: 20px;
        line-height: 130%;
        word-break: break-word;
        overflow-wrap: break-word;
        padding: 0 4px;
    }

    .tps-sub-title {
        font-size: 18px;
        margin-bottom: 32px;
    }

    .tps-form-wrapper {
        width: 306px;
        max-width: 100%;
        height: auto;
        gap: 24px;
        margin: 0 auto 32px auto;
    }

    .tps-search-form {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .tps-input-group {
        width: 306px;
        max-width: 100%;
    }

    .tps-search-input {
        height: 39px;
    }

    .tps-submit-btn {
        width: 306px;
        max-width: 100%;
        height: 42px;
        order: 2;
    }

    .tps-meta-container {
        flex-direction: row;
        justify-content: space-between;
        width: 306px;
        max-width: 100%;
        margin: 0 auto;
    }

    /*
     * The table itself may still legitimately need to scroll sideways on a
     * narrow screen (6 columns of data don't fit in ~300px) - but only the
     * table, not the footer bar below it, so the footer's gray background
     * always stays full width and fully colored.
     */
    .tps-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tps-table-footer {
        flex-wrap: wrap;
    }

    /*
     * Swipe-to-scroll hint: hidden by default (base rule in style.css),
     * shown here only on mobile, and only after script.js has confirmed
     * (via .is-visible) that the table is actually wider than the screen.
     */
    .tps-scroll-hint.is-visible {
        display: flex;
    }
}