/* Small-screen navigation uses the existing build controls, state and pricing. */
.builder-steps { display: none; }
.personalization-group, .personalization-dock { display: contents; }
.personalization-live { display: none; }
.option-dialog-actions { margin-top: 18px; }
.option-dialog-actions p { font-size: .875rem; color: var(--accent-light); }
.option-dialog-actions button { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }
.selected-upgrades-filter { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: .875rem; cursor: pointer; }
.selected-upgrades-filter input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }

@media (max-width: 760px), (max-width: 1400px) and (any-pointer: coarse) {
  html { scroll-padding-bottom: calc(var(--mobile-bar-height, 90px) + 16px); }
  body { padding-bottom: var(--mobile-bar-height, 100px); }
  .builder { display: block; }
  .visual-column, .stage-sticky { display: contents; }
  .color-comparison { padding: 12px 16px; }
  .preview-extras { padding: 0 16px 20px; background: #0f1216; }
  .builder-steps {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    position: sticky; top: 0; z-index: 11;
    padding: 8px 12px; background: #0b0d10;
    border-bottom: 1px solid var(--line); box-shadow: 0 5px 14px #0005;
  }
  .builder-steps a {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 44px; padding: 8px 2px;
    border: 1px solid #ffffff26; border-radius: 6px;
    background: var(--panel); color: #fff; font-size: .875rem;
    font-weight: 600; text-decoration: none; text-align: center; overflow-wrap: anywhere;
  }
  .builder-steps a:last-child { border-color: var(--accent); background: #0d2c42; }
  .builder-steps a:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }
  /* Free the viewport: only the small section menu stays above the upgrades. */
  .color-comparison { position: static; box-shadow: none; }
  .personalization-group { display: block; }
  .personalization-dock {
    display: block; position: sticky; top: var(--personalization-top, 61px); z-index: 9;
    background: var(--ink-soft); border-bottom: 1px solid var(--line); box-shadow: 0 8px 12px -10px #000;
    scroll-margin-top: calc(var(--builder-nav-height, 61px) + 8px);
  }
  .personalization-dock .personalization-bar { position: static; border-bottom: 0; box-shadow: none; padding-bottom: 8px; }
  .personalization-live:not([hidden]) { display: block; padding-bottom: 8px; }
  .personalization-live > p { margin: 0 0 6px; color: var(--paper); font-size: .875rem; line-height: 1.4; }
  .personalization-live-media { position: relative; height: clamp(100px, 18svh, 160px); background: #111317; border-radius: 6px; overflow: hidden; }
  .personalization-live canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
  .personalization-live[data-material="body"] .personalization-live-media { height: auto; aspect-ratio: 18 / 7; }
  .personalization-live[data-material="body"] canvas { position: absolute; inset: 0; object-fit: cover; object-position: center 20%; }
  #personalizationPreviewStatus { position: absolute; inset: auto 0 0; margin: 0; padding: 6px 8px; background: #0b0d10e8; color: #fff; font-size: .875rem; }
  .personalization-fields .colors { max-height: clamp(48px, calc(var(--builder-viewport-height, 100svh) - var(--personalization-height, 290px) - var(--builder-nav-height, 61px) - var(--mobile-bar-height, 100px) - 140px), 210px); }
  #modelSection, #personalizationGroup, #wheelSection, #upgrades {
    scroll-margin-top: calc(var(--builder-nav-height, 61px) + 12px);
  }
  .controls { padding-left: 16px; padding-right: 16px; }
  .personalization-bar .color-targets button { font-size: .875rem; }
  .color-search input, .color-search select, .wheel-search input, .wheel-search select,
  .option-filters input, .option-filters select, .race-promo-entry input {
    min-height: 48px; font-size: 1rem;
  }
  .option-filters { grid-template-columns: 1fr; }
  .options-intro, .option-summary, .controls .note { font-size: .875rem; line-height: 1.5; }
  /* A single page scroll avoids nested touch scrolling and hidden checkboxes. */
  .option-catalog, .wheels { max-height: none; overflow: visible; }
  .option-catalog { grid-template-columns: 1fr; gap: 14px; padding: 2px; }
  .option-card {
    display: grid; grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: 'photo choice' 'photo price' 'description description' 'availability availability';
    gap: 8px 12px; padding: 12px; align-items: start;
  }
  .option-picture { grid-area: photo; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
  .option-picture span { font-size: .75rem; right: 3px; bottom: 3px; padding: 4px; }
  .option-choice { grid-area: choice; min-height: 48px; padding: 0; gap: 10px; align-items: center; }
  .option-choice input { flex-basis: 24px; width: 24px; height: 24px; margin: 0; }
  .option-choice strong { font-size: 1rem; overflow-wrap: anywhere; }
  .option-price { grid-area: price; padding: 0; font-size: 1rem; }
  .option-description { grid-area: description; margin: 0; font-size: .875rem; }
  .option-availability { grid-area: availability; margin: 0; font-size: .875rem; }
  .order-card { margin-bottom: calc(var(--mobile-bar-height, 90px) + 20px); }
  .mobile-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    color: #fff; background: #080a0df5; border-top: 1px solid var(--line); backdrop-filter: blur(10px);
  }
  .mobile-bar span { font-size: .75rem; }
  .mobile-bar > div > span { display: block; color: #aab1b9; margin-bottom: 4px; }
  .mobile-bar .mobile-deposit { margin-top: 4px; margin-bottom: 0; }
  .mobile-deposit strong { color: #fff; font-weight: 500; }
  .mobile-bar button { font-size: .875rem; min-height: 48px; padding: 12px 18px; }
  .mobile-bar > div { min-width: 0; }
  .mobile-bar b { font-size: 1.25rem; }
  .toast { bottom: calc(var(--mobile-bar-height, 100px) + 12px); }
  .color { min-height: 48px; }
  .color-search, .wheel-search { grid-template-columns: minmax(0, 1fr) 130px; }
  .fitment-filter { min-height: 48px; font-size: .875rem; }
  .fitment-filter input { width: 24px; height: 24px; flex-shrink: 0; }
  .segmented button { min-height: 44px; }
  #optionDialog .dialog-heading { position: sticky; top: -22px; padding: 10px 0; background: var(--ink-soft); z-index: 1; }
  #closeOptionDialog, #closeDialog { width: 44px; height: 44px; flex-shrink: 0; }
  #optionDialogImage { height: min(40svh, 320px); }
}

@media (max-width: 760px) and (max-height: 600px) and (orientation: landscape) {
  .personalization-dock { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
  .personalization-dock .color-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personalization-live .personalization-live-media { max-height: 100px; }
}

/* Larger iPads keep a compact preview beside the material buttons. */
@media (min-width: 761px) and (max-width: 1400px) and (any-pointer: coarse) {
  .color-comparison, .preview-extras, .controls { max-width: 1000px; margin-left: auto; margin-right: auto; }
  .color-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .stage-header { grid-column: 1 / -1; }
  .color-comparison .front-view-stage { grid-column: 1; grid-row: 2; margin-top: 0; align-self: center; }
  .color-comparison .preview-caption { grid-column: 1; grid-row: 3; }
  #seatPreview { grid-column: 2; grid-row: 2 / 4; margin-top: 0; }
  .personalization-dock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; }
  .personalization-live-media, .personalization-live[data-material="body"] .personalization-live-media { height: clamp(100px, 18svh, 180px); aspect-ratio: auto; }
  .option-catalog, .wheels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .option-filters { grid-template-columns: 1fr 1fr; }
  .mobile-bar { padding-left: max(24px, calc((100vw - 1000px) / 2)); padding-right: max(24px, calc((100vw - 1000px) / 2)); }
}
@media (max-width: 760px) and (max-height: 500px), (max-width: 1400px) and (any-pointer: coarse) and (max-height: 500px) {
  .personalization-dock { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
  .personalization-bar h2 { display: none; }
  .personalization-dock .color-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personalization-live-media, .personalization-live[data-material="body"] .personalization-live-media { height: 80px; aspect-ratio: auto; }
}
@media print { .builder-steps, .option-dialog-actions { display: none; } }