/* Catalog tablet + mobile refinement layer */
html,body{overflow-x:hidden}
.catalog-workspace,.builder-home{max-width:100vw}
.visual-catalog-card,.studio-component-card,.specimen,.sample{min-width:0}
.sample img,.visual-site-thumb img{max-width:100%;height:auto}

/* Touch-friendly controls */
.studio-filter,.quick-select,.visual-customize,.studio-preview-link,.preview-project-link,
.studio-step-nav a,.editor-actions button,.editor-devices button,.builder-actions button,
.catalog-theme-toggle,.catalog-account-button{min-height:44px}

/* Prevent toolbars and navigation from forcing horizontal page overflow */
.studio-toolbar,.editor-appbar,.project-preview-toolbar,.builder-toolbar,.theme-toolbar{
  max-width:100%;
}
.studio-filter-group,.tabs,.editor-devices,.editor-actions{
  min-width:0;
}

/* Tables remain usable instead of shrinking into unreadable columns. */
.table-wrap,.sample-table,.catalog-table,.preview-table{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table{min-width:560px}

@media (max-width:1024px){
  .wrap{width:min(100% - 28px,1280px)}
  .visual-catalog-grid,.studio-component-grid{gap:14px}
  .visual-card-actions{gap:8px}
  .visual-card-actions>*{min-width:0}
  .project-device,.editor-preview-frame,.theme-device,.guided-device{max-width:100%}
  .preview-project,.project-preview-shell,.editor-preview-shell{max-width:100%;overflow:hidden}
}

@media (max-width:900px){
  .topbar-inner{flex-wrap:wrap;min-height:64px;padding-block:8px}
  .topbar-inner .back{margin-left:0}
  .studio-page-intro{gap:14px}
  .studio-toolbar{position:relative!important;top:auto!important;display:flex;gap:8px}
  .studio-filter-group{display:flex;overflow-x:auto;flex-wrap:nowrap!important;max-width:100%!important;width:100%;padding-bottom:3px;scrollbar-width:thin}
  .studio-filter{flex:0 0 auto;white-space:nowrap}
  .studio-search{width:100%;flex-basis:100%!important}
  .studio-search input{width:100%}
  .visual-card-actions{grid-template-columns:1fr 1fr!important}
  .workspace-menu-toggle{top:10px;left:10px}
  .preview-selection-summary #pv-selections{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:760px){
  .wrap{width:min(100% - 22px,1280px)}
  .hero{padding-top:34px;padding-bottom:24px}
  .hero h1{font-size:clamp(2rem,10vw,3.2rem)!important;line-height:1!important}
  .hero p{font-size:.98rem}
  .catalog-grid,.visual-catalog-grid,.studio-component-grid,.compact-library{grid-template-columns:1fr!important}
  .visual-catalog-card,.studio-component-card,.specimen{width:100%;max-width:100%;padding:14px}
  .sample{padding:12px}
  .visual-site-thumb{max-width:100%}
  .studio-page-intro{padding:16px!important}
  .visual-catalog-intro{padding:16px}
  .visual-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px;width:100%}
  .visual-card-actions .visual-customize,.visual-card-actions .quick-select{width:100%;padding-inline:10px!important;text-align:center}
  .studio-step-nav{display:grid;grid-template-columns:1fr;gap:8px}
  .studio-step-nav a{width:100%;text-align:center}
  .component-editor-shell,.builder-layout,.theme-builder-layout,.guided-shell{grid-template-columns:1fr!important}
  .editor-controls{position:relative!important;top:auto!important;max-height:none!important}
  .editor-appbar{grid-template-columns:1fr!important}
  .editor-devices,.editor-actions{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .editor-devices button,.editor-actions button,.editor-actions a{width:100%}
  .editor-preview-frame,.editor-preview-frame.tablet,.editor-preview-frame.mobile,.project-device,.project-device.tablet,.project-device.mobile,.guided-device,.theme-device{width:100%!important;max-width:100%!important}
  .preview-reference-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .preview-reference-actions input,.preview-reference-actions button{width:100%!important;min-width:0!important}
  .assembled-hero{padding:52px 18px!important}
  .assembled-hero div{flex-wrap:wrap}
  .assembled-site footer{flex-direction:column;gap:10px}
  .preview-selection-summary #pv-selections{grid-template-columns:1fr!important}
  .saved-reference-head,.saved-reference-row{width:100%}
  .cloud-actions{width:100%}
  .cloud-actions button{width:100%}
  .studio-preview-link{left:12px!important;bottom:12px!important;max-width:calc(50vw - 18px)!important;overflow:hidden;text-overflow:ellipsis}
  .selection-fab{right:12px!important;bottom:12px!important;max-width:calc(50vw - 18px)!important}
}

@media (max-width:520px){
  .wrap{width:min(100% - 18px,1280px)}
  .brand{font-size:.88rem}
  .brand i{width:34px;height:34px;border-radius:10px}
  .topbar-inner{gap:8px}
  .back{font-size:.72rem}
  .visual-card-actions{grid-template-columns:1fr!important}
  .visual-card-actions>*{width:100%!important}
  .editor-devices,.editor-actions{grid-template-columns:1fr!important}
  .studio-filter{padding-inline:12px}
  .sample{min-height:105px!important}
  .nav-mini-top{gap:5px!important;padding-inline:8px!important}
  .nav-mini-top span{font-size:.46rem!important}
  .nav-mini-top i{font-size:.46rem!important;padding:6px 8px!important}
  .mini-hero,.nav-mini-screen,.nav-mini-content{overflow:hidden}
  .workspace-confirm{width:min(94vw,520px)!important}
}

/* ===== Phone-sized Full Preview v1.1 =====
   Keep desktop/tablet previews unchanged. On phones, present the full
   website preview as a smaller centered device canvas so it does not
   overwhelm the screen. */
@media (max-width:600px){
  .project-preview-layout .project-device,
  .project-preview-layout .project-device.desktop,
  .project-preview-layout .project-device.tablet,
  .project-preview-layout .project-device.mobile{
    width:min(86vw,340px) !important;
    max-width:340px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    border-radius:18px !important;
    overflow:hidden !important;
    box-shadow:0 18px 44px rgba(14,42,71,.16) !important;
  }

  .project-preview-layout .project-device .pv-live-site,
  .project-preview-layout .project-device .assembled-site{
    width:100% !important;
    max-width:100% !important;
  }

  /* Keep the preview toolbar full-width while only shrinking the website canvas. */
  .project-preview-toolbar,
  .final-preview-edit-help,
  .saved-reference-panel,
  .preview-selection-summary{
    width:100% !important;
    max-width:100% !important;
  }

  /* The slide-out live preview also gets a little breathing room on phones. */
  .workspace-rail .mini-site{
    width:92% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:390px){
  .project-preview-layout .project-device,
  .project-preview-layout .project-device.desktop,
  .project-preview-layout .project-device.tablet,
  .project-preview-layout .project-device.mobile{
    width:min(84vw,310px) !important;
    max-width:310px !important;
  }
}


/* ===== Phone Full Preview v1.2 =====
   On an actual phone, the full website preview should use the website's
   mobile layout. Do not squeeze a desktop two-column hero into 300px. */
@media (max-width:600px){
  .project-preview-layout .preview-toolbar-actions [data-pv="desktop"],
  .project-preview-layout .preview-toolbar-actions [data-pv="tablet"]{
    display:none !important;
  }

  .project-preview-layout .preview-toolbar-actions [data-pv="mobile"]{
    display:inline-flex !important;
  }

  .project-preview-layout .project-device.mobile{
    width:min(92vw,390px) !important;
    max-width:390px !important;
  }

  .project-preview-layout .project-device.mobile .pv-live-site{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .project-preview-layout .project-device.mobile .pv-header{
    padding:12px 14px !important;
    gap:10px !important;
  }

  .project-preview-layout .project-device.mobile .pv-nav,
  .project-preview-layout .project-device.mobile .pv-cta{
    display:none !important;
  }

  .project-preview-layout .project-device.mobile .pv-menu{
    display:block !important;
    margin-left:auto !important;
  }

  .project-preview-layout .project-device.mobile .pv-hero{
    grid-template-columns:minmax(0,1fr) !important;
    padding:44px 22px !important;
    min-height:0 !important;
    gap:22px !important;
  }

  .project-preview-layout .project-device.mobile .pv-hero-copy{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .project-preview-layout .project-device.mobile .pv-hero h1{
    font-size:clamp(2rem,10vw,3rem) !important;
    line-height:1.02 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .project-preview-layout .project-device.mobile .pv-hero-art{
    min-height:190px !important;
  }

  .project-preview-layout .project-device.mobile .pv-cards,
  .project-preview-layout .project-device.mobile .pv-form{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .project-preview-layout .project-device.mobile .pv-footer{
    flex-direction:column !important;
    text-align:center !important;
  }
}