/* Phone-only layout (max-width: 640px). Owned by the Image QA session; loaded after brand.css. */
/*
  Goal: less scrolling on phones without hiding products or buyer-facing
  facts. Tightens spacing, puts paired controls side by side and turns
  long stacks into short swipe rows.
*/
/* The collapse toggle (mobile-collapse.js) is hidden outside phone widths */
.mm-collapse-toggle[hidden] { display: none !important; }

@media (max-width: 640px) {
  /* Section rhythm */
  :root :is(#story, #spaces-gallery, #tech-specs, #terms, #shipping, #private-label, #contact) {
    padding-top: 26px !important; padding-bottom: 26px !important;
  }
  :root #tech-specs .plank-layer { padding-top: 10px !important; padding-bottom: 10px !important; }
  :root .section-intro { margin-bottom: 14px; }
  :root .section-intro .section-lede { margin-top: 6px; }

  /* Hero: the two actions share one row, shorter stage */
  :root #home .hero-actions { flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: stretch; }
  :root #home .hero-actions > * { flex: 1 1 0; width: auto; min-width: 0; justify-content: center; text-align: center; }
  :root #home .studio-stage { padding-top: 0; margin-top: 12px; position: relative; }
  :root #home .studio-pause { position: absolute; top: 10px; right: 10px; z-index: 3; }

  /* 3D plank anatomy */
  :root #tech-specs .layer-deconstructor { padding: 12px; }
  :root #tech-specs .anatomy-note { margin-bottom: 10px; }
  :root #tech-specs .spc-3d-stage-header { gap: 10px; }
  :root #tech-specs .spc-3d-controls { flex-direction: row; gap: 8px; }
  :root #tech-specs .spc-3d-controls > * { flex: 1 1 0; min-width: 0; }
  :root #tech-specs .spc-3d-viewport { height: 230px; min-height: 0; }
  :root #tech-specs .spc-3d-drag-hint { display: none; }
  :root #tech-specs .spc-3d-swatches-bar { padding-top: 10px; padding-bottom: 10px; }
  /* Finish swatches: one swipe row instead of a two-row grid */
  :root #tech-specs .swatch-btn-group {
    display: flex !important; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  :root #tech-specs .swatch-btn-group::-webkit-scrollbar { display: none; }
  :root #tech-specs .swatch-btn-group > * { flex: 0 0 auto; scroll-snap-align: start; }
  /* Layer list keeps its grid; only the selected layer shows its description */
  :root #tech-specs .plank-layers-stack { gap: 8px; margin-top: 12px; }
  :root #tech-specs .plank-layer { min-height: 0; padding: 10px 12px; }
  :root #tech-specs .plank-layer:not(.highlight) .layer-info p { display: none; }

  /* Shipping */
  :root #shipping .freight-hud-card { position: relative; margin-top: 16px; padding: 14px; }
  :root #shipping .freight-scene-header { gap: 10px; padding: 4px 4px 0; }
  :root #shipping .freight-scene-header .motion-control { align-self: flex-start; min-height: 36px; padding: 6px 14px; width: auto; }
  :root #shipping .lane-planning-note { margin-top: 8px; margin-bottom: 8px; }
  :root #shipping .lane-regions { margin-top: 12px; margin-bottom: 12px; }
  :root #shipping .freight-footer-bar { gap: 12px; margin-top: 12px; padding-top: 12px; }

  /* Trade terms */
  :root #terms .terms-grid { margin-bottom: 20px; }
  :root #terms .sample-program-banner { padding: 18px; gap: 14px; }

  /* Collapsed reference sections (mobile-collapse.js): intro + one button */
  /* A quiet disclosure row, so it never competes with the real calls to action */
  :root .mm-collapsible .mm-collapse-toggle.mm-collapse-toggle {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    gap: 12px; min-height: 48px; margin-top: 4px; padding: 12px 16px; text-align: left;
    color: inherit !important; background: transparent !important; box-shadow: none !important;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important;
    font-weight: 600;
  }
  :root .mm-collapsible .mm-collapse-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  :root .mm-collapsible .mm-collapse-chevron {
    flex: 0 0 auto; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease;
  }
  :root .mm-collapsible .mm-collapse-toggle[aria-expanded="true"] .mm-collapse-chevron { transform: translateY(2px) rotate(-135deg); }
  @media (prefers-reduced-motion: reduce) { :root .mm-collapsible .mm-collapse-chevron { transition: none; } }
  :root .mm-collapsible .mm-collapse-toggle[aria-expanded="true"] { margin-bottom: 14px; }
  :root .mm-collapsed .page-shell > :not(.section-intro, .mm-collapse-toggle, .mm-collapse-keep) { display: none !important; }
  :root .mm-collapsed .mm-collapse-keep { margin-top: 16px; }
  :root .mm-collapsed .section-intro { margin-bottom: 12px; }

  /* Keep the last footer row ("Back to top") clear of the floating WhatsApp button */
  :root .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Quote form (inputs stay full width and 16px so iOS doesn't zoom) */
  :root #contact .quote-form { padding: 16px; }
}