/* =========================================================
   HOSTING + DESIGN — FORCE SEPARATE HORIZONTAL PANELS
   No visual redesign; only horizontal panel behavior
   ========================================================= */

html.horizontal-sections-enabled main{
  width:max-content !important;
  min-width:max-content !important;
  max-width:none !important;
}

/* Every top-level section is exactly one viewport panel. */
html.horizontal-sections-enabled main > .section[id]{
  flex:0 0 100vw !important;
  width:100vw !important;
  min-width:100vw !important;
  max-width:100vw !important;
  box-sizing:border-box !important;
  isolation:isolate;
}

/* Explicitly lock Hosting and Design to different panels. */
html.horizontal-sections-enabled main > #hosting,
html.horizontal-sections-enabled main > #design{
  flex:0 0 100vw !important;
  width:100vw !important;
  min-width:100vw !important;
  max-width:100vw !important;
  overflow-x:hidden !important;
}

/* Keep each short section visually centered in its own screen. */
html.horizontal-sections-enabled main > #hosting,
html.horizontal-sections-enabled main > #design{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

/* Mobile/tablet: still one complete horizontal panel at a time. */
@media(max-width:991px){
  html.horizontal-sections-enabled main > #hosting,
  html.horizontal-sections-enabled main > #design{
    justify-content:flex-start !important;
  }
}