/* STLBEAST V387 — header logo empty-box + hero overflow fix.
   Fixes:
   1) logo appearing as a small/left graphic inside a huge empty brand box
   2) homepage hero/collage clipping off the left side
   3) validation card being cut off on smaller screens
   Safe CSS-only patch: no data, checkout, PayPal, downloads, or product ZIP changes. */

/* HEADER LOGO: shrink-wrap the logo plate instead of stretching a giant empty box. */
.stlb376-header .stlb376-brand{
  width:auto !important;
  max-width:100% !important;
  justify-self:center !important;
  margin:0 auto !important;
  display:inline-flex !important;
  min-height:0 !important;
  padding:7px 10px !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 35% 50%, rgba(34,227,255,.16), transparent 50%),
    radial-gradient(circle at 72% 50%, rgba(255,79,203,.10), transparent 46%),
    linear-gradient(135deg, rgba(7,20,38,.55), rgba(5,11,25,.42)) !important;
}
.stlb376-header .stlb376-brand-mark{
  width:auto !important;
  max-width:100% !important;
  justify-content:center !important;
}
.stlb376-header .stlb376-brand img{
  width:min(640px,96vw) !important;
  max-width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* On large screens, let search/actions share space without forcing the logo cell to create dead space. */
.stlb376-header .stlb376-mainbar{
  grid-template-columns:auto minmax(280px,1fr) auto !important;
  justify-items:center !important;
  align-items:center !important;
}
.stlb376-header .stlb376-search{justify-self:stretch !important;}
.stlb376-header .stlb376-cta-cluster{justify-self:end !important;}

/* HERO: keep the feature cluster inside the viewport. */
.stlb381-hero-stage,
.stlb375-hero-stage{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}
.stlb381-hero-feature{
  width:min(100%, 920px) !important;
  max-width:100% !important;
  margin-inline:auto !important;
  box-sizing:border-box !important;
  padding-inline:0 !important;
  grid-template-columns:minmax(0, 1.25fr) minmax(190px, .75fr) !important;
}
.stlb381-main-product{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.stlb381-main-product img{
  width:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.stlb381-validated-card,
.stlb375-validated-card{
  box-sizing:border-box !important;
  max-width:100% !important;
}

/* Collage should support the hero, not shove it outside the viewport. */
.stlb381-collage{
  width:min(100%, 880px) !important;
  max-width:100% !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  box-sizing:border-box !important;
  padding-inline:8px !important;
}
.stlb381-collage-item{
  max-width:100% !important;
}

/* Tablet and mobile: stack the hero cleanly so nothing gets clipped. */
@media(max-width:980px){
  .stlb376-header .stlb376-mainbar{
    grid-template-columns:1fr !important;
    justify-items:stretch !important;
  }
  .stlb376-header .stlb376-brand{
    justify-self:center !important;
  }
  .stlb376-header .stlb376-brand img{
    width:min(600px,96vw) !important;
  }
  .stlb376-header .stlb376-search,
  .stlb376-header .stlb376-cta-cluster{
    justify-self:stretch !important;
  }

  .stlb381-hero-stage{
    min-height:auto !important;
    padding:10px 0 0 !important;
  }
  .stlb381-hero-feature{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
    max-width:620px !important;
    margin-inline:auto !important;
  }
  .stlb381-main-product{
    padding:10px !important;
  }
  .stlb381-main-product img{
    height:auto !important;
    max-height:390px !important;
  }
  .stlb381-validated-card{
    width:100% !important;
    margin:0 !important;
    padding:14px 16px !important;
  }
  .stlb381-collage{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    inset:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:620px !important;
    margin:12px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    padding-inline:0 !important;
  }
  .stlb381-collage-item{
    transform:none !important;
    aspect-ratio:1.12/1 !important;
  }
  .stlb381-collage-item.item-0{display:none !important;}
}

/* Small phones: keep the logo readable and the Wraith feature compact. */
@media(max-width:520px){
  .stlb376-header .stlb376-brand{
    padding:5px 6px !important;
    border-radius:14px !important;
  }
  .stlb376-header .stlb376-brand img{
    width:min(360px,96vw) !important;
  }
  .stlb381-main-product img{
    max-height:280px !important;
  }
  .stlb381-validated-card{
    text-align:left !important;
  }
  .stlb381-validated-card b{
    font-size:20px !important;
  }
  .stlb381-validated-card span{
    font-size:11px !important;
  }
  .stlb381-collage{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .stlb381-collage-item:nth-child(n+4){
    display:none !important;
  }
}
@media(max-width:390px){
  .stlb376-header .stlb376-brand img{
    width:min(328px,95vw) !important;
  }
}