/* Final responsive corrections discovered during rendered visual QA. */

/* Remove the obsolete wireframe layer from the old workflow mockup. */
body[data-editorial-family="home"] .workflow-store::before{
  display:none!important;
  content:none!important;
}

@media(max-width:680px){
  /* The hero PDP stacks vertically on mobile, so its scene needs enough intrinsic room
     before the progress/status rows begin. */
  body[data-editorial-family="home"] .editorial-hero-demo .demo-scenes{
    min-height:500px!important;
  }
  body[data-editorial-family="home"] .editorial-hero-demo .demo-scene{
    align-items:start!important;
  }
  body[data-editorial-family="home"] .editorial-hero-demo .mock-store{
    min-height:470px!important;
  }
  body[data-editorial-family="home"] .editorial-hero-demo .mock-media{
    min-height:210px!important;
  }
  body[data-editorial-family="home"] .editorial-hero-demo .mini-product-art{
    min-height:210px!important;
  }
  body[data-editorial-family="home"] .editorial-hero-demo .mock-product-copy{
    padding-bottom:18px!important;
  }

  /* The old workflow stylesheet forced a fixed 250px height at mobile widths.
     Let the real PDP define its height and keep the labeled CTA fully visible. */
  body[data-editorial-family="home"] .workflow-store{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body[data-editorial-family="home"] .workflow-mini-pdp{
    min-height:0!important;
    grid-template-columns:1fr!important;
  }
  body[data-editorial-family="home"] .workflow-product-photo{
    min-height:210px!important;
  }
  body[data-editorial-family="home"] .workflow-product-info{
    min-height:190px!important;
  }
  body[data-editorial-family="home"] .workflow-product-info button{
    min-height:44px!important;
    font-size:10px!important;
  }
  body[data-editorial-family="home"] .workflow-preview-badge{
    top:52px!important;
  }
}