/* products4.html */
/* FakeIDs products search (scoped to this page) */
    .products-search-card {
        background: #ffffff;
        border: 1px solid #e3e8ee;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(17, 24, 39, .06);
        padding: 18px;
        margin-bottom: 28px;
    }
    .products-search-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
    .products-search-field { position: relative; }
    .products-search-field-grow { flex: 1 1 240px; }
    .products-search-field select.products-search-input { width: 230px; }
    .products-search-icon {
        position: absolute; left: 15px; top: 50%;
        transform: translateY(-50%);
        color: #0d6efd; font-size: 15px; line-height: 1; pointer-events: none;
    }
    .products-search-input {
        display: block; width: 100%; height: 48px;
        padding: 0 14px; border: 2px solid #d8dee6; border-radius: 8px;
        font-family: Arial, "Helvetica Neue", Helvetica, Roboto, sans-serif; font-size: 15px; color: #222222;
        background-color: #fbfcfe;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }
    .products-search-field-grow .products-search-input { padding-left: 44px; }
    .products-search-input:focus {
        outline: none; border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, .12); background-color: #ffffff;
    }
    .products-search-select {
        appearance: none; -webkit-appearance: none; -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
        padding-right: 38px; cursor: pointer;
    }
    .products-search-submit {
        height: 48px; padding: 0 26px; border: 2px solid #222222; border-radius: 8px;
        background: #222222; color: #ffffff;
        font-family: Arial, "Helvetica Neue", Helvetica, Roboto, sans-serif; font-size: 14px; font-weight: 700;
        cursor: pointer; white-space: nowrap;
        transition: background-color .15s ease, border-color .15s ease;
    }
    .products-search-submit:hover { background: #0d6efd; border-color: #0d6efd; }
    .products-search-meta {
        display: flex; justify-content: space-between; align-items: center;
        gap: 10px; margin-top: 12px; flex-wrap: wrap;
    }
    .products-result-count { color: #0d6efd; font-weight: 600; font-size: 14px; min-height: 20px; }
    .products-search-hint { color: #6b7280; font-size: 13px; }
    .products-search-clear {
        color: #b02a37; font-weight: 700; font-size: 14px; text-decoration: underline;
        background: transparent; border: none; padding: 0; cursor: pointer;
        font-family: Arial, "Helvetica Neue", Helvetica, Roboto, sans-serif;
    }
    .products-search-clear:hover { color: #8a1f2a; }
    .products-no-results {
        margin: 24px auto; padding: 16px 20px; border-radius: 8px;
        background: #fdecea; color: #b02a37; font-size: 15px; font-weight: 500;
        max-width: 560px;
    }
    /* The site's main.js runs $('select').niceSelect(), which hides the native
       select and swaps in a div whose list is unusable with 78 options. Keep
       the native select visible and hide the plugin's replacement. */
    #products-state { display: block !important; }
    .products-search-field .nice-select.products-search-select { display: none !important; }
    @media (max-width: 575.98px) {
        .products-search-field select.products-search-input { width: 100%; }
        .products-search-field-grow { flex-basis: 100%; }
        .products-search-submit { flex: 1 1 auto; }
        .products-search-meta { justify-content: flex-start; }
    }