.ka-vehicle-options { width: min(var(--ka-content-max), calc(100% - 2 * (var(--ka-outer-gutter) + var(--ka-inner-gutter)))); max-width: none; margin: 0 auto 64px; color: var(--ka-primary); }
.ka-vehicle-options, .ka-vehicle-options * { box-sizing: border-box; }
.ka-vehicle-options h2 { margin: 0 0 24px; font-size: clamp(25px, 2.2vw, 32px); font-weight: 600; line-height: 1.3; }
.ka-options-highlights, .ka-options-preview { margin-bottom: 56px; }
.ka-options-highlights__viewport { position: relative; }
.ka-options-highlights__track { display: flex; align-items: stretch; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 16px; margin: 0; padding: 16px; border: 1px solid #dce2eb; border-radius: 20px; background: #f5f6f8; list-style: none; scrollbar-width: thin; scrollbar-color: var(--ka-secondary) transparent; }
.ka-options-highlights__track li { display: flex; align-items: center; gap: 12px; flex: 0 0 clamp(220px, 26%, 300px); min-height: 126px; min-width: 0; padding: 24px 40px; border: 1px solid #dce2eb; border-radius: 14px; background: #fff; scroll-snap-align: start; font-size: 15px; font-weight: 600; line-height: 23px; }
.ka-options-highlights__track li svg { flex: none; width: 23px; height: 23px; color: var(--ka-secondary); }
.ka-options-highlights__track li span { min-width: 0; overflow-wrap: anywhere; }
.ka-options-highlights__controls { position: absolute; inset: 50% 8px auto; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.ka-options-highlights__controls[hidden] { display: none; }
.ka-options-highlights__controls button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 9px; border: 1px solid #e0e6f0; border-radius: 50%; background: #fff; color: var(--ka-primary); box-shadow: 0 3px 12px rgb(17 31 70 / 12%); cursor: pointer; pointer-events: auto; }
.ka-options-highlights__controls button:disabled { opacity: .45; cursor: default; }
.ka-options-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; max-width: 100%; padding: 11px 18px; border: 1px solid var(--ka-primary); border-radius: 5px; background: #fff; color: var(--ka-primary); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 24px; text-align: left; text-decoration: none; cursor: pointer; }
.ka-options-highlights > .ka-options-action { margin-top: 22px; }
.ka-options-action[hidden], .ka-options-text-link[hidden] { display: none; }
.ka-options-action svg, .ka-options-text-link svg { flex: none; width: 18px; height: 18px; }
.ka-options-action:hover { border-color: var(--ka-secondary); background: #f2f6fb; }
.ka-options-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 32px; margin: 0; padding: 0; list-style: none; }
.ka-options-list li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: #596174; font-size: 15px; line-height: 24px; }
.ka-options-list li svg { flex: none; width: 13px; height: 13px; margin-top: 5px; color: var(--ka-secondary); }
.ka-options-list li span { min-width: 0; overflow-wrap: anywhere; }
.ka-options-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; padding: 0; border: 0; background: transparent; color: var(--ka-primary); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 24px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ka-options-fallback { margin-top: 22px; }
.ka-options-fallback summary { display: list-item; width: fit-content; min-height: 44px; padding-block: 10px; color: var(--ka-primary); font-size: 15px; font-weight: 600; cursor: pointer; }
.ka-options-fallback[open] .ka-options-list { margin-top: 16px; }
.ka-vehicle-options.has-options-drawer .ka-options-fallback { display: none; }
.ka-options-unavailable { margin: 0; color: #596174; font-size: 16px; line-height: 26px; }
.ka-options-drawer { position: fixed; inset: 0 0 0 auto; width: min(520px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: auto; border: 0; border-radius: 24px 0 0 24px; background: #fff; color: var(--ka-primary); }
.ka-options-drawer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ka-options-drawer:modal { overscroll-behavior: contain; }
.ka-options-drawer::backdrop { overflow: hidden; overscroll-behavior: contain; background: rgb(8 15 32 / 70%); }
.ka-options-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 24px 22px; border-bottom: 1px solid #e0e6f0; }
.ka-options-drawer__header h2 { margin: 0 0 8px; font-size: 24px; line-height: 32px; }
.ka-options-drawer__header p { margin: 0; color: #596174; font-size: 15px; line-height: 24px; }
.ka-options-drawer__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 10px; border: 1px solid #dce2eb; border-radius: 50%; background: #f2f6fb; color: var(--ka-primary); cursor: pointer; }
.ka-options-drawer__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
.ka-options-drawer__body:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: -4px; }
.ka-options-drawer__count { margin: 0 0 24px; color: #626b7e; font-size: 14px; line-height: 22px; }
.ka-options-list--drawer { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ka-options-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ka-options-banner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; gap: 16px; min-width: 0; padding: 32px; border-radius: 20px; }
.ka-options-banner > div { display: flex; flex-direction: column; min-width: 0; }
.ka-options-banner .ka-options-action { align-self: flex-start; margin-top: auto; }
.ka-options-banner h2 { margin-bottom: 18px; font-size: clamp(25px, 2vw, 30px); }
.ka-options-banner p { margin: 0 0 24px; font-size: 15px; line-height: 25px; }
.ka-options-banner .ka-options-banner__eyebrow { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.ka-options-banner .ka-options-banner__notice { margin: 12px 0 0; font-size: 12px; line-height: 20px; }
.ka-options-banner--navy { background: var(--ka-primary); color: #fff; }
.ka-options-banner--navy .ka-options-action { border-color: var(--ka-secondary); background: var(--ka-secondary); color: var(--ka-primary); }
.ka-options-banner--navy .ka-options-action:hover { background: #fff; border-color: #fff; }
.ka-options-banner--light { background: #f2f6fb; }
.ka-options-banner--light p { color: #596174; }
.ka-options-banner--light .ka-options-action { background: var(--ka-primary); color: #fff; }
.ka-options-banner--light .ka-options-action:hover { background: #25375f; }
.ka-options-banner img { display: block; align-self: end; width: 100%; min-width: 0; height: auto; aspect-ratio: 3 / 2; object-fit: contain; object-position: right bottom; }
.ka-options-banner img.is-cutout { margin-bottom: -8px; }
/* JM style (Albin 31-10-2026): the cut-out car stands bottom right and sticks out below the card. */
.ka-options-services:has(img.is-cutout) { margin-bottom: 44px; }
.ka-options-banner:has(img.is-cutout) { position: relative; grid-template-columns: minmax(0, 1fr); padding-right: min(40%, 250px); }
.ka-options-banner img.is-cutout { position: absolute; right: 24px; bottom: -44px; width: min(40%, 250px); max-height: calc(100% + 20px); margin: 0; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 10px 12px rgba(17, 31, 70, .22)); }
.ka-options-banner img.is-person { right: 32px; bottom: 0; width: auto; height: calc(100% - 12px); max-width: 40%; max-height: none; filter: none; }
.ka-vehicle-options a:focus-visible, .ka-vehicle-options button:focus-visible, .ka-options-highlights__track:focus-visible, .ka-options-fallback summary:focus-visible { outline: 2px solid var(--ka-primary); outline-offset: 3px; }
.ka-options-banner--navy .ka-options-action:focus-visible { outline-color: #fff; }
@media (min-width: 1101px) { .ka-options-banner--navy > div { padding-bottom: 32px; } }
@media (max-width: 1100px) { .ka-options-services { grid-template-columns: minmax(0, 1fr); } .ka-options-banner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
@media (max-width: 900px) { .ka-options-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .ka-options-list--drawer { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .ka-vehicle-options { margin-bottom: 48px; }
    .ka-options-highlights, .ka-options-preview { margin-bottom: 40px; }
    .ka-options-highlights__track { padding: 12px; scroll-padding-inline: 12px; border-radius: 16px; }
    .ka-options-highlights__track li { flex-basis: min(250px, calc(100% - 24px)); min-height: 116px; padding: 22px 42px; }
    .ka-options-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ka-options-services { gap: 24px; }
    .ka-options-banner { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 16px; border-radius: 16px; }
    .ka-options-banner img { justify-self: end; width: 75%; max-height: 180px; }
    .ka-options-services:has(img.is-cutout) { gap: 64px; margin-bottom: 52px; }
    .ka-options-banner:has(img.is-cutout) { padding: 24px 24px 150px; }
    .ka-options-banner img.is-cutout { right: 50%; bottom: -40px; width: min(76%, 280px); max-height: 190px; transform: translateX(50%); }
    .ka-options-banner:has(img.is-person) { padding-bottom: 250px; }
    .ka-options-banner img.is-person { bottom: 0; width: auto; height: 240px; max-width: 80%; max-height: none; }
    .ka-options-banner .ka-options-action { width: 100%; }
    .ka-options-drawer { border-radius: 0; }
    .ka-options-drawer__header { padding: 22px 20px 18px; }
    .ka-options-drawer__header h2 { font-size: 22px; line-height: 30px; }
    .ka-options-drawer__body { padding: 22px 20px; }
}
/* Highlights: never break a word mid-letter ("Achteruitrijcamer a"); hyphenate Dutch compounds properly. */
.ka-options-highlights__track li span { overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 640px) {
    .ka-options-highlights__track li { flex-basis: calc(100% - 24px); flex-direction: column; justify-content: center; gap: 8px; padding: 20px 60px; text-align: center; }
}