/* Header fixes that pair with the API-driven content.
 *
 * The template's category <select> held four short hardcoded labels ("Hand
 * Tools", "Power Tools"…). It now holds the real category names, the longest
 * being "Abrasives, Fillers, Sealants & Lubricants" — and a <select> sizes
 * itself to its widest option, so the search input-group wrapped onto a second
 * row on anything narrower than a very wide desktop.
 *
 * Capping the select keeps the search box on one row at every width, which is
 * how the template looked before the real data went in.
 */

.search-section .input-group {
    flex-wrap: nowrap;
}

.search-section .categories-dropdown {
    flex: 0 0 auto;
    max-width: 190px;
    overflow: hidden;
}

.search-section select.form-select {
    max-width: 100%;
    text-overflow: ellipsis;
    padding-right: 1.75rem;
}

.search-section .form-control {
    min-width: 0;
}

/* The account slot grew from "Log In" to "<name> Log Out"; keeping it on one
   line stops it stealing width from the search box. */
.contact-section .account-menu {
    white-space: nowrap;
}

.contact-section .account-menu .account-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}

@media (max-width: 1600px) {
    .contact-section {
        gap: 2em;
    }
}

@media (max-width: 1400px) {
    .contact-section {
        gap: 1.4em;
    }

    /* Wide enough that "All Categories" still reads in full. */
    .search-section .categories-dropdown {
        max-width: 175px;
    }
}

@media (max-width: 1200px) {
    .search-section .categories-dropdown {
        max-width: 160px;
    }

    .search-section select.form-select {
        font-size: 0.85rem;
    }
}