/* Mobile content layer. The navigation owns --motors-mobile-nav-space,
   including the bottom safe area; reserve it once, on the page body. */
@media (max-width: 760px) {
  body:has(>.motors-site-header) {
    --site-gutter: 14px;
    --site-radius: 16px;
    --site-control-radius: 12px;
    padding-block-end: var(--motors-mobile-nav-space, 0px);
    font-size: 15px;
    line-height: 1.75;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body:has(>.motors-site-header) :where(main, section, article, form, fieldset, label, dialog, .layout, .content-grid, .dashboard-grid) {
    min-inline-size: 0;
  }
  body:has(>.motors-site-header) :where(main, dialog) :is(h1, h2, h3, p, dd, label, [role=status]) {
    overflow-wrap: anywhere;
  }
  body:has(>.motors-site-header)>main:not(:has(>.hero)):not(:has(>.route-page-head)),
  body:has(>.motors-site-header) main.offers-root {
    padding: 18px var(--site-gutter) 28px;
  }
  body:has(>.motors-site-header) main>.section-shell:not(.route-page-head) {
    padding-inline: var(--site-gutter);
  }
  body:has(>.motors-site-header) :is(.catalog, .popular-brands, .test-drives, .latest-listings, .packages, .ask-expert, .service-request-hub) {
    padding-block: 24px;
    padding-inline: var(--site-gutter);
  }

  /* Introductions lead into the content without occupying a whole screen. */
  body:has(>.motors-site-header) .route-page-head {
    padding: 16px var(--site-gutter) 18px;
  }
  body:has(>.motors-site-header) .route-page-head>div,
  body:has(>.motors-site-header) :is(.offers-hero, .directory-hero) {
    min-height: 160px;
    padding: 22px 20px;
    gap: 16px;
  }
  body:has(>.motors-site-header) :is(.route-page-head, .offers-hero, .directory-hero, .partner-hero, .garage-hero, .seller-hero, .deal-hero) :is(h1, .page-heading) {
    margin-block: 6px 10px;
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: 0;
  }
  body:has(>.motors-site-header) :is(.route-page-head, .offers-hero, .directory-hero, .partner-hero, .garage-hero, .seller-hero, .deal-hero) p {
    margin-block: 0;
    font-size: 14px;
    line-height: 1.8;
  }
  body:has(>.motors-site-header) .route-page-head button {
    margin-block-start: 16px;
  }
  body:has(>.motors-site-header) .hero-inner {
    padding: 32px 20px;
  }
  body:has(>.motors-site-header) .hero :is(h1, .page-heading) {
    margin-block: 12px;
    font-size: 36px;
    line-height: 1.35;
    letter-spacing: 0;
  }
  body:has(>.motors-site-header) .hero p {
    font-size: 15px;
  }
  body:has(>.motors-site-header) :is(.offers-results-heading h2, .directory-section h2, .section-head h2, .offers-guide h2, .vs-panel h2, .test-drives-heading h2) {
    font-size: 23px;
    line-height: 1.5;
  }
  body:has(>.motors-site-header) :is(.section-head, .offers-results-heading, .portal-section-heading) {
    gap: 12px;
    flex-wrap: wrap;
  }

  /* Brand choices remain available in their horizontal strip. */
  body:has(>.motors-site-header) .popular-brands .brand-buttons {
    gap: 10px;
    margin-block-start: 14px;
    padding-block: 3px 10px;
    scroll-padding-inline: 4px;
  }
  body:has(>.motors-site-header) .popular-brands .brand-choice {
    flex: 0 0 92px;
    min-width: 92px;
    min-height: 78px;
    padding: 10px 8px;
    border-radius: 14px;
  }
  body:has(>.motors-site-header) .popular-brands .brand-logo {
    height: 50px;
  }
  body:has(>.motors-site-header) .popular-brands .brand-choice img {
    max-width: 72px;
    max-height: 44px;
  }
  body:has(>.motors-site-header) .popular-brands .brand-choice [data-logo=porsche] img {
    max-width: 32px;
    max-height: 46px;
  }
  body:has(>.motors-site-header) .popular-brands .brand-choice b {
    margin-block-start: 6px;
    font-size: 12px;
  }

  /* Sixteen-pixel editable text avoids focus zoom on iOS. Keep custom hidden
     selects, checkbox cards, file pickers, and range inputs in their own layouts. */
  body:has(>.motors-site-header) :is(input, select, textarea) {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    font-size: 16px !important;
  }
  body:has(>.motors-site-header) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]):not([type=file]):not(.motors-choice-native), select:not(.motors-choice-native), textarea) {
    inline-size: 100%;
    min-block-size: 48px;
    border-radius: var(--site-control-radius);
  }
  body:has(>.motors-site-header) textarea {
    min-block-size: 112px;
    line-height: 1.7;
    resize: vertical;
  }
  body:has(>.motors-site-header) input[type=file] {
    inline-size: 100%;
    min-block-size: 44px;
  }
  body:has(>.motors-site-header) :is(button, a[role=button], .company-actions a, .offers-button, .portal-head-actions a, .account-shortcuts a, .request-actions a, .dialog-actions a, .request-images-picker, .vs-link-button) {
    box-sizing: border-box;
    min-block-size: 44px;
    touch-action: manipulation;
  }
  body:has(>.motors-site-header) :is(button, .company-actions a, .offers-button, .vs-link-button) {
    white-space: normal;
  }
  body:has(>.motors-site-header) :is(.motors-choice-close, .dialog-close, .details-close, .test-drive-dialog-close, .heart, #compare-dismiss, #compare-close) {
    min-inline-size: 44px;
    min-block-size: 44px;
  }
  body:has(>.motors-site-header) :is(.consent, .vs-feature, .vs-choice-card, .account-types label) {
    min-block-size: 44px;
  }
  body:has(>.motors-site-header) :is(.consent, .vs-feature) {
    align-items: center;
  }
  body:has(>.motors-site-header) :is(.sell-form, .request-form, .vs-form, .listing-edit-form, .expert-question-form, .general-request-fields, .package-request-box form, .garage-request-box form) {
    gap: 16px;
  }
  body:has(>.motors-site-header) :is(.sell-form label, .request-form label, .vs-form label, .listing-edit-form label, .expert-question-form label) {
    min-inline-size: 0;
    font-size: 14px;
    line-height: 1.65;
  }

  /* Cards retain their existing content and status colors. */
  body:has(>.motors-site-header) :is(.content-grid, .dashboard-grid, .ask-expert-inner, .deal-hero, .partner-hero, .directory-grid, .offers-grid) {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  body:has(>.motors-site-header) :is(.directory-section, .offers-guide, .request-card:not([data-open-request]):not([data-partner-request]), .ratings-card, .vs-panel) {
    min-inline-size: 0;
  }
  body:has(>.motors-site-header) :is(.directory-section, .offers-guide, .ratings-card, .vs-panel, .expert-question-form, .auth-card, .auth-shell.registration-mode .auth-card, .auth-shell.registration-mode.package-selection-mode .auth-card) {
    padding: 20px 16px;
  }
  body:has(>.motors-site-header) :is(.offers-card-body, .offers-card-heading, .partner-hero>div, .garage-hero, .deal-hero-copy, .auth-copy) {
    padding: 22px 18px;
  }
  body:has(>.motors-site-header) :is(.directory-tabs, .offers-benefits) {
    gap: 10px;
    margin-block: 18px;
  }
  body:has(>.motors-site-header) .directory-tabs>a {
    min-height: 106px;
    padding: 16px;
  }
  body:has(>.motors-site-header) .offers-benefits>div {
    padding: 16px;
  }
  body:has(>.motors-site-header) .car-body {
    padding: 16px;
  }
  body:has(>.motors-site-header) .car-main {
    flex-wrap: wrap;
    gap: 10px;
  }
  body:has(>.motors-site-header) .car h3 {
    font-size: 20px;
    line-height: 1.5;
  }
  body:has(>.motors-site-header) .car-photo {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  body:has(>.motors-site-header) .request-images-preview button {
    min-height: 44px;
  }

  /* Account navigation scrolls inside its own width instead of widening the page. */
  body:has(>.motors-site-header) .portal-dashboard {
    width: 100%;
    min-inline-size: 0;
  }
  body:has(>.motors-site-header) .portal-hero {
    min-height: 0;
    padding: 22px 18px !important;
  }
  body:has(>.motors-site-header) .portal-identity {
    gap: 12px;
    align-items: flex-start;
  }
  body:has(>.motors-site-header) .portal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 22px;
  }
  body:has(>.motors-site-header) .portal-hero .page-heading {
    font-size: 25px;
    line-height: 1.5;
  }
  body:has(>.motors-site-header) .portal-hero-side {
    gap: 12px;
    width: 100%;
    justify-items: stretch;
    text-align: start;
  }
  body:has(>.motors-site-header) .portal-head-actions {
    flex-wrap: wrap;
  }
  body:has(>.motors-site-header) .portal-head-actions>* {
    flex: 1;
  }
  body:has(>.motors-site-header) :is(.portal-section-nav, #dashboard>.portal-section-nav, .request-tabs, .details-nav, .search-tabs, .test-drive-body-filters) {
    max-inline-size: 100%;
    min-inline-size: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 8px;
    -webkit-overflow-scrolling: touch;
  }
  body:has(>.motors-site-header) :is(.portal-section-nav, #dashboard>.portal-section-nav) {
    position: relative;
    top: auto;
    width: 100%;
    margin: 16px 0 22px;
  }
  body:has(>.motors-site-header) :is(.portal-section-nav a, #dashboard>.portal-section-nav a, .request-tabs button, .details-nav button, .search-tabs button, .test-drive-body-filters button) {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: 14px;
    white-space: nowrap;
  }
  body:has(>.motors-site-header) .portal-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body:has(>.motors-site-header) :is(.portal-kpis>button, .portal-kpis>article) {
    padding: 18px 14px !important;
    min-height: 112px;
  }
  body:has(>.motors-site-header) :is(.package-balance-grid, .package-balance-grid.single-balance, .account-package-summary, .package-suggestions) {
    grid-template-columns: minmax(0, 1fr);
  }
  body:has(>.motors-site-header) :is(.request-top, .request-main, .request-bottom) {
    gap: 12px;
    flex-wrap: wrap;
  }
  body:has(>.motors-site-header) .request-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:has(>.motors-site-header) :is(.request-actions, .dialog-actions) {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Scroll inside each table or progress strip; never clip the entire page. */
  body:has(>.motors-site-header) :is(.table-wrap, .compare-table, .stagebar) {
    max-inline-size: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  body:has(>.motors-site-header) .stagebar {
    grid-template-columns: repeat(8, minmax(90px, 1fr));
    padding: 16px 10px;
    margin-block: 18px;
  }
  body:has(>.motors-site-header) .deal-car {
    min-height: 180px;
    height: 200px;
  }
  body:has(>.motors-site-header) .layout {
    grid-template-columns: minmax(0, 1fr);
  }
  body:has(>.motors-site-header) .layout>main {
    padding: 22px var(--site-gutter) 28px;
  }
  body:has(>.motors-site-header) .layout>main>.page-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  /* Real modal dialogs become bounded sheets. The car and seller routes use
     modeless dialogs and deliberately do not match :modal. */
  body:has(>.motors-site-header) dialog:modal {
    box-sizing: border-box;
    position: fixed;
    inset: auto 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100% - 16px);
    max-width: 100%;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top, 0px)) - max(8px, env(safe-area-inset-bottom, 0px)) - 8px);
    margin: 0 auto !important;
    border-radius: 22px;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 20px;
    -webkit-overflow-scrolling: touch;
  }
  body:has(>.motors-site-header) dialog:modal::backdrop {
    background: rgb(7 16 31 / .62);
  }
  body:has(>.motors-site-header) :is(.sell-dialog:modal .sell-form, .general-request-dialog form, .motors-confirm-dialog form, .test-drive-dialog-body) {
    padding: 22px 16px;
  }
  body:has(>.motors-site-header) .guest-auth-card {
    padding: 28px 18px 22px;
  }
  body:has(>.motors-site-header) .dialog-heading {
    padding: 22px 18px;
    padding-inline-end: 66px;
    flex-wrap: wrap;
  }
  body:has(>.motors-site-header) .dialog-heading .status {
    position: static;
    inset: auto;
  }
  body:has(>.motors-site-header) .dialog-close {
    top: 12px;
  }
  body:has(>.motors-site-header) .compare-dialog:modal[open] {
    height: min(88dvh, 800px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body:has(>.motors-site-header) .compare-dialog .compare-table {
    min-height: 0;
    flex: 1;
    padding: 12px 10px 20px;
  }
  body:has(>.motors-site-header) .compare-dialog-head {
    flex: none;
    padding: 16px;
  }
  body:has(>.motors-site-header) :is(.compare-bar, .vehicle-compare-bar) {
    bottom: calc(var(--motors-mobile-nav-space, 0px) + 12px);
    width: calc(100% - 24px);
    max-height: calc(100dvh - var(--motors-mobile-nav-space, 0px) - 24px);
    gap: 10px;
    flex-wrap: wrap;
  }
  body:has(>.motors-site-header):has(.compare-bar:not([hidden]), .vehicle-compare-bar:not([hidden])) {
    padding-block-end: calc(var(--motors-mobile-nav-space, 0px) + 116px);
  }

  /* Custom choice popovers also have their own top layer and safe height. */
  body:has(>.motors-site-header) .motors-choice-panel {
    box-sizing: border-box;
    top: auto;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: 8px;
    width: calc(100% - 16px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
    margin: 0;
    padding: 16px;
    border-radius: 22px;
    transform: none;
  }
  body:has(>.motors-site-header) .motors-choice-grid {
    min-height: 0;
    overscroll-behavior: contain;
  }
  body:has(>.motors-site-header) .motors-choice-option {
    min-height: 52px;
  }
  body:has(>.motors-site-header) .catalog-layout .refine-panel.open {
    box-sizing: border-box;
    height: 100dvh;
    max-height: 100dvh;
    padding-block: env(safe-area-inset-top, 0px) calc(max(var(--motors-mobile-nav-space, 0px), env(safe-area-inset-bottom, 0px)) + 16px);
    scroll-padding-block: 20px;
    overscroll-behavior: contain;
  }
  body:has(>.motors-site-header) .vehicle-filter-shell>footer {
    position: relative;
    bottom: auto;
    padding-block-end: 6px;
  }
  body:has(>.motors-site-header) :is(.details-nav, .portal-section-nav, .request-tabs, .stagebar, [id$="-verification"]) {
    scroll-margin-block-start: 16px;
  }
}

@media (max-width: 560px) {
  body:has(>.motors-site-header) :is(.sell-form fieldset, .request-form, .vs-form, .vs-fields-grid, .vs-kind-options, .listing-edit-form, .expert-contact, .expert-vehicle-fields, .general-request-fields, .package-request-box form, .garage-request-box form, .offers-filters, .partner-status-form, .partner-status-form>div, .form-grid, .report-entry form, .finance-box form) {
    grid-template-columns: minmax(0, 1fr);
  }
  body:has(>.motors-site-header) :is(.sell-form, .request-form, .vs-form, .listing-edit-form, .general-request-fields)>.full {
    grid-column: 1 / -1;
  }
  body:has(>.motors-site-header) :is(.vs-submit-row>button, .inquiry-submit>button, .general-request-dialog footer>button, .package-request-box form>button, .sell-submit>button) {
    width: 100%;
    min-width: 0;
  }
  body:has(>.motors-site-header) :is(.vs-submit-row, .general-request-dialog footer, .inquiry-submit, .request-actions, .dialog-actions, .expert-answer-form>div) {
    align-items: stretch;
    flex-direction: column;
  }
  body:has(>.motors-site-header) .package-request-box {
    padding: 20px 14px;
    gap: 20px;
  }
  body:has(>.motors-site-header) .account-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:has(>.motors-site-header) :is(.vs-feature-options, .request-images-preview, .request-image-gallery) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  body:has(>.motors-site-header) :is(.account-shortcuts, .request-facts, .dialog-facts, .vs-vehicle-details) {
    grid-template-columns: minmax(0, 1fr);
  }
  body:has(>.motors-site-header) .compare-bar-actions {
    flex: 1;
    justify-content: flex-end;
  }
}