/* ===========================================================
   Catalogo — stile "dettaglio articolo" (.ad-* + veicoli compatibili).
   Consuma i ruoli semantici (Material 3) definiti nelle skin.
   Regole:
   - class-based: nessun riferimento agli #id del consumer (restano hook JS);
     il consumer applica le classi (.catalog-detail, .catalog-section, ...);
   - nessun colore hardcoded: solo var(--ruolo) e color-mix per le translucenze (niente triplette --*-rgb);
   - l'accent solo su sfondi/bordi/fill, mai come colore di testo.
   =========================================================== */

/* ══════════════════════════════════════════════════════════
   Articolo Detail Page  (.ad-*)
   ══════════════════════════════════════════════════════════ */

/* ── Back button ── */
.ad-panel-back {
    padding: 10px 0 12px;
    border-bottom: 2px solid var(--bs-primary);
    margin-bottom: 4px;
}

.ad-back-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    transition: color 0.15s;
}

.ad-back-btn:hover {
    color: var(--bs-body-color);
}

.ad-back-btn__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: 0.65rem;
    margin-right: 8px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.ad-back-btn:hover .ad-back-btn__arrow {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-primary-on);
    transform: translateX(-3px);
}

.ad-back-btn__label {
    letter-spacing: 0.01em;
}

.ad-img-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: color-mix(in srgb, #000000 8%, transparent);
    border: none;
    color: var(--bs-secondary-color);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 1;
}

.ad-img-nav:hover {
    background: color-mix(in srgb, #000000 18%, transparent);
}

.ad-img-nav--prev {
    left: 6px;
}

.ad-img-nav--next {
    right: 6px;
}

.ad-img-counter {
    position: absolute;
    bottom: 6px;
    right: 8px;
    padding: 2px 8px;
    background: color-mix(in srgb, #000000 55%, transparent);
    color: var(--bs-dark-on);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    letter-spacing: .03em;
}

/* ── Tabs ── */
.ad-tabs-wrap {
    position: relative;
}

/* Fade hint: segnala contenuto scrollabile quando i tab non entrano */
.ad-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 46px; /* altezza riga tab */
    background: linear-gradient(to right, transparent, var(--bs-body-bg) 80%);
    pointer-events: none;
    border-radius: 0 10px 0 0;
    z-index: 1;
}

.ad-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid var(--bs-border-color);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ad-tabs::-webkit-scrollbar { display: none; }

.ad-tab {
    padding: 11px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    user-select: none;
}

.ad-tab:hover {
    color: var(--bs-body-color);
}

/* Tab attiva: testo NEUTRO (leggibile con qualsiasi skin) + indicatori ACCENT
   ben visibili → sottolineatura accent spessa (box-shadow, niente shift) +
   sfondo accent tenue. L'accent sta su sfondo/bordo, MAI come colore testo. */
.ad-tab.active {
    color: var(--bs-body-color);
    font-weight: 700;
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    box-shadow: inset 0 -3px 0 var(--bs-primary);
    border-radius: 6px 6px 0 0;
}

.ad-tab-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: 4px;
    background: var(--bs-tertiary-bg);
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    text-align: center;
    line-height: 1.4;
}

.ad-tab.active .ad-tab-count {
    background: var(--bs-primary);
    color: var(--bs-primary-on);
}

/* ── Tab panels ── */
.ad-tab-panel {
    display: none;
    padding: 16px;
}

.ad-tab-panel.active {
    display: block;
    animation: ad-tab-fade 0.22s ease-out;
}

@keyframes ad-tab-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ad-tab-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--bs-secondary-color);
    font-size: 0.88rem;
}

.ad-tab-placeholder i {
    margin-right: 6px;
}

/* Caratteristiche table */
.ad-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ad-specs-table thead tr {
    background: var(--bs-tertiary-bg);
    border-bottom: 2px solid var(--bs-border-color);
}

.ad-specs-table th {
    padding: 8px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
    text-align: left;
}

.ad-specs-table tbody tr {
    border-bottom: 1px solid var(--bs-tertiary-bg);
    transition: background 0.1s;
}

.ad-specs-table tbody tr:hover {
    background: var(--bs-tertiary-bg);
}

.ad-specs-table tbody tr:last-child {
    border-bottom: none;
}

.ad-specs-table td {
    padding: 8px 12px;
    color: var(--bs-body-color);
    vertical-align: middle;
}

.ad-specs-n {
    width: 48px;
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: 0.75rem;
}

.ad-specs-criterio {
    font-weight: 600;
    color: var(--bs-body-color);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
}

.ad-specs-valore {
    color: var(--bs-secondary-color);
}

.ad-specs-empty {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 30px;
    font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 575px) {
    .ad-tab {
        padding: 10px 12px;
        font-size: 0.78rem;
    }
}

/* ══════════════════════════════════════════════════════════
   Article Detail  (.ad-detail / .ad-card)
   ══════════════════════════════════════════════════════════ */

/* Superficie dei pannelli (info/tabs/veicoli) → utility Bootstrap nel markup
   (bg-body border rounded-3 shadow-sm). `.ad-card` resta solo hook/layout. */

/* Layout esterno: colonna di pannelli */
.ad-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Riga superiore: info (sx) + tabs (dx) affiancati */
.ad-detail__row {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

/* Pannello info (sx): immagine + corpo testo */
.ad-detail__row .ad-card {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    gap: 20px;
    padding: 20px;
}

/* Pannello tabs (dx) */
.ad-detail__row .ad-tabs-wrap {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ad-detail__row .ad-tabs-wrap .ad-tab-panel {
    flex: 1;
    overflow-y: auto;
    max-height: 460px;
}

/* Nasconde scrollbar in tutto il dettaglio */
.ad-detail *::-webkit-scrollbar,
.ad-detail::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    display: none !important;
}
.ad-detail,
.ad-detail * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* ── Immagine ─────────────────────────────────────────────── */
.ad-card__img {
    position: relative;
    flex: 0 0 512px;
    width: 512px;
    height: 512px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
}
.ad-card__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ad-card__img.img-zoom-trigger { cursor: zoom-in; }
/* I bottoni prev/next non ereditano zoom-in */
.ad-card__img.img-zoom-trigger .ad-img-nav { cursor: pointer; }

/* ── Corpo info (brand, codice, griglia, CTA) ─────────────── */
.ad-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ad-card__brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.ad-card__brand {
    color: var(--bs-body-color);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ad-card__code {
    margin: 0 0 4px;
    font-family: 'Courier New', monospace;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--bs-body-color);
    line-height: 1.05;
    letter-spacing: 0.01em;
}

/* Tag dettaglio → badge soft Bootstrap (nel markup):
   - accessorio  → `badge bg-body-tertiary text-body-secondary border`
   - rigenerato  → `badge bg-warning-subtle text-warning-emphasis border border-warning-subtle` */

.ad-card__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 16px;
}
.ad-card__cell-key {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
.ad-card__cell-val {
    font-size: 0.85rem;
    color: var(--bs-body-color);
    font-weight: 600;
    word-break: break-word;
}

/* ── CTA (status + price + azioni) — ancorata in fondo al corpo ── */
.ad-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--bs-border-color);
    flex-wrap: wrap;
}
.ad-card__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bs-success);
    font-weight: 700;
    font-size: 0.82rem;
}
.ad-card__status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bs-success);
    box-shadow: 0 0 6px color-mix(in srgb, var(--bs-success) 50%, transparent);
}
.ad-card__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
/* Prezzo: testo NEUTRO (leggibile su ogni skin), prominenza da size/weight, non dal colore accent. */
.ad-card__price-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--bs-body-color);
    line-height: 1;
}
.ad-card__price-note {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ad-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* Bottoni CTA del dettaglio → classi Bootstrap `btn ... flex-fill`:
   - "Accedi/Richiedi" → `btn btn-primary flex-fill`
   - "Confronta"       → `btn btn-outline-primary flex-fill` (hook `.pr-bk__btn-compare`)
   Il contenitore `.ad-card__actions` resta layout; `flex-fill` fa riempire la riga. */

/* ══════════════════════════════════════════════════════════
   OEM grid + tab-search
   ══════════════════════════════════════════════════════════ */

/* ── OEM grid (dentro tab-oem) ────────────────────────────── */
.ad-oem-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bs-body-bg);
}
.ad-oem-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-tertiary-bg);
    font-size: 0.78rem;
    min-width: 0;
}
.ad-oem-row:nth-child(2n) { border-right: none; }
.ad-oem-row:hover { background: var(--bs-tertiary-bg); }
.ad-oem-code {
    font-family: monospace;
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ad-oem-brand {
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 50%;
}
.ad-oem-empty {
    padding: 18px 12px;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
}
@media (max-width: 575px) {
    .ad-oem-grid { grid-template-columns: 1fr; }
    .ad-oem-row { border-right: none; }
}

/* ── Search input dentro una tab ──────────────────────────── */
.ad-tab-search {
    position: relative;
    margin-bottom: 10px;
}
.ad-tab-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    pointer-events: none;
}
.ad-tab-search input {
    width: 100%;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    outline: none;
    transition: border-color 0.15s;
}
.ad-tab-search input:focus {
    border-color: var(--bs-primary);
}

/* ══════════════════════════════════════════════════════════
   Pannello veicoli compatibili
   ══════════════════════════════════════════════════════════ */

/* ── Pannello veicoli compatibili (superficie via utility nel markup) ── */
/* .catalog-card (framework) imposta overflow:hidden → romperebbe l'header sticky
   della tabella (un antenato che clippa "cattura" il position:sticky). Qui lo
   riporto a visible (selettore più specifico → vince a prescindere dall'ordine
   di caricamento). Il contenuto è comunque inset dal padding, niente bleed. */
.ad-veicoli.catalog-card { overflow: visible; }
.ad-veicoli__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: var(--bs-body-color);
}
.ad-veicoli__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bs-body-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Sottotitolo della lista veicoli (pannello ricerca per marca/modello): invito a cliccare. */
.veicoli-lista__hint {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}
.ad-veicoli__count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    background: var(--bs-primary);
    color: var(--bs-primary-on);
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}
/* ── Layout "card per modello" della tabella veicoli ────────────────────────
   Header colonne condiviso una volta per pannello-marca; ogni modello è una
   card arrotondata con la sua tabella di versioni. Header e card usano
   table-layout:fixed con le STESSE larghezze → colonne allineate tra loro.
   Colori skin-safe: i testi sono SEMPRE neutri (dark/grey); l'accento resta
   solo su bordi/sfondi tenui, mai come colore del testo. ── */
.ad-veicoli .ad-tabs-wrap { background: none; box-shadow: none; }
.ad-veicoli .ad-tab-panel { padding: 4px 2px 2px; }

/* Toolbar ricerca: input allineato a destra, tra le tab e l'header colonne. */
.ad-veicoli__toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 14px 2px 14px; /* Spazio calibrato tra la linea dei tab e l'header delle colonne */
    border-bottom: 1px solid var(--bs-border-color); /* Chiude elegantemente la sezione comandi in alto */
    background: var(--bs-body-bg);
}

.ad-veicoli__search {
    width: 100%;
    max-width: 340px;
    margin-bottom: 0;
}

.ad-tab-search input {
    width: 100%;
    padding: 10px 16px 10px 38px; /* Più respiro interno per il testo */
    border: 1px solid var(--bs-border-color);
    border-radius: 30px; /* Forma a pillola, pulita e moderna */
    font-size: 0.82rem;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg); /* Si integra fluidamente senza "bucare" la pagina di default */
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Icona della lente di ingrandimento */
.ad-tab-search i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.2s ease;
}

/* Effetto di reattività: l'icona si scurisce (neutro) quando l'utente scrive. */
.ad-tab-search input:focus + i {
    color: var(--bs-body-color);
}

/* Rimosso il vecchio override che forzava i padding in modo asimmetrico */
.ad-veicoli__search input {
    border-radius: 30px;
}
/* Messaggio "nessun risultato" quando il filtro non matcha nulla nel pannello attivo. */
.ad-veicoli__noresult {
    padding: 28px 12px;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

/* Header colonne condiviso (una volta in cima al pannello-marca).
   STICKY: resta visibile scorrendo la lista lunga, agganciato SOTTO la navbar
   del tema (nav.navbar.sticky-top). L'altezza navbar varia col logo → è misurata
   a runtime e passata in --ad-sticky-top (veicoliStickyTopSync in
   catalog-detail-interactions.js); 72px è solo fallback. Nessun antenato ha
   overflow:hidden (vedi override su .ad-veicoli.catalog-card), quindi si aggancia. */
.ad-vg-header {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    position: sticky;
    top: var(--ad-sticky-top, 72px);
    z-index: 5;
    background: var(--bs-body-bg);
}
.ad-vg-header th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
    border-bottom: 1.5px solid var(--bs-border-color);
    box-shadow: 0 1px 0 var(--bs-border-color);
}

/* Card per modello (superficie via utility nel markup: bg-body border rounded-3 shadow-sm) */
.ad-vg-card {
    overflow: hidden;
    margin-bottom: 12px;
}
.ad-vg-card:last-child { margin-bottom: 0; }
.ad-vg-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-primary);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--bs-body-color);
}
.ad-vg-card__badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    padding: 2px 8px;
    border-radius: 6px;
}

/* Tabella versioni dentro la card */
.ad-vg-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ad-vg-table td {
    padding: 11px 14px;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.ad-vg-table tr + tr td { border-top: 1px solid color-mix(in srgb, var(--bs-border-color) 45%, transparent); }
.ad-vg-table tr:hover td { background: var(--bs-tertiary-bg); }
/* Versione (col 1) = identificatore primario: tono pieno scuro. */
.ad-vg-table td.ad-veicoli__versione-cell { color: var(--bs-body-color); }

/* Larghezze colonna condivise header + card (table-layout: fixed → allineate) */
/* .ad-vg-header th:nth-child(1),  .ad-vg-table td:nth-child(1)  { width: 20%; } */
.ad-vg-header th:nth-child(2),  .ad-vg-table td:nth-child(2)  { width: 10%; }
.ad-vg-header th:nth-child(3),  .ad-vg-table td:nth-child(3)  { width: 10%; }
.ad-vg-header th:nth-child(4),  .ad-vg-table td:nth-child(4)  { width: 10%; }
.ad-vg-header th:nth-child(5),  .ad-vg-table td:nth-child(5)  { width: 5%; }
.ad-vg-header th:nth-child(6),  .ad-vg-table td:nth-child(6)  { width: 5%; }
.ad-vg-header th:nth-child(7),  .ad-vg-table td:nth-child(7)  { width: 20%; }
.ad-vg-header th:nth-child(8),  .ad-vg-table td:nth-child(8)  { width: 5%; }
.ad-vg-header th:nth-child(9),  .ad-vg-table td:nth-child(9)  { width: 5%; }
.ad-vg-header th:nth-child(10), .ad-vg-table td:nth-child(10) { width: 10%; }

/* Colonne numeriche/date centrate: DAL(3) AL(4) KW(5) CV(6) CILINDRATA(8) N.CIL(9) AZIONI(10) */
.ad-vg-header th:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(8), :nth-child(9), :nth-child(10)),
.ad-vg-table td:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(8), :nth-child(9), :nth-child(10)) {
    text-align: center;
}

.ad-veicoli__versione-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Nome versione = identificatore primario della riga: più marcato del resto. */
.ad-veicoli__versione-cell > span {
    font-weight: 600;
    color: var(--bs-body-color);
}
/* Colonna MOTORI: codici tecnici in griglia monospace allineata (stesso
   linguaggio dei codici OEM/criteri del design system). Due colonne che si
   espandono in orizzontale e vanno a capo con molti codici; nessun divisore,
   solo gutter → ordinato e non "cliccabile". */
.ad-veicoli__motori {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 3px 20px;
    align-items: baseline;
}
.ad-veicoli__motore-code {
    font-family: 'Courier New', monospace;
    font-size: 0.76rem;
    letter-spacing: -0.01em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.ad-veicoli.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s;
}
@media (max-width: 575px) {
    .ad-veicoli__header { flex-wrap: wrap; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1599px) {
    .ad-card__img { flex: 0 0 420px; width: 420px; height: 420px; }
}
@media (max-width: 1399px) {
    .ad-card__img { flex: 0 0 360px; width: 360px; height: 360px; }
}
@media (max-width: 1199px) {
    .ad-card__img { flex: 0 0 280px; width: 280px; height: 280px; }
    .ad-card__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
    .ad-detail__row { flex-direction: column; }
    .ad-detail__row .ad-card,
    .ad-detail__row .ad-tabs-wrap { flex: 1 1 auto; }
    .ad-detail__row .ad-tabs-wrap .ad-tab-panel { max-height: none; }
    .ad-card__img { flex: 0 0 320px; width: 320px; height: 320px; }
    .ad-card__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .ad-detail__row .ad-card { flex-direction: column; gap: 12px; padding: 16px; }
    .ad-card__img { width: 100%; height: auto; max-height: 280px; aspect-ratio: 1; flex: 0 0 auto; }
    .ad-card__code { font-size: 1.7rem; }
    .ad-card__cta { flex-direction: column; align-items: stretch; }
    .ad-card__actions { justify-content: stretch; }
}
@media (max-width: 575px) {
    .ad-card__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   Coda dettaglio: righe veicolo + vista lista/dettaglio + animazione
   ══════════════════════════════════════════════════════════ */

/* Riga dati non cliccabile: l'unica azione è il bottone "Vedi Articoli"
   (.ad-veicoli__vedi-btn).
   Niente zebra: le intestazioni di gruppo interposte falserebbero il conteggio
   nth-child e i tre sfondi (gruppo/zebra/hover) si confonderebbero. Separazione
   affidata alle intestazioni di gruppo + al bordo inferiore di riga; l'hover è
   un grigio neutro, distinto dalla tinta accento del gruppo. Selettore più
   specifico della regola generica `.ad-specs-table tbody tr:hover` (0,2,2),
   altrimenti quest'ultima vincerebbe e sovrascriverebbe l'hover. */
.ad-veicoli .ad-veicoli-row:hover { background: var(--bs-tertiary-bg); }
/* L'intestazione di gruppo non deve reagire all'hover come una riga dati:
   la sua td ha sfondo proprio, ma blindo comunque il tr contro l'hover generico. */
.ad-veicoli .ad-veicoli-group:hover td { background: color-mix(in srgb, var(--bs-primary) 9%, var(--bs-body-bg)); }

/* ── Vista lista vs dettaglio: due container distinti, ne mostro uno solo. ──
   In vista lista si vede .catalog-list-view (sidebar + .catalog-list);
   con .detail-view sul section si nasconde la lista e si mostra .catalog-detail
   a tutta larghezza. La sidebar appartiene alla lista, quindi non serve più
   nasconderla a parte. */
.catalog-detail { display: none; }
.catalog-section.detail-view .catalog-list-view { display: none; }
.catalog-section.detail-view .catalog-detail { display: block; padding: 8px 0 32px;}

/* Effetto carousel: il dettaglio entra scorrendo da destra verso sinistra.
   La classe .catalog-detail--enter viene (ri)applicata via JS ad ogni apertura. */
.catalog-detail.catalog-detail--enter {
    animation: catalogDetailSlideIn 0.28s ease-out;
}
@keyframes catalogDetailSlideIn {
    from { transform: translateX(3%); opacity: 0; }
    to   { transform: translateX(0);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .catalog-detail.catalog-detail--enter { animation: none; }
}

/* ===================================================================
 * Veicoli compatibili — colonna "Informazioni aggiuntive" + modale criteri
 * =================================================================== */

/* Icona "Informazioni aggiuntive": inline nella cella VERSIONE, accanto al codice. */
/* Bottone "i" info aggiuntive → `btn btn-outline-secondary btn-sm rounded-circle p-0`
   (hook `.ad-veicoli__info-btn`). Resta solo il box quadrato fisso 28×28 (icona centrata)
   e il micro-lift su hover; colore/bordo/fill li dà la variante Bootstrap. */
.ad-veicoli__info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.ad-veicoli__info-btn:hover {
    transform: translateY(-1px);
}

/* Colonna "Vedi Articoli": popola la ricerca per veicolo e lancia subito il submit. */
.ad-veicoli__vedi-col { width: 130px; text-align: center; }
.ad-veicoli__vedi-cell { text-align: center; cursor: default; }
/* CTA di riga: bottone PIENO accent (sfondo accent + testo on-accent, che
   garantisce il contrasto per qualsiasi skin) → dettaglio accent + leggibile.
   Hover: schiarisce/scurisce con filter (indipendente dal colore dell'accent). */
/* CTA di riga "Vedi Articoli" → `btn btn-primary btn-sm text-nowrap`
   (hook `.ad-veicoli__vedi-btn`). Resta solo il micro-effetto hover (brightness + ombra + lift). */
.ad-veicoli__vedi-btn:hover {
    filter: brightness(0.93);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--bs-primary) 38%, transparent);
    transform: translateY(-1px);
}

/* ── Modale "Informazioni aggiuntive" (criteri veicolo) ─────────────────────
   Redesign moderno dentro i token: contenitore morbido, header con accento,
   criteri come lista chiave-valore pulita (niente barra grigia piatta). */
.ad-criteri-modal .modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px color-mix(in srgb, #000000 22%, transparent);
}
.ad-criteri-modal .modal-header {
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bs-body-bg);
    border-bottom: none;
    position: relative;
}
/* Accento sottile in testa alla modale. */
.ad-criteri-modal .modal-header::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--bs-primary);
}
.ad-criteri-modal .ad-modal__titles { flex: 1; min-width: 0; }
.ad-criteri-modal .ad-modal__overline {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bs-secondary-color);
}
.ad-criteri-modal .ad-modal__title {
    margin: 4px 0 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1.3;
    word-break: break-word;
}
.ad-criteri-modal .modal-body {
    padding: 6px 18px 18px;
}
/* La tabella criteri iniettata diventa una definition-list pulita. */
.ad-criteri-modal .modal-body .ad-specs-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}
.ad-criteri-modal .modal-body thead tr { background: none; }
.ad-criteri-modal .modal-body thead th {
    text-align: left;
    padding: 10px 2px 8px;
    background: none;
    border-bottom: 1.5px solid var(--bs-border-color);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--bs-secondary-color);
}
.ad-criteri-modal .modal-body tbody td {
    padding: 11px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 45%, transparent);
    vertical-align: baseline;
}
.ad-criteri-modal .modal-body tbody tr:last-child td { border-bottom: none; }
/* Etichetta criterio (sx): font normale leggibile, tenue — NON monospace. */
.ad-criteri-modal .modal-body .ad-specs-criterio {
    font-family: inherit;
    font-weight: 500;
    font-size: 0.84rem;
    color: var(--bs-secondary-color);
    width: 48%;
    white-space: normal;
}
/* Valore (dx): protagonista, allineato a destra. */
.ad-criteri-modal .modal-body .ad-specs-valore {
    text-align: right;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--bs-body-color);
}

/* ── Tabella veicoli compatibili a larghezza stretta (mobile + colonne confronto) ──
   Le 10 colonne table-layout:fixed si sovrappongono sotto ~640px: qui il pannello
   diventa scroll-container orizzontale e le tabelle mantengono una min-width leggibile.
   L'header sticky verticale viene rilasciato in questo contesto (è un plus solo desktop:
   un antenato overflow-x:auto cattura comunque il position:sticky). */
@media (max-width: 767px) {
    /* Il pannello marca scrolla in orizzontale; header e card mantengono una
       larghezza minima leggibile (10 colonne). Entrambe le tabelle sono
       table-layout:fixed con le stesse %, quindi restano allineate. */
    .ad-veicoli .ad-tab-panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ad-veicoli .ad-vg-header,
    .ad-veicoli .ad-vg-table,
    .ad-veicoli .ad-vg-card {
        min-width: 1000px;
    }
    /* Lo sticky è sulla TABELLA .ad-vg-header (non sui th): in un contenitore
       overflow-x:auto lo sticky verticale galleggia SOPRA le righe ("thead che
       taglia le righe"). Su mobile lo disattivo del tutto. */
    .ad-veicoli .ad-vg-header {
        position: static;
        top: auto;
    }
    /* Header su UNA riga + colonne abbastanza larghe da non accavallarsi
       (CILINDRATA/N.CIL/ALIMENTAZIONE); AZIONI/MOTORI larghe per bottone e codici. */
    .ad-veicoli .ad-vg-header th { white-space: nowrap; }
    .ad-veicoli .ad-vg-header th:nth-child(2),  .ad-veicoli .ad-vg-table td:nth-child(2)  { width: 12%; }
    .ad-veicoli .ad-vg-header th:nth-child(7),  .ad-veicoli .ad-vg-table td:nth-child(7)  { width: 14%; }
    .ad-veicoli .ad-vg-header th:nth-child(8),  .ad-veicoli .ad-vg-table td:nth-child(8)  { width: 10%; }
    .ad-veicoli .ad-vg-header th:nth-child(9),  .ad-veicoli .ad-vg-table td:nth-child(9)  { width: 7%; }
    .ad-veicoli .ad-vg-header th:nth-child(10), .ad-veicoli .ad-vg-table td:nth-child(10) { width: 13%; }
    .ad-veicoli .ad-veicoli__vedi-btn { white-space: nowrap; }
    /* Toolbar di ricerca a piena larghezza. */
    .ad-veicoli__toolbar { justify-content: stretch; }
    .ad-veicoli__search { max-width: none; }
}