/* STLBEAST Main V421 — Product Gallery Image Fix
   Purpose: make product images look large, premium, and usable on mobile
   without the tiny-placeholder feel from overly padded gallery stages.
*/

.stlb421-gallery-panel{
  gap:0 !important;
}

.stlb421-main-render{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(300px,58vw,640px) !important;
  height:min(58vw,640px) !important;
  padding:clamp(12px,1.8vw,22px) !important;
}

.stlb421-main-render::after{
  content:'';
  position:absolute;
  inset:auto 8% 3% 8%;
  height:22%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(14,165,233,.22),rgba(14,165,233,0) 65%);
  filter:blur(16px);
  opacity:.95;
}

.stlb421-main-render img[data-stlb-v372-main]{
  position:relative;
  z-index:1;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  border:0 !important;
  filter:drop-shadow(0 28px 42px rgba(0,0,0,.48));
}

.stlb421-angle-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px !important;
  padding:14px !important;
}

.stlb421-thumb{
  appearance:none;
  -webkit-appearance:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  border-radius:18px;
  border:1px solid rgba(103,232,249,.14);
  background:linear-gradient(180deg,rgba(10,22,40,.96),rgba(4,10,20,.98));
  padding:10px;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.stlb421-thumb:hover,
.stlb421-thumb.is-active{
  transform:translateY(-2px);
  border-color:rgba(52,211,255,.55);
  background:linear-gradient(180deg,rgba(12,28,52,.98),rgba(5,14,28,.99));
  box-shadow:0 12px 32px rgba(0,0,0,.30),0 0 0 1px rgba(34,211,238,.12) inset;
}

.stlb421-thumb-image{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:108px;
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 28%,rgba(14,165,233,.14),transparent 48%),
    linear-gradient(180deg,#091427 0%,#030811 100%);
}

.stlb421-thumb-image img{
  width:100%;
  height:108px;
  object-fit:contain !important;
  object-position:center center;
  padding:0 !important;
  background:transparent !important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

.stlb421-thumb-label{
  display:block;
  text-align:center;
  color:#eef8ff;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

@media (max-width:900px){
  .stlb421-main-render{
    min-height:clamp(260px,72vw,480px) !important;
    height:min(72vw,480px) !important;
  }
  .stlb421-angle-grid{
    gap:10px !important;
    padding:12px !important;
  }
  .stlb421-thumb-image,
  .stlb421-thumb-image img{
    min-height:92px;
    height:92px;
  }
}

@media (max-width:640px){
  .stlb421-main-render{
    min-height:clamp(250px,80vw,420px) !important;
    height:min(80vw,420px) !important;
    padding:10px !important;
  }
  .stlb421-angle-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px !important;
    padding:10px !important;
  }
  .stlb421-thumb{
    padding:8px;
    gap:8px;
    border-radius:14px;
  }
  .stlb421-thumb-image,
  .stlb421-thumb-image img{
    min-height:72px;
    height:72px;
    border-radius:10px;
  }
  .stlb421-thumb-label{
    font-size:.64rem;
    letter-spacing:.10em;
  }
}
