/* CloverClipper product-page layout hotfix — 2026-09-24 */
html,body{max-width:100%;overflow-x:hidden}

/* Keep the product logo compact even if older/global CSS is cached or missing. */
.clipper-product-logo{
  width:min(100%,360px);
  justify-self:end;
  overflow:hidden;
}
.clipper-product-logo img{
  display:block!important;
  width:120px!important;
  max-width:40vw!important;
  height:120px!important;
  max-height:40vw!important;
  object-fit:contain!important;
  margin:0 auto 14px!important;
}

/* Never allow hero content to force a wider mobile viewport. */
.clipper-product-grid>*{min-width:0}
.clipper-product-grid .lead{overflow-wrap:anywhere}
.home-chip-row{max-width:100%}

/* The shared mobile drawer has many links. Make the drawer itself fit the
   viewport and let its link area scroll instead of growing off-screen. */
@media(max-width:900px){
  .site-mobile-menu{
    width:min(88vw,340px)!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    padding:14px!important;
  }
  .site-mobile-menu-links{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:12px 2px!important;
    gap:6px!important;
  }
  .site-mobile-menu-links a{
    padding:10px 12px!important;
    line-height:1.2!important;
  }
  .site-mobile-menu-footer{
    flex:0 0 auto!important;
    margin-top:8px!important;
  }

  .clipper-product-hero{padding:44px 0 30px!important}
  .clipper-product-grid{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }
  .clipper-product-grid h1{
    font-size:clamp(38px,11vw,54px)!important;
    line-height:1!important;
    letter-spacing:-1.6px;
  }
  .clipper-product-logo{
    justify-self:stretch;
    width:100%;
    max-width:100%;
    padding:22px!important;
  }
  .clipper-product-logo img{
    width:96px!important;
    height:96px!important;
    max-width:96px!important;
    max-height:96px!important;
  }
  .clipper-feature-grid,.clipper-proof-grid{grid-template-columns:1fr 1fr!important}
}

@media(max-width:620px){
  .clipper-product-hero{padding-top:32px!important}
  .clipper-product-grid h1{font-size:clamp(34px,10vw,46px)!important}
  .clipper-feature-grid,.clipper-proof-grid{grid-template-columns:1fr!important}
  .clipper-pwyw-card{padding:22px!important}
}