/* =========================================================
   Rev271 — header lock / BatPig wordmark / shop + about polish
   The Bacon Bin
   ========================================================= */

/* ---------------------------------------------------------
   1. HEADER — force the exact same outer geometry on Shop.
   Rev61's .catalog-page .shop-header rule had greater class
   specificity than the canonical Rev270 header and was pulling
   the Shop page logo/tools inward. This explicitly wins.
   --------------------------------------------------------- */
html body.catalog-page header.shop-header.bb-site-header{
  padding-left:48px!important;
  padding-right:48px!important;
  min-height:84px!important;
  height:84px!important;
  max-height:84px!important;
}

/* Bring the canonical BatPig mark back beside the approved wordmark
   without changing HTML or introducing page-to-page markup drift. */
html body .bb-site-header .shop-brand::before{
  content:"";
  display:block!important;
  flex:0 0 34px!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:34px!important;
  background:url("images/bat-pig-icon.png") center/contain no-repeat!important;
  margin:0 8px 0 0!important;
  padding:0!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
html body .bb-site-header .shop-brand{
  width:250px!important;
  min-width:250px!important;
  max-width:250px!important;
}
html body .bb-site-header .shop-brand>img.bb-final-header-logo{
  width:208px!important;
  min-width:208px!important;
  max-width:208px!important;
  flex-basis:208px!important;
}

@media(max-width:1280px) and (min-width:1101px){
  html body.catalog-page header.shop-header.bb-site-header{
    padding-left:24px!important;
    padding-right:24px!important;
  }
  html body .bb-site-header .shop-brand::before{
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
    margin-right:7px!important;
  }
  html body .bb-site-header .shop-brand{
    width:215px!important;
    min-width:215px!important;
    max-width:215px!important;
  }
  html body .bb-site-header .shop-brand>img.bb-final-header-logo{
    width:180px!important;
    min-width:180px!important;
    max-width:180px!important;
    flex-basis:180px!important;
  }
}

@media(max-width:1100px){
  html body.catalog-page header.shop-header.bb-site-header{
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
    min-height:74px!important;
    height:74px!important;
    max-height:74px!important;
  }
  html body .bb-site-header .shop-brand::before{
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
    margin-right:6px!important;
  }
  html body .bb-site-header .shop-brand{
    width:min(162px,42vw)!important;
    min-width:0!important;
    max-width:162px!important;
  }
  html body .bb-site-header .shop-brand>img.bb-final-header-logo{
    width:min(128px,33vw)!important;
    min-width:0!important;
    max-width:128px!important;
    flex:0 1 128px!important;
    max-height:46px!important;
  }
}

@media(max-width:390px){
  html body .bb-site-header .shop-brand::before{
    width:25px!important;
    min-width:25px!important;
    max-width:25px!important;
    height:25px!important;
    flex-basis:25px!important;
    margin-right:5px!important;
  }
  html body .bb-site-header .shop-brand{
    width:min(148px,40vw)!important;
    max-width:148px!important;
  }
  html body .bb-site-header .shop-brand>img.bb-final-header-logo{
    width:min(118px,32vw)!important;
    max-width:118px!important;
    flex-basis:118px!important;
    max-height:43px!important;
  }
}

/* ---------------------------------------------------------
   2. SHOP — retire the fabricated metal sign. The live SHOP
   wordmark now uses the same bold white/red language as the
   approved header logo, at a smaller, calmer scale.
   --------------------------------------------------------- */
html body.shop-landing-page .shop-logo-heading-v230{
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  margin:1px 0 8px!important;
  padding:0!important;
  display:flex!important;
  align-items:baseline!important;
  gap:0!important;
  line-height:.82!important;
  transform:none!important;
  font-family:"Arial Black",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif!important;
  font-size:clamp(42px,4.8vw,68px)!important;
  font-weight:900!important;
  letter-spacing:-.065em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  text-shadow:0 2px 0 rgba(0,0,0,.95),0 9px 22px rgba(0,0,0,.34)!important;
}
html body.shop-landing-page .shop-logo-heading-v230 img{
  display:none!important;
}
html body.shop-landing-page .shop-logo-heading-v230 span{
  color:#f5f3ef!important;
}
html body.shop-landing-page .shop-logo-heading-v230 strong{
  color:#ef332f!important;
  font:inherit!important;
}
@media(max-width:680px){
  html body.shop-landing-page .shop-logo-heading-v230{
    font-size:clamp(36px,11vw,52px)!important;
    margin-bottom:7px!important;
  }
}

/* ---------------------------------------------------------
   3. ARCADE — a little more breathing room around the cabinet.
   Cabinet/CRT geometry itself remains 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:.10%!important;
  width:17.85%!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:82.05%!important;
  width:17.85%!important;
}

/* ---------------------------------------------------------
   4. ABOUT — the lower-left mission copy is a glass panel, so
   give the text deliberate interior breathing room.
   --------------------------------------------------------- */
html body.about-page .about-story-copy{
  box-sizing:border-box!important;
  padding:clamp(28px,3.1vw,46px)!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:14px!important;
}
html body.about-page .about-story-copy>:first-child{margin-top:0!important}
html body.about-page .about-story-copy>:last-child{margin-bottom:0!important}
@media(max-width:680px){
  html body.about-page .about-story-copy{padding:24px!important}
}