/* CAMPAIGNFORGE_V89_SCROLL_FIX_CSS_START */

/* Desktop editor behaviour only. The side panels scroll internally while the preview stays in view. */
@media (min-width: 1201px){
  html{
    scroll-behavior:auto!important;
  }

  .cf85 .app{
    align-items:start!important;
    grid-template-columns:minmax(260px,310px) minmax(520px,1fr) minmax(320px,360px)!important;
  }

  .cf85 .app > .panel.left,
  .cf85 .app > aside.left.panel,
  .cf85 aside.left{
    position:sticky!important;
    top:92px!important;
    align-self:start!important;
    max-height:calc(100vh - 112px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable both-edges!important;
    padding-right:14px!important;
  }

  .cf85 .app > .panel.right,
  .cf85 .app > aside.right.panel,
  .cf85 aside.right{
    position:sticky!important;
    top:92px!important;
    align-self:start!important;
    max-height:calc(100vh - 112px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable both-edges!important;
    padding-right:14px!important;
  }

  .cf85 .app > .panel.stage,
  .cf85 .app > section.stage.panel,
  .cf85 section.stage{
    position:sticky!important;
    top:92px!important;
    align-self:start!important;
    display:flex!important;
    flex-direction:column!important;
  }

  .cf85 .stage .canvas-wrap{
    max-height:calc(100vh - 310px)!important;
    min-height:360px!important;
    overflow:auto!important;
  }

  .cf85 .stage #cf85-canvas{
    max-width:100%!important;
    height:auto!important;
  }

  .cf85 .left::-webkit-scrollbar,
  .cf85 .right::-webkit-scrollbar{
    width:10px;
  }

  .cf85 .left::-webkit-scrollbar-track,
  .cf85 .right::-webkit-scrollbar-track{
    background:#edf3fb;
    border-radius:999px;
  }

  .cf85 .left::-webkit-scrollbar-thumb,
  .cf85 .right::-webkit-scrollbar-thumb{
    background:#b8c7dc;
    border-radius:999px;
    border:2px solid #edf3fb;
  }
}

/* Tablet and mobile safety. No internal side-panel scrolling on smaller screens. */
@media (max-width: 1200px){
  .cf85 .app{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  .cf85 .app > .panel,
  .cf85 .app > aside,
  .cf85 .app > section,
  .cf85 .left,
  .cf85 .right,
  .cf85 .stage{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
    width:100%!important;
    max-width:100%!important;
    padding-right:16px!important;
  }

  .cf85 .left{order:1!important;}
  .cf85 .stage{order:2!important;}
  .cf85 .right{order:3!important;}

  .cf85 .stage .canvas-wrap{
    max-height:none!important;
    min-height:auto!important;
    overflow:auto!important;
  }

  .cf85 .stage #cf85-canvas{
    max-width:100%!important;
    width:100%!important;
    height:auto!important;
  }
}

/* Phone layout guard. Keeps the page usable when the screen is narrow. */
@media (max-width: 760px){
  body{
    min-width:0!important;
  }

  .tms-nav{
    position:relative!important;
    height:auto!important;
    flex-wrap:wrap!important;
    padding:12px!important;
    gap:12px!important;
  }

  .tms-links{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:10px!important;
    font-size:12px!important;
  }

  .tms-cta{
    width:100%!important;
    max-width:320px!important;
    text-align:center!important;
  }

  .cf85{
    padding:14px 10px 52px!important;
  }

  .hero{
    padding:24px 18px!important;
    border-radius:22px!important;
  }

  .hero h1{
    font-size:clamp(34px,10vw,48px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }

  .hero p{
    font-size:15px!important;
  }

  .topbar,
  .actions,
  .stage-head,
  .preview-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }

  .sizebar{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }

  .sizebar .field:first-child{
    grid-column:1 / -1!important;
  }

  .grid2,
  .grid4,
  .info-grid,
  .footer-inner,
  .library,
  .colourways{
    grid-template-columns:1fr!important;
  }

  .steps{
    grid-template-columns:repeat(2,1fr)!important;
  }

  .canvas-wrap{
    padding:10px!important;
    border-radius:18px!important;
  }
}

@media (max-width: 480px){
  .sizebar{
    grid-template-columns:1fr!important;
  }

  .panel{
    padding:14px!important;
    border-radius:18px!important;
  }

  .btn{
    width:100%!important;
  }
}

/* CAMPAIGNFORGE_V89_SCROLL_FIX_CSS_END */