/* STLBEAST V380 — faded product background inside header.
   Purpose: add life to the header without making logo/search/nav unreadable. */
.stlb376-header{
  --stlb380-header-fade:.145;
}
.stlb376-header::after{
  content:"";
  position:absolute;
  inset:-24px 0 -18px;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,8,16,.98) 0%,rgba(2,8,16,.72) 25%,rgba(2,8,16,.40) 50%,rgba(2,8,16,.76) 78%,rgba(2,8,16,.98) 100%),
    radial-gradient(circle at 18% 50%,rgba(34,227,255,.20),transparent 24%),
    radial-gradient(circle at 78% 48%,rgba(255,79,203,.18),transparent 30%),
    url('/assets/images/products/v377-wraith-hollow-lantern/wraith-hollow-lantern-front-v377.png'),
    url('/assets/images/products/v363-corrected-renders/iron-colossus-mech-bot-warrior-front-v363.webp'),
    url('/assets/images/products/v338-assigned-renders/low-battery-bot-front-v338.webp');
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-position:center center,12% 48%,82% 50%,6% 54%,78% 50%,94% 52%;
  background-size:cover,420px 220px,520px 260px,190px auto,205px auto,118px auto;
  opacity:var(--stlb380-header-fade);
  filter:saturate(1.18) contrast(1.08);
  mix-blend-mode:screen;
}
.stlb376-header::before{z-index:0}
.stlb376-header-lines{z-index:2;opacity:.72}
.stlb376-header-wrap{position:relative;z-index:4}
.stlb376-mainbar,.stlb376-navrail{
  background-blend-mode:screen,normal;
  backdrop-filter:blur(14px) saturate(1.08);
}
.stlb376-mainbar{
  box-shadow:0 12px 34px rgba(0,0,0,.34),inset 0 0 34px rgba(34,227,255,.07),0 0 42px rgba(255,79,203,.07);
}
.stlb376-brand{
  position:relative;
}
.stlb376-brand::before{
  content:"";
  position:absolute;
  inset:-6px -10px;
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(2,8,16,.55),rgba(2,8,16,.18),rgba(2,8,16,.50)),
    radial-gradient(circle at 30% 50%,rgba(34,227,255,.13),transparent 46%),
    radial-gradient(circle at 84% 46%,rgba(255,79,203,.10),transparent 50%);
  border:1px solid rgba(34,227,255,.12);
  z-index:-1;
}
@media(max-width:1180px){
  .stlb376-header{--stlb380-header-fade:.115}
  .stlb376-header::after{
    background-position:center center,14% 45%,82% 50%,4% 48%,90% 50%,96% 60%;
    background-size:cover,350px 180px,360px 190px,145px auto,150px auto,88px auto;
  }
}
@media(max-width:820px){
  .stlb376-header{--stlb380-header-fade:.085}
  .stlb376-header::after{
    inset:-10px 0;
    background-position:center center,18% 40%,82% 55%,3% 34%,94% 45%,96% 70%;
    background-size:cover,250px 140px,260px 150px,100px auto,105px auto,65px auto;
  }
  .stlb376-header-lines{opacity:.54}
}
@media(max-width:520px){
  .stlb376-header{--stlb380-header-fade:.06}
  .stlb376-header::after{background-image:linear-gradient(90deg,rgba(2,8,16,.96),rgba(2,8,16,.68),rgba(2,8,16,.96)),radial-gradient(circle at 50% 42%,rgba(34,227,255,.18),transparent 34%),url('/assets/images/products/v377-wraith-hollow-lantern/wraith-hollow-lantern-front-v377.png');background-position:center,center,96% 42%;background-size:cover,280px 140px,92px auto}
}