/* Part-number autocomplete dropdown (home, search page, 404). */
.hero-search {
    position: relative;
}

.mpn-field {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
}

.mpn-field .filter-input {
    width: 100%;
}

div.mpn-dropdown.mpn-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    display: block;
    max-height: min(452px, 62vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 8px 8px;
    background: linear-gradient(180deg, #16305a 0%, #132a4f 100%);
    border: 1px solid rgba(146, 178, 226, 0.28);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(6, 18, 40, 0.45), 0 0 0 1px rgba(247, 137, 47, 0.06), 0 0 50px rgba(247, 137, 47, 0.08);
    text-align: left;
    animation: mpnDropIn .22s cubic-bezier(.2, .8, .2, 1);
}

/* Firefox: styled thin scrollbar (Chrome/Edge/Safari use the custom one below) */
@supports not selector(::-webkit-scrollbar) {
    div.mpn-dropdown.mpn-dropdown {
        scrollbar-width: thin;
        scrollbar-color: #f7a560 transparent;
    }
}

div.mpn-dropdown.mpn-dropdown[hidden] {
    display: none !important;
}

/* Custom scrollbar (Chrome, Edge, Safari) */
div.mpn-dropdown::-webkit-scrollbar {
    width: 14px;
}
div.mpn-dropdown::-webkit-scrollbar-track {
    background: transparent;
    margin: 12px 0;
}
div.mpn-dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffc187, #f7954a);
    border: 4px solid transparent;
    border-radius: 12px;
    background-clip: padding-box;
    min-height: 40px;
}
div.mpn-dropdown::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffd0a2, #fba05a);
    border-width: 3px;
    background-clip: padding-box;
}

/* Sticky header line */
.mpn-dropdown-head {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -8px 4px;
    padding: 12px 18px 9px;
    background: linear-gradient(180deg, #16305a 70%, rgba(22, 48, 90, 0));
    color: #8fa3c0;
    font: 600 11.5px/1.2 'DM Sans', Arial, sans-serif;
    letter-spacing: .02em;
}

/* One suggestion row */
.mpn-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 62px;
    margin: 2px 0;
    padding: 10px 14px 10px 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: #e6edf7;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: background-color .18s ease, border-color .18s ease;
    animation: mpnRowIn .28s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 22ms);
}

.mpn-option-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(247, 137, 47, 0.12);
    box-shadow: inset 0 0 0 1px rgba(247, 137, 47, 0.28);
    color: #ffb45c;
    transition: background-color .18s ease, color .18s ease, transform .25s ease;
}

.mpn-option-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.mpn-option-code {
    font: 600 15px/1.3 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    color: #f4f7fc;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
}

.mpn-option-code mark {
    background: none;
    color: #ffb45c;
}

.mpn-option-sub {
    font: 500 12px/1.2 'DM Sans', Arial, sans-serif;
    color: #8fa3c0;
}

.mpn-option-go {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #ffb45c;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .22s ease, background-color .18s ease;
}

.mpn-option:hover,
.mpn-option[aria-selected="true"] {
    background: rgba(247, 137, 47, 0.1);
    border-color: rgba(247, 137, 47, 0.32);
}

.mpn-option:hover .mpn-option-icon,
.mpn-option[aria-selected="true"] .mpn-option-icon {
    background: linear-gradient(135deg, #ffc187, #f7954a);
    color: #3a1a05;
    box-shadow: none;
    transform: scale(1.04);
}

.mpn-option:hover .mpn-option-go,
.mpn-option[aria-selected="true"] .mpn-option-go {
    opacity: 1;
    transform: none;
    background: rgba(247, 137, 47, 0.14);
}

.mpn-option:focus-visible {
    outline: 2px solid #ffb45c;
    outline-offset: -2px;
}

/* Empty and loading states */
.mpn-dropdown-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 14px 12px;
    color: #b3c1d5;
    font: 500 14px/1.5 'DM Sans', Arial, sans-serif;
}

.mpn-dropdown-empty svg {
    flex: 0 0 auto;
    color: #ffb45c;
}

.mpn-dropdown-loading {
    height: 3px;
    margin: 6px 10px 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #ffb45c, transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: mpnLoad 1s ease-in-out infinite;
}

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

@keyframes mpnRowIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@keyframes mpnLoad {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

@media (max-width: 720px) {
    .mpn-option { min-height: 58px; gap: 11px; }
    .mpn-option-icon { width: 38px; height: 38px; }
    .mpn-option-code { font-size: 14px; }
    .mpn-option-go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    div.mpn-dropdown.mpn-dropdown,
    .mpn-option,
    .mpn-dropdown-loading { animation: none; }
}