/* =========================================================
   Rev270 — canonical header / mobile navigation / motion polish
   The Bacon Bin
   ========================================================= */

/* ---------------------------------------------------------
   1. ONE HEADER GEOMETRY EVERYWHERE
   --------------------------------------------------------- */
html body .bb-site-header{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  height:84px!important;
  min-height:84px!important;
  max-height:84px!important;
  display:grid!important;
  grid-template-columns:260px minmax(0,1fr) 260px!important;
  grid-template-rows:84px!important;
  align-items:center!important;
  gap:0!important;
  margin:0!important;
  padding:0 48px!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  filter:none!important;
  overflow:visible!important;
  background:#050608!important;
  background-image:linear-gradient(180deg,#07080a 0%,#040506 100%)!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 1px 0 rgba(213,48,45,.14),0 12px 30px rgba(0,0,0,.18)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  z-index:1200!important;
}

/* Exact approved rendered brand art. Never let page-specific CSS resize it. */
html body .bb-site-header .shop-brand{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:208px!important;
  min-width:208px!important;
  max-width:208px!important;
  height:84px!important;
  min-height:84px!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  overflow:visible!important;
  transform:none!important;
  filter:none!important;
  text-decoration:none!important;
}
html body .bb-site-header .shop-brand>img.bb-final-header-logo{
  box-sizing:border-box!important;
  display:block!important;
  width:208px!important;
  min-width:208px!important;
  max-width:208px!important;
  height:auto!important;
  max-height:60px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:left center!important;
  flex:0 0 208px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  opacity:1!important;
  overflow:visible!important;
}
html body .bb-site-header .shop-brand>span{display:none!important}

/* Center nav is geometrically identical from page to page. */
html body .bb-site-header .bb-site-nav{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:stretch!important;
  position:relative!important;
  inset:auto!important;
  box-sizing:border-box!important;
  width:max-content!important;
  max-width:none!important;
  height:84px!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(24px,2vw,34px)!important;
  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body .bb-site-header .bb-site-nav>a:not(.bb-ebay-nav){
  height:84px!important;
  min-height:84px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0 1px!important;
  font-size:12.5px!important;
  letter-spacing:1.7px!important;
}
html body .bb-site-header .bb-ebay-nav{
  width:44px!important;
  min-width:44px!important;
  height:58px!important;
  margin:0 -1px!important;
}
html body .bb-site-header .bb-ebay-nav img{
  width:42px!important;
  height:42px!important;
}

/* Tools stay in a fixed right column, so brand/nav cannot shift. */
html body .bb-site-header .shop-tools{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  box-sizing:border-box!important;
  width:auto!important;
  min-width:0!important;
  max-width:260px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  overflow:visible!important;
}
html body .bb-site-header .shop-tools>button,
html body .bb-site-header .shop-tools>a{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  flex:0 0 36px!important;
}
html body .bb-site-header .language-picker{margin:0 1px 0 0!important}
html body .bb-site-header .language-select{min-width:59px!important;height:34px!important}
html body .bb-site-header .shop-menu-toggle{display:none!important}

/* Mid-size desktop: same geometry, simply tighter. */
@media(max-width:1280px) and (min-width:1101px){
  html body .bb-site-header{
    grid-template-columns:220px minmax(0,1fr) 220px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
  html body .bb-site-header .shop-brand,
  html body .bb-site-header .shop-brand>img.bb-final-header-logo{
    width:190px!important;
    min-width:190px!important;
    max-width:190px!important;
  }
  html body .bb-site-header .shop-brand>img.bb-final-header-logo{flex-basis:190px!important;max-height:56px!important}
  html body .bb-site-header .bb-site-nav{gap:16px!important}
  html body .bb-site-header .bb-site-nav>a:not(.bb-ebay-nav){font-size:11.6px!important;letter-spacing:1.15px!important}
  html body .bb-site-header .bb-ebay-nav{width:39px!important;min-width:39px!important}
  html body .bb-site-header .bb-ebay-nav img{width:38px!important;height:38px!important}
  html body .bb-site-header .shop-tools{gap:5px!important}
  html body .bb-site-header .shop-tools>button,
  html body .bb-site-header .shop-tools>a{width:34px!important;min-width:34px!important;max-width:34px!important;height:34px!important;min-height:34px!important;max-height:34px!important;flex-basis:34px!important}
}

/* ---------------------------------------------------------
   2. PHONE / TABLET HEADER
   Top row = full logo + Search + Cart + Menu.
   Account, Wishlist and Language live in the opened menu so
   nothing disappears, but the header never becomes crowded.
   --------------------------------------------------------- */
@media(max-width:1100px){
  html body .bb-site-header{
    position:sticky!important;
    top:0!important;
    height:74px!important;
    min-height:74px!important;
    max-height:74px!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-rows:74px!important;
    gap:8px!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
  }
  html body .bb-site-header .shop-brand{
    grid-column:1!important;
    width:min(162px,40vw)!important;
    min-width:0!important;
    max-width:162px!important;
    height:74px!important;
    min-height:74px!important;
    overflow:visible!important;
  }
  html body .bb-site-header .shop-brand>img.bb-final-header-logo{
    width:100%!important;
    min-width:0!important;
    max-width:162px!important;
    height:auto!important;
    max-height:52px!important;
    flex:0 1 auto!important;
    object-position:left center!important;
  }
  html body .bb-site-header .shop-tools{
    grid-column:2!important;
    grid-row:1!important;
    max-width:none!important;
    gap:6px!important;
  }
  /* Keep only the two genuinely useful one-tap actions in the top row. */
  html body .bb-site-header .shop-tools .language-picker,
  html body .bb-site-header .shop-tools .bb-account-shortcut,
  html body .bb-site-header .shop-tools .bb-wishlist-link{
    display:none!important;
  }
  html body .bb-site-header .shop-tools>button,
  html body .bb-site-header .shop-tools>a{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    flex-basis:38px!important;
  }
  html body .bb-site-header .shop-menu-toggle{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    box-sizing:border-box!important;
    display:flex!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    padding:10px 9px!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:5px!important;
    border:1px solid rgba(255,255,255,.15)!important;
    border-radius:4px!important;
    background:#0a0c0f!important;
    box-shadow:none!important;
  }
  html body .bb-site-header .shop-menu-toggle i{width:100%!important;height:1px!important;background:#eee!important}

  html body .bb-site-header .bb-site-nav{
    grid-column:1/-1!important;
    grid-row:auto!important;
    position:absolute!important;
    z-index:1500!important;
    top:74px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    visibility:hidden!important;
    opacity:0!important;
    transform:translateY(-6px)!important;
    background:rgba(5,6,8,.992)!important;
    border-top:1px solid rgba(255,255,255,.055)!important;
    border-bottom:1px solid rgba(213,48,45,.28)!important;
    box-shadow:0 22px 52px rgba(0,0,0,.62)!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    transition:max-height .48s cubic-bezier(.16,1,.3,1),opacity .25s ease,transform .36s cubic-bezier(.16,1,.3,1),visibility 0s linear .48s!important;
  }
  html body .bb-site-header .bb-site-nav.open{
    max-height:calc(100dvh - 74px)!important;
    visibility:visible!important;
    opacity:1!important;
    transform:translateY(0)!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
    transition:max-height .54s cubic-bezier(.16,1,.3,1),opacity .28s ease,transform .36s cubic-bezier(.16,1,.3,1),visibility 0s!important;
  }
  @supports not (height:100dvh){
    html body .bb-site-header .bb-site-nav.open{max-height:calc(100vh - 74px)!important}
  }
  html body .bb-site-header .bb-site-nav>a:not(.bb-ebay-nav){
    width:100%!important;
    height:50px!important;
    min-height:50px!important;
    justify-content:center!important;
    border-bottom:1px solid rgba(255,255,255,.055)!important;
    font-size:12px!important;
    letter-spacing:1.65px!important;
  }
  html body .bb-site-header .bb-ebay-nav{
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    margin:0!important;
    border-bottom:1px solid rgba(255,255,255,.055)!important;
  }
  html body .bb-site-header .bb-ebay-nav img{width:40px!important;height:40px!important}

  /* Mobile utility tray injected by shop.js + Rev270 enhancement. */
  html body .bb-site-header .bb-mobile-nav-tools{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:100%!important;
    order:99!important;
    gap:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    background:#08090b!important;
  }
  html body .bb-site-header .bb-mobile-nav-tools>a,
  html body .bb-site-header .bb-mobile-lang-control{
    box-sizing:border-box!important;
    min-height:62px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    margin:0!important;
    padding:8px 5px!important;
    color:#ddd!important;
    text-decoration:none!important;
    border:0!important;
    border-right:1px solid rgba(255,255,255,.06)!important;
    background:transparent!important;
    font:750 8px/1 Bahnschrift,"Arial Narrow",sans-serif!important;
    letter-spacing:.9px!important;
  }
  html body .bb-site-header .bb-mobile-nav-tools>*:last-child{border-right:0!important}
  html body .bb-site-header .bb-mobile-lang-control span{color:#ddd!important}
  html body .bb-site-header .bb-mobile-lang-control select{
    min-width:62px!important;
    height:26px!important;
    padding:0 5px!important;
    border:1px solid rgba(255,255,255,.15)!important;
    border-radius:3px!important;
    background:#0d0f12!important;
    color:#eee!important;
    font:700 9px/1 Bahnschrift,"Segoe UI",sans-serif!important;
  }
  body.bb-mobile-menu-open{overflow:hidden!important;touch-action:none!important}
}

@media(max-width:500px){
  html body .bb-site-header{
    gap:6px!important;
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
  }
  html body .bb-site-header .shop-brand{width:min(150px,39vw)!important;max-width:150px!important}
  html body .bb-site-header .shop-brand>img.bb-final-header-logo{max-width:150px!important;max-height:48px!important}
  html body .bb-site-header .shop-tools{gap:4px!important}
  html body .bb-site-header .shop-tools>button,
  html body .bb-site-header .shop-tools>a{width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;min-height:36px!important;max-height:36px!important;flex-basis:36px!important}
  html body .bb-site-header .shop-menu-toggle{width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important}
  html body .bb-site-header .bb-mobile-nav-tools{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .bb-site-header .bb-mobile-nav-tools>a,
  html body .bb-site-header .bb-mobile-lang-control{min-height:54px!important;border-bottom:1px solid rgba(255,255,255,.055)!important}
}

@media(max-width:390px){
  html body .bb-site-header .shop-brand{width:min(138px,37vw)!important;max-width:138px!important}
  html body .bb-site-header .shop-brand>img.bb-final-header-logo{max-width:138px!important;max-height:45px!important}
}

/* ---------------------------------------------------------
   3. SHOP PAGE — bring the large SHOP mark down one notch.
   --------------------------------------------------------- */
html body.shop-landing-page .shop-logo-heading-v230{
  width:clamp(160px,15.5vw,260px)!important;
  max-width:30vw!important;
  margin:0 0 5px!important;
  transform:scaleY(.88)!important;
  transform-origin:left center!important;
}
@media(max-width:680px){
  html body.shop-landing-page .shop-logo-heading-v230{width:min(44vw,220px)!important;max-width:44vw!important}
}

/* ---------------------------------------------------------
   4. ARCADE — a little more air between cabinet and cartridges.
   CRT/cabinet geometry is intentionally untouched.
   --------------------------------------------------------- */
html body.arcade-hub-page .bb-card-shelf,
html body.arcade-hub-page .bb-card-breaker,
html body.arcade-hub-page .bb-card-stack{
  left:.35%!important;
  width:18.35%!important;
}
html body.arcade-hub-page .bb-card-maze,
html body.arcade-hub-page .bb-card-match,
html body.arcade-hub-page .bb-card-blitz,
html body.arcade-hub-page .bb-card-rpg{
  left:81.30%!important;
  width:18.35%!important;
}

/* ---------------------------------------------------------
   5. SMOOTH PAGE ARRIVAL
   Deliberately restrained: the header never moves.
   --------------------------------------------------------- */
@keyframes bb270PageEnter{
  from{opacity:0;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes bb270TitleEnter{
  from{opacity:0;transform:translate3d(0,5px,0);filter:blur(1.5px)}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
html body:not(.home-page-fade):not(.bb-cabinet-embed)>main{
  animation:bb270PageEnter .46s cubic-bezier(.16,1,.3,1) both;
}
html body .catalog-heading,
html body .bb-arcade-page-logo,
html body .product-breadcrumbs,
html body .cart-shell>header,
html body .info-hero,
html body .about-hero{
  animation:bb270TitleEnter .58s .06s cubic-bezier(.16,1,.3,1) both;
}

/* Keep keyboard focus obvious without changing the visual language. */
html body .bb-site-header a:focus-visible,
html body .bb-site-header button:focus-visible,
html body .bb-site-header select:focus-visible{
  outline:1px solid rgba(255,255,255,.82)!important;
  outline-offset:3px!important;
}

.bb-motion-off>main,
.bb-motion-off .catalog-heading,
.bb-motion-off .bb-arcade-page-logo,
.bb-motion-off .product-breadcrumbs,
.bb-motion-off .cart-shell>header,
.bb-motion-off .info-hero,
.bb-motion-off .about-hero{animation:none!important}
@media(prefers-reduced-motion:reduce){
  html body:not(.home-page-fade):not(.bb-cabinet-embed)>main,
  html body .catalog-heading,
  html body .bb-arcade-page-logo,
  html body .product-breadcrumbs,
  html body .cart-shell>header,
  html body .info-hero,
  html body .about-hero{animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
}