
/* STLBEAST Main V407 — Product Visual Fit + No Generic Bridge Image
   Purpose: remove the generic white tech/HUB image from STLBEAST.com and tighten oversized product imagery.
*/

/* Kill/replace the generic light bridge visual if older markup ever appears. */
.stlb403-bridge-visual{
  display:none !important;
}

.stlb407-bridge-product-strip{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px;
  border-radius:30px;
  border:1px solid rgba(125,211,252,.22);
  background:
    radial-gradient(circle at 12% 20%,rgba(14,165,233,.14),transparent 34%),
    radial-gradient(circle at 88% 14%,rgba(139,92,246,.11),transparent 30%),
    linear-gradient(135deg,rgba(15,23,42,.92),rgba(3,7,18,.88));
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.stlb407-bridge-product-strip a{
  position:relative;
  display:grid;
  gap:8px;
  min-height:0;
  padding:10px;
  border-radius:22px;
  text-decoration:none;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  border:1px solid rgba(125,211,252,.16);
}

.stlb407-bridge-product-strip img{
  display:block;
  width:100%;
  height:clamp(130px,16vw,205px);
  object-fit:contain;
  object-position:center;
  padding:6px;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 28%,rgba(14,165,233,.16),transparent 46%),
    linear-gradient(180deg,#081426,#030711);
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.45));
}

.stlb407-bridge-product-strip span{
  display:inline-flex;
  width:max-content;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(14,165,233,.12);
  color:#67e8f9;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:950;
}

.stlb407-bridge-product-strip b{
  display:block;
  color:#ffffff;
  font-size:1rem;
  line-height:1.1;
}

/* Product grids: reduce oversized images and keep cards premium. */
.stlb333-showcase-grid,
.stlb353-feature-grid,
.products-grid,
.grid.products{
  align-items:stretch !important;
  gap:clamp(14px,2vw,22px) !important;
}

.card.stlb316-card,
.stlb333-product-card,
.stlb375-product-card{
  overflow:hidden !important;
  border-radius:22px !important;
}

.card-img,
.stlb375-product-media{
  aspect-ratio:16 / 10 !important;
  height:clamp(168px,18vw,245px) !important;
  min-height:0 !important;
  max-height:245px !important;
  padding:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% 25%,rgba(14,165,233,.16),transparent 46%),
    linear-gradient(180deg,#081426,#030711) !important;
}

.card-img img,
.stlb375-product-media img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  background:transparent !important;
  transform:none !important;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.42)) !important;
}

/* Keep card copy tighter so product feeds do not feel like stacked billboards. */
.card-body{
  padding:14px !important;
  gap:7px !important;
}

.stlb333-card-top,
.meta{
  gap:6px !important;
}

.card-body h3{
  margin:.2rem 0 .1rem !important;
  font-size:clamp(1rem,1.25vw,1.15rem) !important;
  min-height:auto !important;
}

.card-body p{
  margin:0 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  line-height:1.45 !important;
}

.stlb333-actions{
  margin-top:8px !important;
}

/* Product pages: keep hero images strong but not absurdly tall. */
.stlb335-main-render{
  min-height:0 !important;
  height:min(58vw,560px) !important;
  max-height:560px !important;
}

.stlb335-main-render img{
  padding:10px !important;
  max-height:100% !important;
}

/* Mobile product feed: image thumbnails should be premium, not massive. */
@media(max-width:680px){
  .stlb403-ecosystem-bridge{
    padding:22px 0 !important;
  }
  .stlb403-bridge-grid{
    gap:12px !important;
  }
  .stlb403-bridge-copy,
  .stlb403-bridge-cards,
  .stlb407-bridge-product-strip{
    border-radius:22px !important;
  }
  .stlb407-bridge-product-strip{
    grid-template-columns:1fr !important;
    padding:10px !important;
  }
  .stlb407-bridge-product-strip a{
    grid-template-columns:96px minmax(0,1fr);
    align-items:center;
    gap:10px;
  }
  .stlb407-bridge-product-strip img{
    grid-row:1 / span 2;
    height:92px;
    padding:4px;
  }
  .stlb407-bridge-product-strip span,
  .stlb407-bridge-product-strip b{
    align-self:end;
  }
  .stlb407-bridge-product-strip b{
    align-self:start;
  }

  .stlb333-showcase-grid,
  .stlb353-feature-grid,
  .products-grid,
  .grid.products{
    gap:10px !important;
  }

  .card-img,
  .stlb375-product-media{
    height:148px !important;
    max-height:148px !important;
    aspect-ratio:auto !important;
    padding:8px !important;
  }

  .card-body{
    padding:11px 12px 12px !important;
  }

  .card-body h3{
    font-size:.98rem !important;
    line-height:1.12 !important;
  }

  .card-body p{
    -webkit-line-clamp:2 !important;
    font-size:.84rem !important;
  }

  .stlb333-chip,
  .stlb333-sku,
  .meta span{
    font-size:.62rem !important;
    padding:4px 6px !important;
  }

  .stlb333-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important;
  }
  .stlb333-note{
    display:none !important;
  }
  .stlb333-actions .mini{
    width:100% !important;
    justify-content:center !important;
  }

  .stlb335-main-render{
    height:min(92vw,420px) !important;
    max-height:420px !important;
  }
}
