.form-ad-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1000px;
  margin: 0;
  text-align: left;
  padding: 0;
  align-self: flex-start;
}

.google-form {
  flex: 2;
  width: 100%;
  min-width: 300px;
  height: 650px;
  border: none;
  display:block;
  margin:0;
}

.desktop-ad {
  flex: 1 !important;
  min-width: 200px !important;
  max-width: 300px !important;
  margin-left: 50px !important;
min-height: 250px;
}
#layoutContainer.layout-side-by-side #sideBySideAd {
  display: block !important;
}
#all {
  margin-bottom: 120px; 
}

.category-wrapper {
  max-height: 76vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  padding-bottom: 96px;
  scroll-padding-bottom: 96px;
}

#layoutContainer.layout-side-by-side .category-wrapper {
  max-height: unset;
  overflow: visible;
  padding-right: 0;
}


.layout-side-by-side .category-content.active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  grid-auto-rows: 110px; /* each row fixed height */
  gap: 10px;
}
#layoutContainer.layout-side-by-side .left-panel {
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding-right: 10px;
  box-sizing: border-box;
}

/* === 2026 desktop polish === */

.hero-shell {
  max-width: none;
}

#layoutContainer {
  gap: 18px;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

#layoutContainer.layout-default .left-panel,
#layoutContainer.layout-default .right-panel {
  width: 100%;
}

#layoutContainer.layout-side-by-side .left-panel,
#layoutContainer.layout-side-by-side .right-panel {
  min-width: 0;
}

#layoutContainer.layout-side-by-side .left-panel {
  position: sticky;
  top: 16px;
  align-self: flex-start;
  max-height: calc(100vh - 32px);
  padding-right: 14px;
}

#layoutContainer.layout-side-by-side .right-panel {
  min-height: 100%;
}

.hero-actions {
  justify-content: flex-start;
}

.site-footer-inner {
  max-width: none;
}

@media (min-width: 900px) {
  body {
    padding-left: 6px;
    padding-right: 6px;
  }

  .page-shell,
  .hero-shell,
  .calculator-shell,
  .site-footer {
    width: 95vw;
    max-width: none;
    overflow-x: clip;
  }

  .container,
  .hero-banner,
  .disclaimer-instructions-bar,
  .site-footer {
    width: 100%;
  }

  .pet-ability-layout {
    align-items: start;
  }

  .category-wrapper:has(.category-content.active #petAbilityButtons) {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .category-content.active:has(#petAbilityButtons) {
    min-height: auto;
    overflow: visible;
  }

  .pet-ability-left,
  .pet-ability-right,
  #petAbilityOutput,
  #petAbilityOutput .ability-controls,
  .ability-controls {
    min-height: 0;
  }

  .pet-ability-left {
    align-self: start;
  }

  .pet-ability-right {
    padding-bottom: 16px;
  }

  #petAbilityButtons {
    max-height: 840px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media (min-width: 900px) and (max-width: 1079px) {
  .pet-ability-right {
    max-height: 76vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-gutter: stable;
  }

  #petAbilityOutput .ability-controls,
  .ability-controls {
    position: static;
  }
}