/* Vehicle detail: scoped styles; shared palette comes from main.css. */
.detail-page { background: #fff; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; padding: 27px 0; font-size: 11px; color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent-ink); }
.detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 14px 0 30px; }
.detail-heading h1 { font-size: 37px; letter-spacing: -1.4px; line-height: 1.25; }
.detail-heading h1 span { font-weight: 400; color: #6b7671; }
.detail-heading p:not(.eyebrow) { font-size: 12px; margin-top: 14px; color: #65716a; }
.detail-heading p > span { margin-inline: 10px; color: #9ca7a0; }
.detail-tools { display: flex; align-items: center; gap: 18px; font-size: 10px; color: var(--muted); }
.detail-tools button { background: white; border: 1px solid var(--line); border-radius: 50%; width: 38px; height: 38px; }
.detail-tools .icon { width: 17px; }
.detail-top-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 28px; align-items: start; }
.gallery-main { position: relative; border-radius: 5px; overflow: hidden; }
.gallery-main > img { aspect-ratio: 1.65; height: auto; }
.gallery-badge { position: absolute; top: 18px; left: 18px; padding: 9px 12px; background: var(--accent); font-size: 10px; font-weight: 600; display: flex; gap: 7px; align-items: center; border-radius: 3px; }
.gallery-badge .icon { width: 16px; height: 16px; }
.photo-caption { position: absolute; bottom: 14px; right: 14px; background: #17231bd9; color: white; font-size: 9px; padding: 7px 10px; border-radius: 3px; }
.gallery-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 11px; }
.gallery-previews figure { margin: 0; position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 2.25; background: var(--dark); }
.gallery-previews img { height: 100%; }
.gallery-previews .crop-front img { transform: scale(1.8); transform-origin: 25% 70%; }
.gallery-previews .crop-side img { transform: scale(1.8); transform-origin: 75% 55%; }
.gallery-previews figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 10px 8px; background: linear-gradient(transparent, #142019bb); color: white; font-size: 9px; }
.gallery-media { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 14px; }
.gallery-media > span { font-size: 8px; color: var(--muted); }
.purchase-panel { padding: 27px; border: 1px solid var(--line); border-radius: 5px; }
.price-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 8px; letter-spacing: 1.2px; color: #68746d; }
.sample-tag { font-size: 8px; padding: 5px 8px; border-radius: 3px; background: var(--soft); color: #647168; letter-spacing: 0; white-space: nowrap; }
.detail-price { font-size: 40px; letter-spacing: -1.5px; font-weight: 500; margin-top: 19px; }
.detail-price > span { font-size: 17px; color: #6b7670; letter-spacing: 0; }
.price-note { font-size: 11px; color: var(--muted); margin-top: 7px; }
.purchase-benefits { display: flex; flex-wrap: wrap; gap: 11px; padding: 20px 0; margin-bottom: 4px; font-size: 9px; }
.purchase-benefits > span { display: flex; align-items: center; gap: 5px; }
.purchase-benefits .icon { width: 13px; height: 13px; color: var(--accent-ink); }
.purchase-actions { display: grid; gap: 9px; }
.purchase-actions .button { justify-content: flex-start; gap: 11px; font-size: 11px; padding-inline: 16px; min-height: 46px; }
.purchase-actions .button > .icon:last-child { margin-left: auto; width: 16px; }
.detail-button { background: #fff; color: var(--ink); border-color: var(--line); }
a.detail-button:hover { background: var(--soft); }
.advisor { display: flex; gap: 12px; align-items: center; padding-top: 21px; margin-top: 20px; border-top: 1px solid var(--line); }
.advisor-avatar { width: 40px; height: 40px; display: grid; place-items: center; background: var(--dark); color: var(--accent); border-radius: 50%; font-family: Georgia, serif; font-size: 13px; }
.advisor strong { font-size: 11px; font-weight: 600; }
.advisor p { font-size: 10px; color: var(--muted); margin-top: 5px; }
.detail-disclaimer { font-size: 10px; line-height: 1.8; color: #7b837f; margin-top: 19px; }
.purchase-panel .detail-disclaimer { font-size: 9px; }
.detail-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--line); margin-top: 43px; overflow-x: auto; scrollbar-width: thin; }
.detail-tabs a { padding: 21px 0; font-size: 12px; white-space: nowrap; }
.detail-tabs a:first-child { border-bottom: 3px solid var(--accent); }
.detail-tabs a:last-child { margin-left: auto; color: var(--accent-ink); }
.detail-tabs .icon { width: 17px; height: 17px; margin-left: 7px; }
.detail-content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 50px; padding-top: 43px; }
.detail-section { padding-bottom: 39px; margin-bottom: 39px; border-bottom: 1px solid var(--line); scroll-margin-top: 25px; }
.detail-section-title { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.detail-section-title .eyebrow { font-size: 8px; margin-bottom: 7px; }
.detail-section h2 { font-size: 26px; letter-spacing: -.7px; }
.section-number { align-self: flex-start; font-size: 10px; border: 1px solid var(--line); padding: 10px; border-radius: 50%; }
.detail-section-title > .sample-tag { margin-left: auto; }
.detail-intro { font-size: 12px; line-height: 1.9; color: #717a75; margin-bottom: 23px; max-width: 650px; }
.specification-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 0; }
.specification-grid > div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #edf1ee; font-size: 11px; }
.specification-grid dt { color: var(--muted); }
.specification-grid dd { margin: 0; font-weight: 600; text-align: right; }
.report-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--soft); border-radius: 4px; padding: 17px; }
.report-summary > div { display: flex; align-items: center; gap: 9px; font-size: 9px; color: #707c74; }
.report-summary .icon { width: 21px; color: var(--accent-ink); }
.report-summary strong { display: block; color: var(--ink); font-size: 12px; font-weight: 500; margin-top: 6px; }
.inspection-layout { display: grid; grid-template-columns: .9fr 1fr; gap: 27px; padding: 25px 0; align-items: center; }
.car-condition > svg { width: 100%; height: 310px; }
.condition-key { display: flex; justify-content: center; gap: 13px; font-size: 8px; }
.condition-key span { display: flex; align-items: center; gap: 4px; }
.condition-key i { width: 9px; height: 9px; flex-shrink: 0; border: 1px solid #00000015; border-radius: 2px; }
.condition-list h3 { font-size: 12px; font-weight: 600; margin-bottom: 15px; }
.condition-list dl { margin: 0; }
.condition-list dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.condition-list dt { color: #707c74; }
.condition-list dd { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); }
.condition-list dd::before { content: ''; width: 9px; height: 9px; flex-shrink: 0; background: var(--condition-color); border: 1px solid #00000015; border-radius: 2px; }
.condition-list p { font-size: 9px; color: var(--muted); line-height: 1.7; margin-top: 16px; }
.report-download { display: flex; align-items: center; gap: 11px; width: 100%; padding: 15px; border: 1px solid var(--line); background: white; border-radius: 3px; color: var(--ink); font-size: 11px; }
.report-download > span { margin-left: auto; font-size: 9px; color: var(--muted); }
.report-download .icon { width: 18px; height: 18px; }
.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.equipment-grid h3 { font-size: 12px; margin-bottom: 17px; }
.equipment-grid ul { list-style: none; padding: 0; margin: 0; }
.equipment-grid li { display: flex; align-items: center; gap: 7px; font-size: 10px; line-height: 1.6; margin-top: 12px; color: #66716a; }
.equipment-grid .icon { width: 13px; height: 13px; color: var(--accent-ink); }
.history-timeline { padding: 0; margin: 0; list-style: none; }
.history-timeline li { display: flex; gap: 23px; padding: 0 0 25px 23px; border-left: 1px solid var(--line); position: relative; margin-left: 6px; }
.history-timeline li:before { content: ''; position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; background: var(--accent); border: 1px solid #15734655; border-radius: 50%; }
.history-timeline li:last-child { padding-bottom: 0; }
.history-timeline li > span { font-size: 11px; color: var(--muted); }
.history-timeline h3 { font-size: 12px; font-weight: 500; }
.history-timeline p { font-size: 10px; color: var(--muted); margin-top: 8px; }
.guarantee-section { display: flex; gap: 22px; padding: 25px; background: var(--soft); border: 0; border-radius: 4px; }
.guarantee-section > .icon { width: 32px; height: 32px; color: var(--accent-ink); }
.guarantee-section p:not(.eyebrow) { font-size: 11px; color: #6c7970; line-height: 1.9; margin-top: 14px; }
.guarantee-label { display: inline-block; padding: 8px 11px; background: var(--secondary); font-size: 10px; margin-top: 16px; border-radius: 3px; }
.guarantee-section p.detail-disclaimer { font-size: 9px; }
.trade-panel { background: var(--accent); padding: 30px; border-radius: 5px; scroll-margin-top: 25px; }
.trade-icon { display: flex; justify-content: flex-end; margin-bottom: 15px; }
.trade-panel .eyebrow { color: #28543a; font-size: 9px; }
.trade-panel h2 { font-size: 28px; letter-spacing: -1px; line-height: 1.25; }
.trade-description { font-size: 11px; line-height: 1.8; margin-top: 15px; color: #28543a; }
.trade-field { position: relative; display: flex; flex-direction: column; gap: 9px; border: 1px solid #20433055; padding: 14px; border-radius: 3px; margin-top: 23px; }
.trade-field > span { font-size: 9px; color: #28543a; }
.trade-field strong { font-size: 11px; font-weight: 500; padding-right: 15px; }
.trade-field .icon { position: absolute; right: 12px; top: 24px; width: 16px; height: 16px; }
.trade-field input { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid #20433055; background: transparent; color: var(--ink); padding: 6px 0; font: inherit; font-size: 13px; }
.trade-field input::placeholder { color: #28543a; opacity: .7; }
.trade-field[href]:hover { background: #ffffff26; }
.trade-values { margin: 23px 0 0; }
.trade-values > div { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; margin-top: 15px; }
.trade-values dt { color: #28543a; }
.trade-values dd { margin: 0; white-space: nowrap; }
.trade-result { border-top: 1px solid #20433040; padding-top: 20px; margin-top: 23px; }
.trade-result > span { font-size: 10px; color: #28543a; }
.trade-result strong { display: block; font-size: 36px; letter-spacing: -1px; font-weight: 500; margin-top: 6px; }
.trade-result small { font-size: 14px; }
.trade-panel > .button { width: 100%; margin-top: 24px; background: var(--ink); color: var(--accent); justify-content: space-between; }
.trade-footnote { font-size: 9px; color: #28543a; line-height: 1.8; margin-top: 15px; }
.finance-panel { padding: 27px; border: 1px solid var(--line); border-radius: 4px; margin-top: 22px; scroll-margin-top: 25px; }
.finance-panel > .icon { margin-bottom: 20px; color: var(--accent-ink); }
.finance-panel h3 { font-size: 22px; font-weight: 500; letter-spacing: -.5px; }
.finance-panel > p:not(.eyebrow) { font-size: 12px; line-height: 1.8; color: #6c7970; margin-top: 14px; }
.finance-panel .text-link { font-size: 11px; margin-top: 22px; white-space: normal; }
.finance-panel small { display: block; color: var(--muted); font-size: 9px; line-height: 1.8; margin-top: 20px; }
.detail-help { display: flex; gap: 13px; padding: 24px 10px; }
.detail-help > .icon { color: var(--accent-ink); }
.detail-help strong { font-size: 12px; }
.detail-help p { font-size: 11px; line-height: 1.8; margin-top: 8px; color: #6c7970; }
.back-to-collection { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); padding: 40px 0 60px; }
.back-to-collection h2 { font-size: 27px; }
@media (max-width: 1100px) {
    .detail-top-grid, .detail-content-grid { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 25px; }
    .purchase-panel, .trade-panel { padding: 22px; }
    .detail-price { font-size: 35px; }
    .detail-tabs { gap: 22px; }
    .equipment-grid { grid-template-columns: 1fr 1fr; }
    .inspection-layout { grid-template-columns: 1fr; }
    .car-condition > svg { height: 270px; }
    .detail-heading h1 { font-size: 32px; }
}
@media (max-width: 800px) {
    .detail-top-grid, .detail-content-grid { grid-template-columns: 1fr; }
    .detail-tools > span { display: none; }
    .detail-content-grid { gap: 0; }
    .detail-sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; margin-bottom: 30px; }
    .finance-panel { margin-top: 0; }
    .detail-help { grid-column: 1 / -1; margin-top: 0; }
    .inspection-layout { grid-template-columns: 1fr 1fr; }
    .purchase-actions { grid-template-columns: 1fr 1fr; }
    .purchase-panel { padding: 25px; }
}
@media (max-width: 600px) {
    .breadcrumbs { font-size: 9px; gap: 8px; padding: 22px 0; }
    .detail-heading { align-items: flex-start; margin-top: 5px; margin-bottom: 23px; gap: 10px; }
    .detail-heading h1 { font-size: 30px; letter-spacing: -1px; }
    .detail-heading h1 span { display: block; font-size: 23px; margin-top: 4px; }
    .detail-heading .eyebrow { font-size: 8px; }
    .detail-heading p:not(.eyebrow) { font-size: 10px; }
    .detail-heading p > span { margin-inline: 5px; }
    .detail-tools { margin-top: 22px; }
    .gallery-main > img { aspect-ratio: 1.3; object-fit: cover; }
    .gallery-badge { top: 12px; left: 12px; font-size: 8px; padding: 7px 9px; }
    .gallery-previews { gap: 7px; }
    .gallery-previews figure { aspect-ratio: 1.6; }
    .gallery-previews figcaption { font-size: 8px; padding-inline: 7px; }
    .gallery-media > span { flex-basis: 100%; }
    .purchase-panel { padding: 22px; }
    .purchase-actions { grid-template-columns: 1fr; }
    .detail-price { font-size: 38px; }
    .detail-tabs { gap: 24px; margin-top: 25px; }
    .detail-tabs a { font-size: 11px; padding-block: 18px; }
    .detail-content-grid { padding-top: 30px; }
    .detail-section { margin-bottom: 30px; padding-bottom: 30px; }
    .detail-section h2 { font-size: 23px; }
    .detail-section-title { gap: 10px; }
    .detail-section-title > .sample-tag { display: none; }
    .specification-grid { column-gap: 20px; }
    .specification-grid > div { flex-direction: column; gap: 8px; }
    .specification-grid dd { text-align: left; }
    .report-summary { padding: 13px 10px; gap: 9px; }
    .report-summary > div { flex-direction: column; align-items: flex-start; font-size: 8px; gap: 7px; }
    .report-summary strong { font-size: 11px; }
    .inspection-layout { grid-template-columns: 1fr; gap: 30px; }
    .condition-list dl > div { font-size: 11px; }
    .report-download { padding-inline: 10px; font-size: 10px; gap: 7px; flex-wrap: wrap; }
    .report-download > span { font-size: 8px; }
    .equipment-grid { grid-template-columns: 1fr; gap: 24px; }
    .equipment-grid ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
    .equipment-grid h3 { margin-bottom: 5px; }
    .guarantee-section { padding: 22px; gap: 13px; }
    .guarantee-section > .icon { width: 24px; height: 24px; }
    .guarantee-section h2 { font-size: 24px; }
    .detail-sidebar { grid-template-columns: 1fr; }
    .detail-help { grid-column: auto; margin-top: 0; }
    .trade-panel { padding: 26px; }
    .trade-panel h2 { font-size: 27px; }
    .back-to-collection { align-items: flex-start; flex-direction: column; padding: 30px 0 45px; }
    .back-to-collection h2 { font-size: 26px; }
}
.gallery-previews button { width:100%;height:100%;padding:0;border:0;background:none;position:relative;cursor:pointer;color:inherit;overflow:hidden; }
.gallery-previews button[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--accent-ink); }
.gallery-previews button:focus-visible { outline:2px solid var(--accent-ink);outline-offset:-2px; }
.gallery-caption { position:absolute;bottom:0;left:0;right:0;padding:14px 10px 8px;background:linear-gradient(transparent,#142019bb);color:white;font-size:9px;text-align:left; }
.gallery-main.crop-front>img { transform:scale(1.8);transform-origin:25% 70%; }
.gallery-main.crop-side>img { transform:scale(1.8);transform-origin:75% 55%; }
.condition-key { flex-wrap:wrap; }
.detail-intro,.condition-list p,.guarantee-section p { overflow-wrap:anywhere; }