:root{--cm-mobile-gap:14px}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
main,.page,.shell,.container,.onboarding-main{max-width:100%}
input,select,textarea,button{max-width:100%}
.table-wrap,.table-container,[class*="table-wrap"]{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:1024px){
  .dashboard-grid,.content-grid,.supplier-grid,.catalogue-grid,.onboarding-grid,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .shell,.page,.onboarding-main{padding-left:20px!important;padding-right:20px!important}
  .hero{padding:28px 24px!important}
}
@media (max-width:720px){
  body{font-size:16px;line-height:1.55}
  .dashboard-grid,.content-grid,.supplier-grid,.catalogue-grid,.onboarding-grid,.kpis{grid-template-columns:1fr!important}
  .shell,.page,.onboarding-main{padding-left:14px!important;padding-right:14px!important}
  .hero{padding:22px 16px!important;border-radius:16px!important}
  h1{font-size:clamp(1.7rem,8vw,2.35rem)!important}
  h2{font-size:1.3rem!important}
  .onboarding-card,.card,.kpi{padding:16px!important}
  .catalogue-title-row,.onboarding-section-head,.onboarding-actions{align-items:stretch!important;flex-direction:column!important;gap:12px!important}
  .onboarding-actions button,.onboarding-item-actions button,.catalogue-title-row a{width:100%!important}
  .supplier-item-row{grid-template-columns:1fr!important;padding:14px!important}
  .supplier-item-row .item-remove-btn{position:static!important;width:44px!important;justify-self:end!important}
  dialog,.cm-search-dialog{width:calc(100% - 24px)!important;max-width:none!important;margin:12px!important}
}
@media (max-width:420px){
  .shell,.page,.onboarding-main{padding-left:10px!important;padding-right:10px!important}
  .card,.onboarding-card,.kpi{border-radius:14px!important}
}