.avdb-search-wrap {
    max-width: 960px;
    margin: 0 auto;
}

.avdb-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    padding: 20px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    margin-bottom: 24px;
}

.avdb-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 180px;
}

.avdb-field label {
    font-size: 13px;
    font-weight: 600;
}

.avdb-field select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #8c8f94;
}

.avdb-search-submit {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: #1d4ed8;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
}

.avdb-search-submit:hover {
    background: #1e40af;
}

.avdb-vehicle-header h2,
.avdb-vehicle-header h1 {
    margin-bottom: 4px;
    font-size: 28px;
    line-height: 1.2;
}

.avdb-search-heading {
    margin-bottom: 16px;
}

.avdb-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-right: 4px;
}

.avdb-search-submit:disabled {
    background: #a8b6db;
    cursor: not-allowed;
}

/* Loading / error state on an individual cascading dropdown */
.avdb-field {
    position: relative;
}

.avdb-field-loading select {
    background-image: none;
}

.avdb-field-loading::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 14px;
    height: 14px;
    border: 2px solid #c7d2fe;
    border-top-color: #1d4ed8;
    border-radius: 50%;
    animation: avdb-spin 0.6s linear infinite;
}

@keyframes avdb-spin {
    to { transform: rotate(360deg); }
}

.avdb-field-error select {
    border-color: #dc2626;
}

.avdb-field-retry {
    margin-top: 4px;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid #dc2626;
    color: #dc2626;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.avdb-field-retry:hover {
    background: #fef2f2;
}

.avdb-change-vehicle {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    background: #1d1d1d;
    color: #fff !important;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.avdb-change-vehicle:hover {
    background: #333;
}

.avdb-specs-summary {
    border-collapse: collapse;
    margin: 8px 0 20px;
    width: 100%;
    max-width: 480px;
}

.avdb-specs-summary th,
.avdb-specs-summary td {
    text-align: left;
    padding: 6px 12px 6px 0;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

.avdb-specs-summary th {
    color: #666;
    font-weight: 600;
    width: 140px;
}

.avdb-permalink {
    margin: 8px 0 20px;
    font-size: 13px;
}

.avdb-permalink a {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}

.avdb-permalink a:hover {
    text-decoration: underline;
}

.avdb-browse-intro {
    color: #444;
    max-width: 640px;
    margin: 4px 0 16px;
}

.avdb-vehicle-meta {
    color: #666;
    margin-top: 0;
}

.avdb-disclosure {
    font-size: 12px;
    color: #666;
    border-left: 3px solid #dcdcde;
    padding-left: 10px;
    margin: 16px 0 24px;
}

.avdb-category {
    margin-bottom: 32px;
}

.avdb-extra-section {
    margin-bottom: 32px;
}

.avdb-extra-section h2,
.avdb-extra-section h3 {
    margin-bottom: 8px;
}

.avdb-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-right: 6px;
    vertical-align: middle;
}

.avdb-category h3 {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.avdb-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.avdb-parts-table {
    width: 100%;
    border-collapse: collapse;
}

.avdb-parts-table th,
.avdb-parts-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
}

.avdb-parts-table th {
    background: #f6f7f7;
}

/* The component/part-number column is the thing a customer actually
   came for - make it visually stand out from the rest of the row
   (audit item #6) rather than treating every cell as equal weight. */
.avdb-parts-table .avdb-col-primary {
    font-weight: 700;
    color: #111;
}

.avdb-parts-table th.avdb-col-primary {
    color: #1d1d1d;
}

.avdb-verified-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
    cursor: help;
    margin-left: 4px;
}

/* Keep the default table lean - just the part number and where to buy
   it. Every other column (brand, position, specification, notes...)
   stays hidden until the visitor explicitly asks to see it, rather
   than presenting a wide, busy table with every field weighted the
   same (per feedback).

   This entire behaviour is scoped under html.avdb-js - without
   JavaScript, the "See more details" button can't do anything, so
   without it every column stays visible by default instead of being
   permanently hidden with no way to reveal it. See
   avdb_v2_print_js_detection_snippet() in includes/frontend.php. */
html.avdb-js .avdb-parts-table .avdb-col-secondary {
    display: none;
}

html.avdb-js .avdb-parts-table.avdb-expanded .avdb-col-secondary {
    display: table-cell;
}

.avdb-details-toggle {
    display: none;
}

html.avdb-js .avdb-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 10px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #1d4ed8;
    color: #1d4ed8;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.avdb-details-toggle:hover {
    background: #eef2ff;
}

.avdb-details-toggle::after {
    content: "▾";
    font-size: 10px;
    transition: transform 0.15s ease;
}

.avdb-details-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.avdb-buy-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.avdb-buy-btn {
    display: inline-block;
    padding: 4px 10px;
    background: #16a34a;
    color: #fff !important;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.avdb-buy-btn:hover {
    background: #15803d;
}

.avdb-no-link {
    color: #999;
}

.avdb-no-results {
    padding: 20px;
    text-align: center;
    color: #666;
}

.avdb-breadcrumbs {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
}

.avdb-breadcrumbs a {
    color: #1d4ed8;
    text-decoration: none;
}

.avdb-breadcrumbs a:hover {
    text-decoration: underline;
}

/* The final, non-linked crumb is the current page - make it read as
   "you are here" rather than blending into the trail (audit item #22). */
.avdb-breadcrumb-current {
    color: #1d1d1d;
    font-weight: 600;
}

.avdb-browse-list {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.avdb-browse-list li {
    padding: 10px 14px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}

.avdb-browse-list a {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}

.avdb-browse-list a:hover {
    text-decoration: underline;
}

.avdb-category-prompt {
    margin-top: 20px;
}

.avdb-category-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 16px 0 24px;
}

.avdb-category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    text-decoration: none;
    color: #1d1d1d;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.avdb-category-tile:hover {
    background: #eef2ff;
    border-color: #1d4ed8;
}

/* SVG category icons (audit item #9 - monochrome SVG rather than
   emoji as the primary visual language) */
.avdb-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #1d4ed8;
}

.avdb-category-icon svg {
    width: 28px;
    height: 28px;
}

.avdb-category-label {
    font-weight: 600;
    font-size: 14px;
}

.avdb-category-description {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.avdb-category-count {
    font-size: 12px;
    font-weight: 600;
    color: #1d4ed8;
    background: #eef2ff;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
}

.avdb-category-back {
    margin-bottom: 12px;
}

.avdb-category-back a {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}

.avdb-category-back a:hover {
    text-decoration: underline;
}

/*
|--------------------------------------------------------------------------
| Mobile: turn the parts table into a stack of cards
|--------------------------------------------------------------------------
| A parts table can have 8-9 columns (Position, Component, Spec,
| Part Number, Brand, Notes, Years, Buy...) - on a phone that either
| overflows or becomes unreadably compressed. Below ~640px, each row
| becomes a labelled card instead: the desktop table markup is reused
| as-is (server doesn't need to render two versions), just re-laid-out
| with each <td>'s own data-label attribute standing in for the column
| header that's no longer visible (audit item #3).
*/
@media (max-width: 640px) {

    .avdb-parts-table thead {
        display: none;
    }

    .avdb-parts-table,
    .avdb-parts-table tbody,
    .avdb-parts-table tr,
    .avdb-parts-table td {
        display: block;
        width: 100%;
    }

    .avdb-parts-table tr {
        margin-bottom: 14px;
        border: 1px solid #dcdcde;
        border-radius: 8px;
        padding: 10px 14px;
        background: #fff;
    }

    .avdb-parts-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
        padding: 8px 0;
    }

    /* Once expanded, a secondary column still needs the same
       label/value flex row as every other mobile card cell, not the
       desktop table-cell display the wider viewport rule sets. */
    .avdb-parts-table.avdb-expanded .avdb-col-secondary {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
        padding: 8px 0;
    }

    .avdb-parts-table td:last-child {
        border-bottom: none;
    }

    .avdb-parts-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
        text-align: left;
        flex: 0 0 auto;
    }

    .avdb-parts-table td.avdb-col-primary {
        font-size: 16px;
    }

    .avdb-buy-links {
        align-items: flex-end;
    }

    .avdb-category-menu {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

}