:root{--karo-blue:#007bb8;--karo-blue-dark:#005b8b;--karo-ink:#101820;--karo-muted:#667480;--karo-line:#dfe5e9;--karo-surface:#f3f6f8}
body{background:var(--karo-surface);color:var(--karo-ink);font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}.page-shell{width:min(1320px,calc(100% - 36px));max-width:none;margin:0 auto;padding:34px 0 64px}.vehicle-list{display:grid;gap:24px}.vehicle-card-link{display:block}.vehicle-card{padding:0;border:1px solid var(--karo-line);border-radius:22px;background:#fff;box-shadow:0 14px 42px rgba(16,24,32,.08);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.vehicle-card:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(16,24,32,.12)}.vehicle-card-header{padding:22px 24px 18px;border-bottom:1px solid var(--karo-line);background:linear-gradient(115deg,#fff 0,#f5fbfd 100%)}.vehicle-title{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.15;color:var(--karo-ink)}.vehicle-status-chip{border-radius:999px;padding:.4rem .68rem;box-shadow:none}.vehicle-header-meta{min-width:0}.vehicle-card-body{display:grid;grid-template-columns:minmax(280px,1.15fr) minmax(250px,.95fr);gap:24px;padding:24px}.vehicle-card-body.has-aggregate{grid-template-columns:minmax(280px,1.15fr) minmax(250px,.95fr) minmax(230px,.9fr)}.vehicle-col-image{max-width:none;min-width:0}.vehicle-gallery-strip{max-width:none}.vehicle-gallery-main,.vehicle-image-cover{width:100%}.vehicle-image-cover{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#edf1f3}.vehicle-image-cover img,.vehicle-image-cover .vehicle-main-image{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}.vehicle-section-title{color:var(--karo-blue);font-size:.78rem;letter-spacing:.12em;margin-bottom:12px}.vehicle-overview-facts{margin:0;display:grid;gap:0;border:1px solid var(--karo-line);border-radius:13px;overflow:hidden}.vehicle-overview-facts>div{display:grid;grid-template-columns:minmax(105px,.8fr) minmax(0,1.2fr);gap:10px;padding:9px 11px;border-bottom:1px solid var(--karo-line);background:#fff}.vehicle-overview-facts>div:last-child{border-bottom:0}.vehicle-overview-facts dt{font-size:.76rem;color:var(--karo-muted)}.vehicle-overview-facts dd{margin:0;font-size:.88rem;font-weight:760;overflow-wrap:anywhere}.vehicle-short{margin-top:13px;color:#293641;line-height:1.55}.vehicle-short table,.vehicle-detail table{display:block;max-width:100%;overflow-x:auto}.vehicle-detail{border-color:var(--karo-line);background:#f7f9fa}.toggle-btn{margin-top:8px;color:var(--karo-blue-dark);font-weight:750}.vehicle-inquiry{margin:0;padding:19px 24px 22px;border-top:1px solid var(--karo-line);background:#fafcfd}.vehicle-inquiry-head{align-items:center}.vehicle-card-actions{display:flex;justify-content:flex-end;align-items:center;gap:9px;flex-wrap:wrap}.vehicle-detail-link,.vehicle-inquiry-open{display:inline-flex;align-items:center;justify-content:center;min-height:43px;border-radius:9px;padding:.58rem .9rem;font-size:.88rem;font-weight:800;text-decoration:none;white-space:nowrap;box-sizing:border-box}.vehicle-detail-link{border:1px solid #cbd5da;background:#fff;color:var(--karo-ink)}.vehicle-detail-link:hover{border-color:var(--karo-blue);color:var(--karo-blue-dark);text-decoration:none}.vehicle-pdf-link--generated{max-width:none;width:auto;background:#eef8fb;border-color:#8bd0df;color:#123f5c}.vehicle-pdf-link--generated:hover{background:#dff3f8;border-color:#4eb6cc}.vehicle-inquiry-open{border-color:var(--karo-blue);background:var(--karo-blue);box-shadow:none}.vehicle-inquiry-open:hover{background:var(--karo-blue-dark);border-color:var(--karo-blue-dark);box-shadow:none}.vehicle-inquiry-form{border-radius:14px}.vehicle-image-placeholder{min-height:220px;border-radius:14px;background:#edf1f3}.vehicle-lightbox-backdrop{pointer-events:auto}.vehicle-lightbox-content{width:min(1200px,94vw);height:min(82vh,820px)}
@media(max-width:1020px){.vehicle-card-body{grid-template-columns:minmax(280px,1fr) minmax(0,1fr);grid-template-areas:"image vehicle"}.vehicle-card-body.has-aggregate{grid-template-areas:"image vehicle" "image aggregat"}.vehicle-col-image{grid-area:image}.vehicle-col-vehicle{grid-area:vehicle}.vehicle-col-aggregate{grid-area:aggregat}}
@media(max-width:720px){.page-shell{width:min(100% - 20px,1320px);padding:18px 0 38px}.vehicle-list{gap:15px}.vehicle-card{border-radius:15px}.vehicle-card-header{padding:17px 16px}.vehicle-header-main{align-items:flex-start;gap:8px}.vehicle-card-body{grid-template-columns:1fr;grid-template-areas:"image" "vehicle" "aggregat";gap:18px;padding:14px}.vehicle-gallery-strip{width:100%}.vehicle-inquiry{padding:16px 14px}.vehicle-inquiry-head{display:grid}.vehicle-card-actions{display:grid;grid-template-columns:1fr;width:100%}.vehicle-detail-link,.vehicle-inquiry-open,.vehicle-pdf-link--generated{width:100%;max-width:none;white-space:normal}.vehicle-overview-facts>div{grid-template-columns:1fr;gap:1px}.vehicle-choice-group{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.vehicle-card{transition:none}.vehicle-card:hover{transform:none}}

/* Square hairline design 2026-07-22 */
:root { --karo-hairline: #173f5b; }
.vehicle-card {
    border-color: var(--karo-hairline);
    border-radius: 0;
    box-shadow: none;
}
.vehicle-card:hover {
    border-color: var(--karo-blue);
    box-shadow: none;
    transform: translateY(-1px);
}
.vehicle-card-header {
    border-bottom-color: var(--karo-hairline);
    background: #f8fafb;
}
.vehicle-overview-facts,
.vehicle-inquiry-form,
.vehicle-detail {
    border-color: var(--karo-hairline);
    border-radius: 0;
    box-shadow: none;
}
.vehicle-inquiry { border-top-color: var(--karo-hairline); }
.vehicle-status-chip,
.vehicle-detail-link,
.vehicle-inquiry-open { border-radius: 0; }
@media (max-width: 720px) {
    .vehicle-card { border-radius: 0; }
}
/* Mobile hardening 2026-07-24 */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
.page-shell,
.vehicle-list,
.vehicle-card-link,
.vehicle-card,
.vehicle-card-header,
.vehicle-header-main,
.vehicle-header-meta,
.vehicle-card-body,
.vehicle-col-image,
.vehicle-col-vehicle,
.vehicle-col-aggregate,
.vehicle-gallery,
.vehicle-gallery-main,
.vehicle-gallery-strip,
.vehicle-gallery-thumbs,
.vehicle-short,
.vehicle-detail,
.vehicle-inquiry,
.vehicle-inquiry-head,
.vehicle-card-actions {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.vehicle-title,
.vehicle-delivery,
.vehicle-short,
.vehicle-detail,
.vehicle-inquiry-reference {
    overflow-wrap: anywhere;
}
.vehicle-gallery-strip {
    width: 100%;
    max-width: 100%;
}
.vehicle-gallery-thumbs {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.vehicle-thumb { scroll-snap-align: start; }
.vehicle-short img,
.vehicle-detail img,
.vehicle-short video,
.vehicle-detail video,
.vehicle-short iframe,
.vehicle-detail iframe {
    max-width: 100% !important;
    height: auto;
}

@media (max-width: 768px) {
    .page-shell {
        width: min(100% - 20px, 1320px);
        padding: 16px 0 34px;
    }
    .vehicle-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 14px;
    }
    .vehicle-header-meta {
        width: 100%;
        text-align: left;
    }
    .vehicle-card-body,
    .vehicle-card-body.has-aggregate {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "image" "vehicle" "aggregat";
        gap: 16px;
        padding: 14px;
    }
    .vehicle-image-cover img,
    .vehicle-image-cover .vehicle-main-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .gallery-nav {
        flex-basis: 40px;
        min-width: 40px;
        height: 52px;
        border-radius: 0;
    }
    .vehicle-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .vehicle-short table,
    .vehicle-short tbody,
    .vehicle-short tr,
    .vehicle-short td,
    .vehicle-short th,
    .vehicle-detail table,
    .vehicle-detail tbody,
    .vehicle-detail tr,
    .vehicle-detail td,
    .vehicle-detail th {
        display: block;
        width: 100% !important;
    }
    .vehicle-short tr,
    .vehicle-detail tr {
        padding: 9px 0;
        border-bottom: 1px solid var(--karo-line);
    }
    .vehicle-short td,
    .vehicle-short th,
    .vehicle-detail td,
    .vehicle-detail th {
        padding: 2px 0;
        border: 0;
    }
    .vehicle-card-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .vehicle-detail-link,
    .vehicle-inquiry-open,
    .vehicle-pdf-link--generated {
        width: 100%;
        min-height: 48px;
        max-width: none;
        white-space: normal;
    }
}