/* THE BACON BIN — REV275D ALIGNMENT + ALPHA SMOOTHING
   Product-page consolidation, optical gallery arrows, consistent content rails,
   restored full-width title glass, lighter site chrome, and smoother feather overlays. */

:root{
  --bb-rail-max:1380px;
  --bb-rail-width:min(var(--bb-rail-max),94vw);
}

/* =========================================================
   1) PRODUCT GALLERY — lock the box and draw the chevron geometrically.
   This avoids font-baseline drift and old transform collisions.
   ========================================================= */
html body#bb-test-font-lock.product-page .bb-gallery-nav,
html body#bb-test-font-lock.product-page .bb-gallery-nav:hover,
html body#bb-test-font-lock.product-page .bb-gallery-nav:focus,
html body#bb-test-font-lock.product-page .bb-gallery-nav:focus-visible,
html body#bb-test-font-lock.product-page .bb-gallery-nav:active{
  top:50%!important;
  transform:translateY(-50%)!important;
  translate:none!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  font-size:0!important;
  text-indent:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
html body#bb-test-font-lock.product-page .bb-gallery-nav::before{
  content:"";
  display:block;
  width:11px;
  height:11px;
  border:solid rgba(255,255,255,.96);
  border-width:0 4px 4px 0;
  box-sizing:border-box;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.10));
  transform-origin:center;
}
html body#bb-test-font-lock.product-page .bb-gallery-nav.prev::before{transform:rotate(135deg)!important}
html body#bb-test-font-lock.product-page .bb-gallery-nav.next::before{transform:rotate(-45deg)!important}
html body#bb-test-font-lock.product-page .bb-gallery-nav:hover::before,
html body#bb-test-font-lock.product-page .bb-gallery-nav:focus-visible::before{border-color:#fff;filter:drop-shadow(0 0 7px rgba(232,62,55,.28))}

/* =========================================================
   2) PRODUCT DETAIL COMPOSITION — Bin Index belongs to the product card.
   The gallery becomes a flexible row rather than a hard 650px void.
   ========================================================= */
html body#bb-test-font-lock.product-page .shop-product{
  width:var(--bb-rail-width)!important;
  max-width:var(--bb-rail-max)!important;
  margin:0 auto 30px!important;
  padding:0!important;
  overflow:hidden!important;
  align-items:stretch!important;
  grid-auto-rows:auto!important;
}
html body#bb-test-font-lock.product-page .shop-art.product-photo-stage{
  height:auto!important;
  min-height:520px!important;
  align-self:stretch!important;
  border-bottom:0!important;
}
html body#bb-test-font-lock.product-page .bb-main-product-image-v262{
  top:28px!important;
  bottom:108px!important;
  height:calc(100% - 136px)!important;
}
html body#bb-test-font-lock.product-page .shop-product>.bin-index{
  grid-column:1/-1!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
  padding:30px clamp(28px,4vw,58px) 38px!important;
  background:linear-gradient(180deg,rgba(10,12,14,.91),rgba(6,7,9,.96))!important;
  border-top:1px solid rgba(255,255,255,.072)!important;
  border-bottom:0!important;
}
html body#bb-test-font-lock.product-page .shop-product>.bin-index h2{
  margin:0 0 20px!important;
  font-size:clamp(21px,2vw,30px)!important;
  line-height:1.12!important;
}
html body#bb-test-font-lock.product-page .shop-product>.bin-index .product-spec-grid{
  border:1px solid rgba(255,255,255,.045)!important;
  background:rgba(255,255,255,.035)!important;
}

/* Collector Journal now shares the exact product/discovery rail. */
html body#bb-test-font-lock.product-page .bb-product-journal{
  width:var(--bb-rail-width)!important;
  max-width:var(--bb-rail-max)!important;
  margin:26px auto 30px!important;
  box-sizing:border-box!important;
  padding:clamp(24px,3vw,38px)!important;
  border-left:1px solid rgba(224,57,50,.48)!important;
}
html body#bb-test-font-lock.product-page .bb-journal-head,
html body#bb-test-font-lock.product-page .bb-journal-layout{min-width:0!important}

/* Related Finds — remove the stray kicker and make the heading a true left anchor. */
html body#bb-test-font-lock.product-page .bb-product-discovery{
  width:var(--bb-rail-width)!important;
  max-width:var(--bb-rail-max)!important;
  box-sizing:border-box!important;
  margin:0 auto!important;
}
html body#bb-test-font-lock.product-page .bb-product-discovery .bb-discovery-group:first-child .catalog-kicker{display:none!important}
html body#bb-test-font-lock.product-page .bb-product-discovery .bb-discovery-group:first-child .bb-discovery-head{
  justify-content:flex-start!important;
  align-items:center!important;
  padding:0 14px 13px!important;
}
html body#bb-test-font-lock.product-page .bb-product-discovery .bb-discovery-group:first-child .bb-discovery-head h2{
  margin:0!important;
  text-align:left!important;
}

/* =========================================================
   3) UNIFIED TITLE GLASS — keep Rev275A thin height + texture,
   but restore the earlier full left/right span instead of clipped/faded sides.
   ========================================================= */
html body#bb-test-font-lock.bb-unified-title-page:not(.category-page):not(.arcade-page) .bb-unified-page-hero{
  width:min(1380px,calc(100% - 56px))!important;
}
html body#bb-test-font-lock.bb-unified-title-page:not(.category-page):not(.arcade-page) .bb-unified-page-hero::after{
  top:0!important;
  bottom:0!important;
  left:50%!important;
  width:100vw!important;
  transform:translateX(-50%)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  background:
    radial-gradient(ellipse 34% 140% at 17% -28%,rgba(232,57,51,.085) 0%,rgba(232,57,51,.022) 44%,transparent 76%),
    radial-gradient(ellipse 31% 125% at 87% 130%,rgba(108,112,121,.050) 0%,transparent 70%),
    linear-gradient(112deg,rgba(255,255,255,.012) 0%,transparent 24%,rgba(255,255,255,.026) 39%,transparent 54%,rgba(215,53,48,.012) 76%,transparent 100%),
    linear-gradient(180deg,rgba(12,13,15,.79),rgba(7,8,10,.70) 54%,rgba(4,5,7,.82))!important;
  border-top:1px solid rgba(255,255,255,.040)!important;
  border-bottom:1px solid rgba(255,255,255,.050)!important;
}

/* =========================================================
   4) SITE CHROME — one more notch of transparency.
   ========================================================= */
html body:not(.bb-cabinet-embed) .bb-site-header{
  background:
    radial-gradient(ellipse 38% 130% at 15% -35%,rgba(215,53,48,.060) 0%,rgba(215,53,48,.014) 43%,transparent 73%),
    radial-gradient(ellipse 36% 100% at 90% 140%,rgba(128,132,140,.042) 0%,transparent 68%),
    linear-gradient(118deg,rgba(31,34,39,.66) 0%,rgba(12,14,17,.64) 24%,rgba(4,5,7,.72) 52%,rgba(15,17,20,.66) 78%,rgba(7,8,10,.72) 100%)!important;
  -webkit-backdrop-filter:blur(21px) saturate(1.09)!important;
  backdrop-filter:blur(21px) saturate(1.09)!important;
}
html body:not(.bb-cabinet-embed) .bb-modern-footer,
html body:not(.bb-cabinet-embed) footer.shop-footer{
  background:
    radial-gradient(ellipse 42% 86% at 10% -8%,rgba(217,52,47,.115) 0%,rgba(217,52,47,.026) 40%,transparent 71%),
    radial-gradient(ellipse 45% 90% at 92% 112%,rgba(126,130,138,.070) 0%,rgba(126,130,138,.018) 45%,transparent 73%),
    linear-gradient(112deg,transparent 0%,rgba(255,255,255,.012) 24%,rgba(255,255,255,.034) 36%,transparent 50%,rgba(215,53,48,.013) 72%,transparent 100%),
    linear-gradient(160deg,rgba(24,27,31,.61) 0%,rgba(8,10,13,.62) 33%,rgba(3,4,6,.70) 61%,rgba(15,17,20,.62) 100%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.11)!important;
  backdrop-filter:blur(26px) saturate(1.11)!important;
}

/* =========================================================
   5) SMOOTH ALPHA / FEATHER PASS
   Keep source art crisp. Feather with long, multi-stop overlay ramps.
   ========================================================= */
html body#bb-test-font-lock.home-page-fade .home-ambient-video-shell::after,
html body#bb-test-font-lock.shop-landing-page::after,
html body#bb-test-font-lock.cart-page::after,
html body#bb-test-font-lock.category-page::after,
html body#bb-test-font-lock.arcade-hub-page .bb-arcade-poster-main::after,
html body#bb-test-font-lock.contact-page .bb-contact-shell::before{
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform:translateZ(0);
}

/* Category artwork keeps each category's own source/mask; this overlay only
   adds a longer optical dissolve at the visible perimeter. */
html body#bb-test-font-lock.category-page::after{
  background:
    linear-gradient(90deg,#050506 0%,rgba(5,5,6,.88) 2%,rgba(5,5,6,.68) 5%,rgba(5,5,6,.44) 9%,rgba(5,5,6,.25) 14%,rgba(5,5,6,.12) 21%,rgba(5,5,6,.045) 31%,rgba(5,5,6,.02) 42%,rgba(5,5,6,.02) 58%,rgba(5,5,6,.045) 69%,rgba(5,5,6,.12) 79%,rgba(5,5,6,.25) 86%,rgba(5,5,6,.44) 91%,rgba(5,5,6,.68) 95%,rgba(5,5,6,.88) 98%,#050506 100%),
    linear-gradient(180deg,rgba(5,5,6,.30) 0%,rgba(5,5,6,.17) 8%,rgba(5,5,6,.075) 18%,rgba(5,5,6,.025) 31%,transparent 45%,transparent 58%,rgba(5,5,6,.08) 70%,rgba(5,5,6,.22) 80%,rgba(5,5,6,.48) 89%,rgba(5,5,6,.76) 95%,#050506 100%)!important;
}

/* Longer fade curve for the restored Arcade wiring. */
html body#bb-test-font-lock.arcade-hub-page .bb-arcade-poster-main::after{
  -webkit-mask-image:radial-gradient(ellipse 64% 61% at 50% 29%,#000 0 34%,rgba(0,0,0,.98) 43%,rgba(0,0,0,.91) 52%,rgba(0,0,0,.78) 61%,rgba(0,0,0,.60) 70%,rgba(0,0,0,.40) 79%,rgba(0,0,0,.22) 87%,rgba(0,0,0,.09) 94%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 64% 61% at 50% 29%,#000 0 34%,rgba(0,0,0,.98) 43%,rgba(0,0,0,.91) 52%,rgba(0,0,0,.78) 61%,rgba(0,0,0,.60) 70%,rgba(0,0,0,.40) 79%,rgba(0,0,0,.22) 87%,rgba(0,0,0,.09) 94%,transparent 100%)!important;
}

/* Contact's atmospheric art gets the same long-tail alpha ramp. */
html body#bb-test-font-lock.contact-page .bb-contact-shell::before{
  -webkit-mask-image:radial-gradient(ellipse 78% 75% at 50% 45%,#000 0 38%,rgba(0,0,0,.98) 47%,rgba(0,0,0,.90) 57%,rgba(0,0,0,.75) 67%,rgba(0,0,0,.56) 76%,rgba(0,0,0,.36) 84%,rgba(0,0,0,.18) 91%,rgba(0,0,0,.06) 96%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 78% 75% at 50% 45%,#000 0 38%,rgba(0,0,0,.98) 47%,rgba(0,0,0,.90) 57%,rgba(0,0,0,.75) 67%,rgba(0,0,0,.56) 76%,rgba(0,0,0,.36) 84%,rgba(0,0,0,.18) 91%,rgba(0,0,0,.06) 96%,transparent 100%)!important;
}

@media(max-width:1000px){
  html body#bb-test-font-lock.product-page .shop-art.product-photo-stage{min-height:500px!important}
}
@media(max-width:720px){
  :root{--bb-rail-width:calc(100% - 28px)}
  html body#bb-test-font-lock.product-page .shop-product{width:100%!important;border-left:0!important;border-right:0!important}
  html body#bb-test-font-lock.product-page .shop-art.product-photo-stage{min-height:480px!important}
  html body#bb-test-font-lock.product-page .shop-product>.bin-index{padding:24px 18px 28px!important}
  html body#bb-test-font-lock.product-page .bb-product-journal{width:calc(100% - 28px)!important;margin:18px auto 24px!important}
  html body#bb-test-font-lock.product-page .bb-product-discovery{width:100%!important;padding-left:18px!important;padding-right:18px!important}
  html body#bb-test-font-lock.bb-unified-title-page:not(.category-page):not(.arcade-page) .bb-unified-page-hero{width:calc(100% - 28px)!important}
}

/* Environment-specific long alpha ramps: same apparent darkness, less visible banding. */
html body#bb-test-font-lock.shop-landing-page::after{
  background:
    radial-gradient(ellipse 70% 64% at 50% 30%,rgba(0,0,0,.16) 0%,rgba(0,0,0,.18) 28%,rgba(0,0,0,.22) 42%,rgba(0,0,0,.30) 53%,rgba(0,0,0,.42) 63%,rgba(0,0,0,.56) 73%,rgba(0,0,0,.70) 82%,rgba(0,0,0,.82) 89%,rgba(0,0,0,.92) 95%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.41) 8%,rgba(0,0,0,.33) 16%,rgba(0,0,0,.28) 28%,rgba(0,0,0,.27) 48%,rgba(0,0,0,.31) 61%,rgba(0,0,0,.40) 72%,rgba(0,0,0,.56) 82%,rgba(0,0,0,.74) 91%,#000 100%)!important;
}
html body#bb-test-font-lock.cart-page::after{
  background:
    radial-gradient(ellipse 63% 58% at 50% 30%,rgba(5,5,5,.07) 0%,rgba(5,5,5,.10) 25%,rgba(5,5,5,.15) 38%,rgba(5,5,5,.23) 49%,rgba(5,5,5,.34) 59%,rgba(5,5,5,.47) 68%,rgba(5,5,5,.61) 76%,rgba(5,5,5,.74) 83%,rgba(5,5,5,.86) 90%,rgba(5,5,5,.94) 96%,#050505 100%),
    linear-gradient(90deg,#050505 0%,rgba(5,5,5,.89) 2%,rgba(5,5,5,.73) 6%,rgba(5,5,5,.55) 10%,rgba(5,5,5,.38) 15%,rgba(5,5,5,.23) 21%,rgba(5,5,5,.13) 28%,rgba(5,5,5,.08) 36%,rgba(5,5,5,.08) 64%,rgba(5,5,5,.13) 72%,rgba(5,5,5,.23) 79%,rgba(5,5,5,.38) 85%,rgba(5,5,5,.55) 90%,rgba(5,5,5,.73) 94%,rgba(5,5,5,.89) 98%,#050505 100%),
    linear-gradient(180deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,.42) 8%,rgba(5,5,5,.30) 16%,rgba(5,5,5,.22) 27%,rgba(5,5,5,.18) 42%,rgba(5,5,5,.19) 55%,rgba(5,5,5,.27) 67%,rgba(5,5,5,.41) 77%,rgba(5,5,5,.61) 86%,rgba(5,5,5,.82) 94%,#050505 100%)!important;
}
html body#bb-test-font-lock.bits-page .bits-video-environment-v239::after{
  background:
    radial-gradient(ellipse 74% 74% at 50% 42%,transparent 0%,rgba(1,1,1,.025) 31%,rgba(1,1,1,.07) 44%,rgba(1,1,1,.15) 55%,rgba(1,1,1,.27) 65%,rgba(1,1,1,.42) 75%,rgba(1,1,1,.60) 84%,rgba(1,1,1,.77) 91%,rgba(1,1,1,.91) 97%,#010101 100%),
    linear-gradient(90deg,#010101 0%,rgba(1,1,1,.88) 2%,rgba(1,1,1,.68) 6%,rgba(1,1,1,.48) 11%,rgba(1,1,1,.31) 17%,rgba(1,1,1,.18) 23%,rgba(1,1,1,.08) 31%,transparent 40%,transparent 60%,rgba(1,1,1,.08) 69%,rgba(1,1,1,.18) 77%,rgba(1,1,1,.31) 83%,rgba(1,1,1,.48) 89%,rgba(1,1,1,.68) 94%,rgba(1,1,1,.88) 98%,#010101 100%),
    linear-gradient(180deg,rgba(1,1,1,.55) 0%,rgba(1,1,1,.38) 8%,rgba(1,1,1,.23) 17%,rgba(1,1,1,.12) 28%,rgba(1,1,1,.04) 40%,transparent 50%,rgba(1,1,1,.05) 62%,rgba(1,1,1,.16) 72%,rgba(1,1,1,.34) 82%,rgba(1,1,1,.58) 91%,rgba(1,1,1,.82) 97%,#010101 100%)!important;
  transform:translateZ(0)!important;
}