/* =========================================================
   THE BACON BIN — REV274I
   FINISH POLISH
   Scope: Arcade edge feathering; Shop/Merch/Bits hero refinement;
   category top-spacing refinement; restrained premium micro-polish.
   NO structural redesign.
   ========================================================= */

/* =========================================================
   1) ARCADE — eliminate visible rectangular circuitry edges
      at narrower browser widths, and lower the approved logo
      by only a small amount.
   ========================================================= */
html body#bb-test-font-lock.arcade-hub-page .bb-arcade-poster-main::after{
  top:0!important;
  left:50%!important;
  right:auto!important;
  width:min(96vw,1580px)!important;
  height:540px!important;
  transform:translateX(-50%)!important;
  background:
    url("images/arcade-rev272i/arcade-circuit-ceiling-v272i.webp")
    center top/1480px auto no-repeat!important;
  opacity:.34!important;
  filter:brightness(.96) saturate(.66) contrast(1.01)!important;
  mix-blend-mode:screen!important;

  /* Feather ALL edges rather than leaving a visible rectangular plate. */
  -webkit-mask-image:
    radial-gradient(ellipse 72% 76% at 50% 27%,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.94) 55%,
      rgba(0,0,0,.66) 69%,
      rgba(0,0,0,.28) 82%,
      transparent 100%)!important;
  mask-image:
    radial-gradient(ellipse 72% 76% at 50% 27%,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.94) 55%,
      rgba(0,0,0,.66) 69%,
      rgba(0,0,0,.28) 82%,
      transparent 100%)!important;
}

html body#bb-test-font-lock.arcade-hub-page .bb-arcade-page-logo{
  transform:translateY(24px)!important;
}

/* The room itself gets a tiny extra side vignette at intermediate widths
   so no background crop line can read as a hard edge. */
html body#bb-test-font-lock.arcade-hub-page .bb-arcade-poster-main{
  box-shadow:
    inset 42px 0 62px -44px rgba(0,0,0,.92),
    inset -42px 0 62px -44px rgba(0,0,0,.92)!important;
}

@media(max-width:1100px){
  html body#bb-test-font-lock.arcade-hub-page .bb-arcade-poster-main::after{
    width:100vw!important;
    height:470px!important;
    background-size:1220px auto!important;
    opacity:.30!important;
  }
  html body#bb-test-font-lock.arcade-hub-page .bb-arcade-page-logo{
    transform:translateY(22px)!important;
  }
}

@media(max-width:680px){
  html body#bb-test-font-lock.arcade-hub-page .bb-arcade-poster-main::after{
    width:108vw!important;
    height:365px!important;
    background-size:940px auto!important;
    opacity:.23!important;
  }
  html body#bb-test-font-lock.arcade-hub-page .bb-arcade-page-logo{
    transform:translateY(18px)!important;
  }
}

/* =========================================================
   2) SHOP / MERCH / BITS — same approved title language,
      but smaller, tighter and more integrated with the page.
   ========================================================= */
html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
  .bb-unified-page-hero{
  width:min(1240px,calc(100% - 72px))!important;
  padding:25px 26px 20px!important;
  gap:clamp(26px,2.8vw,40px)!important;
  grid-template-columns:minmax(0,1.04fr) minmax(275px,.70fr)!important;
}

html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
  .bb-unified-page-title{
  font-size:clamp(40px,3.75vw,58px)!important;
  line-height:.88!important;
  letter-spacing:-.048em!important;
}

html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
  .bb-unified-page-hero::before{
  left:12px!important;
  bottom:-8px!important;
  font-size:clamp(64px,7.4vw,106px)!important;
  opacity:.44!important;
}

/* Shorter glass atmosphere with genuine side feather instead of a hard-ended slab. */
html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
  .bb-unified-page-hero::after{
  left:0!important;
  width:100%!important;
  transform:none!important;
  background:
    radial-gradient(circle at 22% 0%,rgba(239,59,53,.078),transparent 26%),
    radial-gradient(circle at 82% 18%,rgba(92,31,32,.075),transparent 30%),
    linear-gradient(180deg,rgba(8,8,9,.94),rgba(8,8,9,.88) 60%,rgba(5,5,5,.94))!important;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.38) 3.5%,
    #000 9%,
    #000 91%,
    rgba(0,0,0,.38) 96.5%,
    transparent 100%)!important;
  mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.38) 3.5%,
    #000 9%,
    #000 91%,
    rgba(0,0,0,.38) 96.5%,
    transparent 100%)!important;
}

html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
  .bb-unified-page-copy{
  padding-left:18px!important;
}

html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
  .bb-unified-divider{
  width:min(1240px,calc(100% - 72px))!important;
  opacity:.74!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)!important;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)!important;
}

/* =========================================================
   3) PRODUCT CATEGORY PAGES — reduce only the dead air at top.
      Category logos, art, backgrounds and product layout stay intact.
   ========================================================= */
html body#bb-test-font-lock.category-page .category-hero{
  min-height:270px!important;
  padding-top:54px!important;
  padding-bottom:24px!important;
}

html body#bb-test-font-lock.category-page .category-breadcrumbs{
  margin-bottom:13px!important;
}

html body#bb-test-font-lock.category-page .category-hero-copy>.catalog-kicker{
  margin-bottom:10px!important;
}

html body#bb-test-font-lock.category-page .category-title-logo{
  margin-top:5px!important;
  margin-bottom:13px!important;
}

html body#bb-test-font-lock.category-page .category-products{
  padding-top:30px!important;
}

/* =========================================================
   4) RESTRAINED "SEXY" FINISH — depth, not gimmicks.
      No resizing, jumping or layout shift on hover.
   ========================================================= */

/* Category product cards: richer edge response, no movement. */
html body#bb-test-font-lock.category-page .product-card{
  transition:
    border-color .20s ease,
    box-shadow .24s ease,
    background-color .20s ease!important;
}

html body#bb-test-font-lock.category-page .product-card:hover{
  transform:none!important;
  border-color:rgba(228,55,49,.27)!important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 1px 0 0 rgba(225,56,50,.045)!important;
}

/* Shop/Merch/Bits surfaces: tiny highlight response only. */
html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
  :is(.catalog-card,.merch-card,.bits-card,.bb-glass-panel){
  transition:
    border-color .20s ease,
    box-shadow .24s ease,
    background-color .20s ease!important;
}

html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
  :is(.catalog-card,.merch-card,.bits-card,.bb-glass-panel):hover{
  border-color:rgba(224,57,51,.22)!important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* Buttons get a restrained glossy top-edge highlight without changing size. */
html body#bb-test-font-lock:is(
  .shop-landing-page,.merch-page,.bits-page,.category-page,.arcade-hub-page
) .btn{
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .20s ease,
    color .18s ease!important;
}

html body#bb-test-font-lock:is(
  .shop-landing-page,.merch-page,.bits-page,.category-page,.arcade-hub-page
) .btn:hover{
  transform:none!important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.075)!important;
}

/* =========================================================
   5) MOBILE — preserve the polish without crowding.
   ========================================================= */
@media(max-width:720px){
  html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
    .bb-unified-page-hero{
    width:min(100% - 24px,1240px)!important;
    padding:21px 15px 18px!important;
    gap:16px!important;
    grid-template-columns:1fr!important;
  }

  html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
    .bb-unified-page-title{
    font-size:clamp(34px,10.8vw,48px)!important;
  }

  html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
    .bb-unified-page-copy{
    padding-left:4px!important;
  }

  html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
    .bb-unified-divider{
    width:min(100% - 24px,1240px)!important;
  }

  html body#bb-test-font-lock.category-page .category-hero{
    min-height:230px!important;
    padding-top:42px!important;
    padding-bottom:20px!important;
  }

  html body#bb-test-font-lock.category-page .category-products{
    padding-top:24px!important;
  }
}