/* STLBEAST Main V412 — Catalog/Category Layout Fix
   Fixes overlapping category cards, missing/ugly catalog thumbnail, and light-section contrast.
*/

/* Repair the product-first bridge strip so it does not show a broken/placeholder-looking image. */
.stlb407-bridge-product-strip{
  align-items:stretch !important;
}
.stlb407-bridge-product-strip a{
  min-width:0 !important;
  isolation:isolate !important;
}
.stlb407-bridge-product-strip img{
  object-fit:contain !important;
  background:
    radial-gradient(circle at 50% 26%,rgba(14,165,233,.18),transparent 44%),
    linear-gradient(180deg,#09172a 0%,#030711 100%) !important;
}

/* Main homepage Explore Categories: make the cards feel intentional, not chopped or confusing. */
.stlb375-cats{
  background:
    radial-gradient(circle at 10% 0%,rgba(14,165,233,.08),transparent 28%),
    linear-gradient(180deg,#050b14 0%,#07111f 100%) !important;
}

.stlb375-cat-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}

.stlb375-cat-card{
  min-height:230px !important;
  padding:14px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--accent),transparent 78%),transparent 44%),
    linear-gradient(180deg,rgba(9,18,34,.96),rgba(3,7,16,.99)) !important;
  border:1px solid color-mix(in srgb,var(--accent),transparent 68%) !important;
  box-shadow:0 20px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  overflow:hidden !important;
}

.stlb375-cat-card::after{
  background:
    linear-gradient(180deg,rgba(3,7,16,.05) 0%,rgba(3,7,16,.25) 46%,rgba(3,7,16,.96) 100%) !important;
}

.stlb375-cat-card img{
  position:absolute !important;
  inset:12px !important;
  width:calc(100% - 24px) !important;
  height:calc(100% - 82px) !important;
  max-height:155px !important;
  object-fit:contain !important;
  object-position:center !important;
  opacity:.9 !important;
  transform:none !important;
  filter:saturate(1.06) contrast(1.06) drop-shadow(0 18px 24px rgba(0,0,0,.48)) !important;
}

.stlb375-cat-card span,
.stlb375-cat-card small{
  max-width:100% !important;
  text-wrap:balance !important;
}

.stlb375-cat-card span{
  font-size:clamp(1rem,1.5vw,1.2rem) !important;
  line-height:1.05 !important;
  color:#ffffff !important;
}

.stlb375-cat-card small{
  color:color-mix(in srgb,var(--accent),white 45%) !important;
  font-size:.82rem !important;
  line-height:1.3 !important;
}

/* Validated catalog page: fix white-light section feel and broken category cards. */
.stlb353-category-index,
.stlb353-category-index.section{
  background:
    radial-gradient(circle at 18% 0%,rgba(14,165,233,.10),transparent 32%),
    linear-gradient(180deg,#050b14 0%,#07111f 100%) !important;
  color:#eaf6ff !important;
}

.stlb353-category-index .section-head h2,
.stlb353-category-index .section-head p,
.stlb353-category-index .kicker{
  color:inherit !important;
}

.stlb353-category-index .section-head p{
  color:#a8bdd7 !important;
}

.stlb353-category-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}

.stlb353-category-card{
  position:relative !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  min-width:0 !important;
  overflow:hidden !important;
  border-radius:24px !important;
  border:1px solid rgba(103,232,249,.15) !important;
  background:
    linear-gradient(180deg,rgba(9,18,34,.97),rgba(3,7,16,.99)) !important;
  box-shadow:0 20px 56px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.stlb353-category-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(135deg,rgba(103,232,249,.12),transparent 36%,rgba(139,92,246,.08)) !important;
}

.stlb353-category-img{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:210px !important;
  min-height:0 !important;
  padding:12px !important;
  border:0 !important;
  border-bottom:1px solid rgba(103,232,249,.10) !important;
  background:
    radial-gradient(circle at 50% 24%,rgba(14,165,233,.18),transparent 44%),
    linear-gradient(180deg,#09172a 0%,#030711 100%) !important;
}

.stlb353-category-img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:16px !important;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.48)) !important;
}

.stlb353-category-card > div{
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:16px !important;
  background:transparent !important;
}

.stlb353-category-card > div span{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:rgba(103,232,249,.10) !important;
  border:1px solid rgba(103,232,249,.18) !important;
  color:#93f5ff !important;
  font-size:.68rem !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

.stlb353-category-card h3{
  margin:0 !important;
  color:#ffffff !important;
  font-size:1.08rem !important;
  line-height:1.12 !important;
  text-wrap:balance !important;
}

.stlb353-category-card p{
  margin:0 !important;
  color:#a8bdd7 !important;
  font-size:.92rem !important;
  line-height:1.5 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

.stlb353-category-card a:last-child{
  margin-top:auto !important;
  color:#7ee8ff !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

/* Mobile: stop the overlap. Keep category cards vertical and compact instead of split columns. */
@media(max-width:1180px){
  .stlb375-cat-grid,
  .stlb353-category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:720px){
  .stlb407-bridge-product-strip{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .stlb407-bridge-product-strip a{
    grid-template-columns:112px minmax(0,1fr) !important;
    align-items:center !important;
    min-height:112px !important;
  }

  .stlb407-bridge-product-strip img{
    height:96px !important;
    grid-row:1 / span 2 !important;
  }

  .stlb375-cat-grid,
  .stlb353-category-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .stlb375-cat-card{
    min-height:150px !important;
    border-radius:19px !important;
    padding:13px !important;
  }

  .stlb375-cat-card img{
    inset:10px !important;
    width:calc(100% - 20px) !important;
    height:calc(100% - 68px) !important;
    max-height:96px !important;
    opacity:.82 !important;
  }

  .stlb375-cat-card span{
    font-size:1rem !important;
  }

  .stlb375-cat-card small{
    font-size:.76rem !important;
  }

  .stlb353-category-card{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    border-radius:20px !important;
  }

  .stlb353-category-img{
    width:100% !important;
    height:150px !important;
    min-height:0 !important;
    padding:10px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(103,232,249,.10) !important;
  }

  .stlb353-category-card > div{
    padding:13px !important;
  }

  .stlb353-category-card h3{
    font-size:1rem !important;
  }

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