/* THE BACON BIN — REV275F
   Canonical site chrome + true full-bleed title glass.
   One sticky header, one compact glass footer, social icons in footer,
   category-page footer-bottom correction, and no pseudo-element title clipping. */

:root{
  --bb-chrome-red:#d73530;
  --bb-chrome-line:rgba(255,255,255,.07);
  --bb-chrome-max:1380px;
}

/* =========================================================
   1) ONE NAVBAR EVERYWHERE — sticky on every normal site page.
   ========================================================= */
html body:not(.bb-cabinet-embed) .bb-site-header{
  position:sticky!important;
  position:-webkit-sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  z-index:12000!important;
  flex:0 0 auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
  overflow:visible!important;
  background:
    radial-gradient(ellipse 38% 130% at 15% -35%,rgba(215,53,48,.052) 0%,rgba(215,53,48,.012) 43%,transparent 73%),
    radial-gradient(ellipse 36% 100% at 90% 140%,rgba(128,132,140,.035) 0%,transparent 68%),
    linear-gradient(118deg,rgba(29,32,37,.59) 0%,rgba(11,13,16,.60) 24%,rgba(4,5,7,.69) 52%,rgba(14,16,19,.60) 78%,rgba(7,8,10,.69) 100%)!important;
  -webkit-backdrop-filter:blur(21px) saturate(1.08)!important;
  backdrop-filter:blur(21px) saturate(1.08)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 1px 0 rgba(213,48,45,.12),0 10px 28px rgba(0,0,0,.18)!important;
}

/* Keep page-specific layers from pulling the canonical header back into flow. */
html body.home-page-fade .bb-site-header,
html body.arcade-hub-page>.bb-site-header,
html body.category-page>.bb-site-header{
  position:sticky!important;
  top:0!important;
  z-index:12000!important;
}

/* =========================================================
   2) TRUE FULL-BLEED TITLE GLASS.
   The SECTION is now the glass band. No oversized child/pseudo can be clipped.
   Existing title/copy geometry remains on the established 1380px content rail.
   ========================================================= */
html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:max(28px,calc((100vw - var(--bb-chrome-max))/2))!important;
  padding-right:max(28px,calc((100vw - var(--bb-chrome-max))/2))!important;
  overflow:hidden!important;
  clip-path:none!important;
  background:
    radial-gradient(ellipse 34% 140% at 17% -28%,rgba(232,57,51,.080) 0%,rgba(232,57,51,.020) 44%,transparent 76%),
    radial-gradient(ellipse 31% 125% at 87% 130%,rgba(108,112,121,.046) 0%,transparent 70%),
    linear-gradient(112deg,rgba(255,255,255,.011) 0%,transparent 24%,rgba(255,255,255,.024) 39%,transparent 54%,rgba(215,53,48,.011) 76%,transparent 100%),
    linear-gradient(180deg,rgba(12,13,15,.76),rgba(7,8,10,.67) 54%,rgba(4,5,7,.79))!important;
  border-top:1px solid rgba(255,255,255,.040)!important;
  border-bottom:1px solid rgba(255,255,255,.050)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.06)!important;
  backdrop-filter:blur(20px) saturate(1.06)!important;
}
/* Retire the old clipped pseudo glass entirely. */
html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero::after{
  content:none!important;
  display:none!important;
}
/* Ghost title remains local to the now full-width band. */
html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero::before{
  z-index:0!important;
}
html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-title-wrap,
html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-copy{
  position:relative!important;
  z-index:2!important;
}

@media(max-width:720px){
  html body#bb-test-font-lock.bb-unified-title-page .bb-unified-page-hero{
    width:100%!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
}

/* =========================================================
   3) CATEGORY PAGE HEIGHT — no empty black field under the footer.
   Short categories (G.I. Joe, etc.) keep the footer at the viewport bottom.
   ========================================================= */
html body.category-page:not(.bb-cabinet-embed){
  min-height:100vh!important;
  min-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
}
html body.category-page:not(.bb-cabinet-embed) > .bb-site-header{flex:0 0 auto!important}
html body.category-page:not(.bb-cabinet-embed) > main{
  flex:1 0 auto!important;
  width:100%!important;
}
html body.category-page:not(.bb-cabinet-embed) > .bb-modern-footer,
html body.category-page:not(.bb-cabinet-embed) > footer.shop-footer{
  margin-top:auto!important;
  flex:0 0 auto!important;
}

/* =========================================================
   4) ONE COMPACT GLASS FOOTER EVERYWHERE.
   Same geometry on home/shop/categories/products/info pages.
   ========================================================= */
html body:not(.bb-cabinet-embed) .bb-modern-footer,
html body:not(.bb-cabinet-embed) footer.shop-footer{
  position:relative!important;
  z-index:80!important;
  clear:both!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin-left:0!important;
  margin-right:0!important;
  display:grid!important;
  grid-template-columns:minmax(220px,1.05fr) minmax(430px,1.55fr) minmax(260px,.95fr)!important;
  align-items:start!important;
  column-gap:clamp(22px,3vw,40px)!important;
  row-gap:18px!important;
  padding:28px clamp(22px,4vw,64px) 13px!important;
  color:#aaa!important;
  background:
    radial-gradient(ellipse 42% 86% at 10% -8%,rgba(217,52,47,.095) 0%,rgba(217,52,47,.020) 40%,transparent 71%),
    radial-gradient(ellipse 45% 90% at 92% 112%,rgba(126,130,138,.055) 0%,rgba(126,130,138,.014) 45%,transparent 73%),
    linear-gradient(112deg,transparent 0%,rgba(255,255,255,.010) 24%,rgba(255,255,255,.028) 36%,transparent 50%,rgba(215,53,48,.010) 72%,transparent 100%),
    linear-gradient(160deg,rgba(24,27,31,.53) 0%,rgba(8,10,13,.55) 33%,rgba(3,4,6,.63) 61%,rgba(15,17,20,.55) 100%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.09)!important;
  backdrop-filter:blur(24px) saturate(1.09)!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.065)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 -14px 40px rgba(0,0,0,.12)!important;
  opacity:1!important;
  transform:none!important;
}
html body:not(.bb-cabinet-embed) .bb-modern-footer *{box-sizing:border-box}

/* Brand column: tighter and more purposeful. */
html body:not(.bb-cabinet-embed) .bb-footer-brand>a{gap:10px!important}
html body:not(.bb-cabinet-embed) .bb-footer-brand img{width:38px!important;height:38px!important}
html body:not(.bb-cabinet-embed) .bb-footer-brand b{font-size:17px!important}
html body:not(.bb-cabinet-embed) .bb-footer-brand small{font-size:7.5px!important;margin-top:2px!important}
html body:not(.bb-cabinet-embed) .bb-footer-brand p{
  margin:7px 0 8px!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}

/* Links: less vertical air, same information. */
html body:not(.bb-cabinet-embed) .bb-footer-links{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-links div{gap:6px!important}
html body:not(.bb-cabinet-embed) .bb-footer-links b,
html body:not(.bb-cabinet-embed) .bb-footer-news>b{
  margin-bottom:2px!important;
  font-size:8.5px!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-links a{font-size:10px!important;line-height:1.28!important}

/* Newsletter column stays functional without dominating the footer. */
html body:not(.bb-cabinet-embed) .bb-footer-news p{
  margin:5px 0 8px!important;
  font-size:10px!important;
  line-height:1.38!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-news form{grid-template-columns:minmax(0,1fr) auto!important}
html body:not(.bb-cabinet-embed) .bb-footer-news input{height:34px!important;font-size:11px!important}
html body:not(.bb-cabinet-embed) .bb-footer-news button[type=submit]{height:34px!important;padding:0 12px!important;font-size:8px!important}
html body:not(.bb-cabinet-embed) .bb-footer-consent{
  margin-top:5px!important;
  font-size:7.5px!important;
  line-height:1.3!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-status{min-height:11px!important;margin-top:3px!important;font-size:8px!important}
html body:not(.bb-cabinet-embed) .bb-motion-toggle{
  margin-top:6px!important;
  padding:6px 8px!important;
  font-size:7.5px!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-bottom{
  grid-column:1/-1!important;
  margin:0!important;
  padding-top:10px!important;
  border-top:1px solid rgba(255,255,255,.05)!important;
  font-size:8px!important;
  line-height:1.25!important;
}

/* =========================================================
   5) SOCIALS LIVE IN THE FOOTER, not in a separate floating strip.
   rev275f-canonical-chrome.js moves the existing rail into this holder.
   ========================================================= */
html body:not(.bb-cabinet-embed) > .bb-social-dock-shell{
  display:none!important;
  margin:0!important;
  padding:0!important;
  height:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-socials{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:8px!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-social-label{
  color:#777!important;
  font:800 7.5px/1 Arial,sans-serif!important;
  letter-spacing:1.2px!important;
  white-space:nowrap!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-socials .bb-social-rail{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-socials .bb-social{
  width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.018)!important;
  color:#9a9ca1!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
  font-size:12px!important;
  transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-socials .bb-social:hover,
html body:not(.bb-cabinet-embed) .bb-footer-socials .bb-social:focus-visible{
  transform:translateY(-2px)!important;
  color:#f4f4f4!important;
  border-color:rgba(215,53,48,.55)!important;
  background:rgba(215,53,48,.08)!important;
  outline:none!important;
}
html body:not(.bb-cabinet-embed) .bb-footer-socials .bb-ebay-mark{
  font-size:8px!important;
  letter-spacing:-.5px!important;
  color:inherit!important;
  -webkit-text-stroke:0!important;
}

/* Tablet / phone footer remains the same component, simply stacked. */
@media(max-width:900px){
  html body:not(.bb-cabinet-embed) .bb-modern-footer,
  html body:not(.bb-cabinet-embed) footer.shop-footer{
    grid-template-columns:1fr 1fr!important;
    gap:20px!important;
    padding:24px 20px 12px!important;
  }
  html body:not(.bb-cabinet-embed) .bb-footer-brand{grid-column:1!important}
  html body:not(.bb-cabinet-embed) .bb-footer-links{grid-column:1/-1!important;grid-row:2!important}
  html body:not(.bb-cabinet-embed) .bb-footer-news{grid-column:2!important;grid-row:1!important}
  html body:not(.bb-cabinet-embed) .bb-footer-bottom{grid-column:1/-1!important;grid-row:3!important}
}
@media(max-width:620px){
  html body:not(.bb-cabinet-embed) .bb-modern-footer,
  html body:not(.bb-cabinet-embed) footer.shop-footer{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:22px 16px 12px!important;
  }
  html body:not(.bb-cabinet-embed) .bb-footer-brand,
  html body:not(.bb-cabinet-embed) .bb-footer-links,
  html body:not(.bb-cabinet-embed) .bb-footer-news,
  html body:not(.bb-cabinet-embed) .bb-footer-bottom{
    grid-column:1!important;
    grid-row:auto!important;
  }
  html body:not(.bb-cabinet-embed) .bb-footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body:not(.bb-cabinet-embed) .bb-footer-bottom{flex-direction:column!important;gap:5px!important}
}