/* Keep long galleries inside their grid track instead of widening the page. */
.vehicle-page .detail-layout > *,
.vehicle-page .detail-sidebar > *,
.vehicle-page .vehicle-title > *,
.vehicle-page .gallery,
.vehicle-page .gallery-thumbs,
.vehicle-page .detail-section,
.vehicle-page .source-details {
    min-width: 0;
    max-width: 100%;
}

.vehicle-page .gallery-thumbs {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.vehicle-page .spec-grid > div,
.vehicle-page .spec-grid > div > span {
    min-width: 0;
}

.vehicle-page .spec-grid strong,
.vehicle-page .vehicle-title h1,
.vehicle-page .breadcrumb,
.vehicle-page .detail-section p,
.vehicle-page .inquiry-panel h2 {
    overflow-wrap: anywhere;
}

.vehicle-page .spec-grid .icon {
    flex-shrink: 0;
}

.vehicle-page .detail-tabs {
    max-width: 100%;
    overflow-x: auto;
}

.vehicle-page .detail-tabs a {
    flex-shrink: 0;
}

@media (max-width: 800px) {
    .vehicle-page .detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .vehicle-page .detail-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vehicle-page .spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vehicle-page .gallery-prev,
    .vehicle-page .gallery-next {
        width: 44px;
        height: 44px;
    }

    .vehicle-page .inquiry-panel :is(input, select, textarea) {
        font-size: 16px;
    }
}

@media (max-width: 520px) {
    .vehicle-page .detail-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .photo-dialog {
        height: 100dvh;
        max-height: 100dvh;
        padding: 70px 8px;
    }

    .photo-dialog[open] {
        gap: 8px;
    }

    .photo-dialog img {
        min-width: 0;
        max-width: calc(100% - 104px);
        max-height: calc(100dvh - 140px);
    }

    .photo-dialog .icon-button {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }
}