/* Mobile responsive fixes - topo-prints */
@media (max-width: 600px) {
  .app, main, body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  main {
    padding: 0 1rem 3rem !important;
  }

  /* 1. Step indicator - prevent overflow */
  #flow-stepper {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem 0.75rem !important;
    overflow: hidden !important;
  }

  #flow-stepper .step-connector {
    min-width: 12px !important;
    flex: 1 1 0 !important;
  }

  #flow-stepper .step-label {
    font-size: 0.55rem !important;
  }

  /* 2. Search bar container - constrain to viewport */
  .hero-search {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-top {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 0.75rem !important;
  }

  /* 3. Hero/preview image - prevent bleed */
  .hero-progressive {
    max-width: 100vw !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-showcase {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-frame {
    max-width: calc(100% - 1.5rem) !important;
    box-sizing: border-box !important;
  }

  .hero-layers {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 6. Vertical overflow - allow full scroll on mobile */
  .hero-progressive {
    min-height: auto !important;
  }

  .hero-controls-panel.visible {
    max-height: none !important;
    overflow: visible !important;
  }

  /* 4. Controls hint text - prevent truncation */
  .controls-hint {
    max-width: 100% !important;
    word-wrap: break-word !important;
    padding: 0 0.5rem !important;
    box-sizing: border-box !important;
  }

  /* 5. Style picker row - constrain width */
  html .hero-controls-panel,
  html .controls-inner,
  html .controls-panel {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  .control-group {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html .style-options {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    overflow: visible !important;
    overflow-x: visible !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html .style-btn {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.65rem !important;
  }

  html .style-btn .style-swatch {
    width: 24px !important;
    height: 24px !important;
  }

  html .detail-options {
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    max-width: 100% !important;
  }

  html .detail-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.5rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  .shape-buttons,
  .shape-options {
    flex-wrap: nowrap !important;
    max-width: 100% !important;
  }

  .shape-btn,
  .shape-options button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .overlay-options {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .preview-frame {
    padding: 1rem !important;
  }

  .map-preview {
    height: 250px !important;
  }

  .generate-btn,
  .action-btn {
    width: 100% !important;
  }

  input[type="text"] {
    font-size: 16px !important;
  }

  .action-buttons {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  h1 {
    font-size: 1.5rem !important;
  }
}