.car-detail-container .car-price-row { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.car-detail-container .car-price-row :is(#total-price, #mobile-total-price) { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.car-detail-container .car-price-amount { flex-shrink: 0; white-space: nowrap; }
.car-detail-container .car-price-row button.price-destination { display: block; flex: 1; min-width: 0; margin: 0; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-refresh-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 8px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--surface-color); color: var(--text-secondary); cursor: pointer; }
.car-refresh-button[hidden], .car-refresh-status[hidden] { display: none; }
.car-refresh-button:hover { color: var(--primary-color); }
.car-refresh-button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.car-refresh-button[aria-busy="true"] svg { animation: car-refresh-spin 1s linear infinite; }
.car-refresh-status { margin: 12px 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.car-refresh-status.is-error { color: var(--danger-color); }
.car-refresh-pending .car-price-row > span { opacity: .6; }
@keyframes car-refresh-spin { to { transform: rotate(360deg); } }
@media (min-width: 769px) { .car-price { min-width: 320px; } }
@media (prefers-reduced-motion: reduce) { .car-refresh-button[aria-busy="true"] svg { animation: none; } }

/* Retained legacy panels stay hidden despite the mobile display override. */
.car-detail-container .car-options[hidden],
.car-detail-container .car-history[hidden] {
    display: none !important;
}