.va-compat-wrap{margin:6px 0;}
.va-compat-badge{display:inline-block;font-size:12px;font-weight:600;padding:6px 8px;border-radius:4px;}
.va-compat-badge.va-compat-ok{background:#e8f5e9;color:#2e7d32;}
.va-compat-badge.va-compat-no{background:#fdecea;color:#c62828;}
.va-compat-sub-row{display:flex;align-items:baseline;gap:6px;margin-top:2px;}
.va-compat-sub{flex:1;min-width:0;font-size:11px;color:#555;}
.va-compat-sub--clamp{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.va-compat-sub--expanded{display:block;-webkit-line-clamp:unset;overflow:visible;}
.va-compat-sub-toggle{flex:0 0 auto;background:none;border:none;padding:0;margin:0;font-size:11px;font-weight:600;color:#034c8c;text-decoration:underline;cursor:pointer;white-space:nowrap;}
.va-compat-change{display:block;font-size:12px;color:#034c8c;text-decoration:underline;margin-top:2px;}
.va-compat-btn{display:inline-block;background:#ffffff;color:#09599A !important;font-size:12px;font-weight:700;letter-spacing:0.5px;padding:8px 14px;border:1px solid #09599A;border-radius:4px;margin:6px 0;cursor:pointer;text-decoration:none !important;transition:background 0.15s ease,color 0.15s ease;}
.va-compat-btn:hover{background:#09599A;color:#ffffff !important;}
/* Hueco invisible para productos sin vehículo asignado (universales) — ver
   compat.js, mostrarEstado(). Mismo tamaño que el botón real, sin verse ni
   poder clickearse, solo para que la tarjeta mida igual que las demás. */
.va-compat-btn--hueco{visibility:hidden;pointer-events:none;cursor:default;}
.va-compat-btn--hueco:hover{background:#ffffff;color:#09599A !important;}

/* "Avisarme cuando llegue" (botón del plugin de aviso de disponibilidad,
   no de este plugin) se veía en negrita comparado con "Añadir al carrito"
   — mismo tamaño de letra, peso normal, para que combinen. */
body ul.products li.product a.button.adwp-card-button,
body .loop-products .product a.button.adwp-card-button,
body a.adwp-card-button{
    font-weight:400 !important;
}

@media (max-width:480px){
    .va-compat-btn{width:100%;text-align:center;padding:10px 14px;}
}

/* Vista "Lista" del catálogo en celular (ver frontend.css), y los mismos
   carruseles (relacionados/vistos recientemente, ver frontend.js
   styleCarouselCards): la tarjeta es más angosta ahí, así que "VERIFICAR
   COMPATIBILIDAD" no entraba en 1 sola línea con el tamaño de letra normal. */
@media (max-width:767px){
    .list ul.products .va-compat-btn,
    .related .va-compat-btn,
    .up-sells .va-compat-btn,
    .cross-sells .va-compat-btn,
    .history-products .va-compat-btn{font-size:11px;letter-spacing:0.2px;padding:10px 8px;white-space:nowrap;}
}