.drive-hero {
    --hero-photo-position: center;
    --hero-mobile-photo-position: 60% center;
    --hero-mobile-image-height: var(--photo-height);
}

.drive-hero .php-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drives-page :is(section[id], h2[id], .drive-anchor) { scroll-margin-top: 96px; }
.drive-anchor { display: block; }
.drive-section { padding-block: 24px; }
.drive-hero + .drive-section { padding-top: 48px; }
.drive-motor-image { width: 85%; max-height: 320px; justify-self: center; }
.drive-heading { margin-bottom: 32px; }
.drive-existing-copy h2, .drive-heading h2, .drive-smart-home h2, .drive-accu h2 { margin-bottom: 16px; }
.drive-model-grid, .drive-measurements { display: grid; gap: 16px; }
.drive-model { min-width: 0; padding: 22px; border: 1px solid #e5e7eb; border-radius: 6px; background: white; }
.drive-model h3 { margin-bottom: 12px; }
.drive-model-image { display: block; width: 120px; height: 90px; object-fit: contain; margin-bottom: 16px; }
.drive-model dl { margin: 0; }
.drive-model dl > div + div { margin-top: 12px; }
.drive-model dt { color: #5f6875; }
.drive-model dd { margin: 3px 0 0; }
.drive-model :is(dt, dd), .drive-included-controls span { font-size: 16px; line-height: 28px; }
.drive-included-controls span { display: block; }
.drive-model details dl { margin: 0 16px 16px; }
.drive-check { flex-shrink: 0; color: #a8022b; }
.drive-accu, .drive-smart-home { display: grid; gap: 20px; align-items: start; }
.drive-accu > img { width: 220px; height: auto; grid-row: 2; justify-self: center; }
.drive-smart-home > img { width: 80px; height: 152px; object-fit: contain; justify-self: center; }
.drive-gate-image { width: 100%; height: 190px; object-fit: cover; border-radius: 4px; }
.drive-measurements { align-items: center; }
.drive-dimension-image { width: 100%; min-height: 140px; background: #f3f4f6; border-radius: 6px; }
.drive-choice legend, .drives-page [data-form-field] > label { margin-bottom: 6px; color: #31363b; font-size: 14px; font-weight: 600; }
.drive-choice label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #d1d5db; background: white; cursor: pointer; }
.drive-choice label + label { border-top: 0; }
.drive-choice label:has(input:checked) { background: #fff3f6; }
.drive-choice input { accent-color: #a8022b; }
.drive-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.drive-upload input { max-width: 100%; font-size: 14px; }
.drive-upload input::file-selector-button { padding: 8px; margin-right: 8px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; }
.drives-page :is([data-form-field], #drive-quote-panel, #drive-showroom-panel) { min-width: 0; }
.drives-page form > button[type="submit"] { align-self: flex-start; max-width: 100%; white-space: normal; }
.drives-page #prijsopgave > div > p:last-child { margin-top: 28px; }

@media (max-width: 639px) {
    .drive-hero { padding-top: var(--photo-height); }
    .drive-motor-image { max-height: 245px; }
    body:has(.drives-page) .scroll-top:not([hidden]) { position: static; display: block; margin: 0 16px 16px auto; }
}

@media (min-width: 640px) {
    .drive-model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .drive-included-controls { min-height: 84px; }
    .drive-accu { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
    .drive-accu > img { grid-row: auto; }
    .drive-smart-home { grid-template-columns: minmax(0, 1fr) 80px; gap: 32px; align-items: center; }
    .drive-gate-image { height: 260px; }
    .drive-measurements { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 640px) and (max-width: 767px) {
    .drive-model h3 { min-height: 56px; }
}

@media (min-width: 1024px) {
    .drive-section { padding-block: 32px; }
    .drive-hero + .drive-section { padding-top: 64px; }
    .drive-model-grid { gap: 24px; }
    .drive-model { padding: 28px; }
    .drive-included-controls { min-height: 56px; }
}