/* =========================================================
   THE BACON BIN — REV274M
   REFINEMENT PASS
   Navbar scan animation / About memory placement / smaller title
   hierarchy / Bits cleanup / digital date + clock.
   ========================================================= */

/* =========================================================
   1) NAVBAR — replace Rev274L per-letter bounce with a sharper
      "scanner blade" / signal-lock effect. Nothing moves in layout.
   ========================================================= */
html body#bb-test-font-lock .bb-nav-letter{
  animation:none!important;
  transform:none!important;
  translate:none!important;
  scale:1!important;
  filter:none!important;
  transition:color .18s ease,text-shadow .18s ease!important;
}

html body#bb-test-font-lock .bb-nav-word{
  position:relative!important;
  display:inline-block!important;
  line-height:1!important;
  overflow:hidden!important;
  isolation:isolate!important;
  color:inherit!important;
}

/* Narrow white/red scan passes over the lettering without moving it. */
html body#bb-test-font-lock .bb-nav-word::before{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  top:-30%!important;
  bottom:-30%!important;
  left:-34px!important;
  width:24px!important;
  pointer-events:none!important;
  opacity:0!important;
  transform:translateX(0) skewX(-15deg)!important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(239,59,53,.10) 18%,
      rgba(255,255,255,.76) 49%,
      rgba(239,59,53,.24) 67%,
      transparent 100%)!important;
  filter:blur(.35px)!important;
  mix-blend-mode:screen!important;
}

@media(hover:hover) and (pointer:fine){
  html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):hover .bb-nav-word::before,
  html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible .bb-nav-word::before,
  html body#bb-test-font-lock .shop-categories > summary:hover .bb-nav-word::before,
  html body#bb-test-font-lock .shop-categories > summary:focus-visible .bb-nav-word::before{
    animation:bbNavScannerBlade .62s cubic-bezier(.2,.75,.2,1) both!important;
  }

  html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):hover .bb-nav-letter,
  html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible .bb-nav-letter,
  html body#bb-test-font-lock .shop-categories > summary:hover .bb-nav-letter,
  html body#bb-test-font-lock .shop-categories > summary:focus-visible .bb-nav-letter{
    color:#fff!important;
    text-shadow:
      0 1px 0 rgba(0,0,0,.95),
      -1px 0 rgba(239,59,53,.18),
      0 0 7px rgba(239,59,53,.20)!important;
  }
}

@keyframes bbNavScannerBlade{
  0%{opacity:0;transform:translateX(0) skewX(-15deg)}
  12%{opacity:.78}
  68%{opacity:.94}
  100%{opacity:0;transform:translateX(calc(100% + 78px)) skewX(-15deg)}
}

/* Keep Rev274K's red rail, but make it a clean left-to-right signal trace. */
html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)::before,
html body#bb-test-font-lock .shop-categories > summary::before{
  left:50%!important;
  width:calc(100% + 8px)!important;
  transform:translateX(-50%) scaleX(.12)!important;
  transform-origin:left center!important;
  opacity:0!important;
}

html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):hover::before,
html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible::before,
html body#bb-test-font-lock .shop-categories > summary:hover::before,
html body#bb-test-font-lock .shop-categories > summary:focus-visible::before{
  transform:translateX(-50%) scaleX(1)!important;
  opacity:.92!important;
}

html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)::after,
html body#bb-test-font-lock .shop-categories > summary::after{
  opacity:0!important;
  transform:translateX(-50%) scaleX(.4)!important;
}

html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):hover::after,
html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav):focus-visible::after,
html body#bb-test-font-lock .shop-categories > summary:hover::after,
html body#bb-test-font-lock .shop-categories > summary:focus-visible::after{
  opacity:.58!important;
  transform:translateX(-50%) scaleX(1)!important;
}

/* Active page is sharp and quiet, not permanently "animated". */
html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav).active .bb-nav-letter,
html body#bb-test-font-lock .shop-nav > a:not(.bb-ebay-nav)[aria-current="page"] .bb-nav-letter{
  color:#fff!important;
  text-shadow:0 0 6px rgba(239,59,53,.12)!important;
}

@media(max-width:860px){
  html body#bb-test-font-lock .bb-nav-word{overflow:visible!important}
  html body#bb-test-font-lock .bb-nav-word::before{display:none!important}
}

/* =========================================================
   2) NAVBAR CLOCK + DATE — compact instrument-style readout.
   ========================================================= */
html body#bb-test-font-lock .shop-tools .bb-nav-clock{
  position:relative!important;
  display:grid!important;
  align-content:center!important;
  justify-items:end!important;
  min-width:94px!important;
  height:44px!important;
  margin:0 10px 0 0!important;
  padding:4px 11px 4px 13px!important;
  border-left:1px solid rgba(255,255,255,.075)!important;
  color:#eee!important;
  text-decoration:none!important;
  line-height:1!important;
  pointer-events:none!important;
  user-select:none!important;
}

html body#bb-test-font-lock .shop-tools .bb-nav-clock::before{
  content:""!important;
  position:absolute!important;
  left:-1px!important;
  top:9px!important;
  width:1px!important;
  height:26px!important;
  background:linear-gradient(180deg,transparent,#ef3b35 38%,#ef3b35 62%,transparent)!important;
  opacity:.52!important;
}

html body#bb-test-font-lock .bb-nav-clock-time{
  color:#f5f3ee!important;
  font-family:Consolas,"SFMono-Regular","Roboto Mono",monospace!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.065em!important;
  font-variant-numeric:tabular-nums!important;
  white-space:nowrap!important;
  text-shadow:0 0 8px rgba(239,59,53,.10)!important;
}

html body#bb-test-font-lock .bb-nav-clock-date{
  margin-top:4px!important;
  color:#666b70!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  font-size:6.5px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  white-space:nowrap!important;
}

@media(max-width:1360px){
  html body#bb-test-font-lock .shop-tools .bb-nav-clock{
    min-width:70px!important;
    padding-right:8px!important;
  }
  html body#bb-test-font-lock .bb-nav-clock-date{display:none!important}
}
@media(max-width:1160px){
  html body#bb-test-font-lock .shop-tools .bb-nav-clock{display:none!important}
}

/* =========================================================
   3) ABOUT — bring the daughter/computer memory out of the deep
      background and into the TOP-LEFT atmosphere, heavily feathered.
   ========================================================= */
html body#bb-test-font-lock.about-page .about-memory-computer{
  left:-3.5vw!important;
  right:auto!important;
  top:-1%!important;
  width:min(45vw,760px)!important;
  height:51%!important;
  z-index:1!important;

  background-position:18% 48%!important;
  background-size:cover!important;

  opacity:.285!important;
  filter:
    contrast(1.025)
    brightness(.68)
    saturate(.80)!important;

  -webkit-mask-image:
    radial-gradient(
      ellipse 78% 76% at 30% 43%,
      #000 0%,
      #000 37%,
      rgba(0,0,0,.93) 50%,
      rgba(0,0,0,.67) 66%,
      rgba(0,0,0,.30) 82%,
      rgba(0,0,0,.08) 92%,
      transparent 100%)!important;
  mask-image:
    radial-gradient(
      ellipse 78% 76% at 30% 43%,
      #000 0%,
      #000 37%,
      rgba(0,0,0,.93) 50%,
      rgba(0,0,0,.67) 66%,
      rgba(0,0,0,.30) 82%,
      rgba(0,0,0,.08) 92%,
      transparent 100%)!important;
}

/* Nudge the little 1985 stamp down/right so it no longer crowds the new stack. */
html body#bb-test-font-lock.about-page .origin-date-stamp{
  left:11.5%!important;
  top:47%!important;
}

@media(max-width:1180px){
  html body#bb-test-font-lock.about-page .about-memory-computer{
    left:-8vw!important;
    top:0!important;
    width:62vw!important;
    height:44%!important;
    opacity:.22!important;
    background-position:16% 46%!important;
  }
  html body#bb-test-font-lock.about-page .origin-date-stamp{
    left:8%!important;
    top:46%!important;
  }
}
@media(max-width:680px){
  html body#bb-test-font-lock.about-page .about-memory-computer{
    left:-18vw!important;
    top:1%!important;
    width:92vw!important;
    height:34%!important;
    opacity:.16!important;
  }
  html body#bb-test-font-lock.about-page .origin-date-stamp{
    left:4%!important;
    top:43%!important;
  }
}

/* =========================================================
   4) UNIFIED NON-CATEGORY TITLES — smaller everywhere.
      Shop / Bits / Shipping / Returns / FAQ / Account / etc.
   ========================================================= */
html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-page-hero{
  min-height:218px!important;
  padding-top:38px!important;
  padding-bottom:27px!important;
  gap:34px!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-page-title{
  font-size:clamp(34px,3.25vw,50px)!important;
  line-height:.90!important;
  letter-spacing:-.044em!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-page-hero.bb-title-long .bb-unified-page-title{
  font-size:clamp(31px,2.95vw,45px)!important;
  line-height:.92!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-page-hero.bb-title-xlong .bb-unified-page-title{
  font-size:clamp(28px,2.65vw,40px)!important;
  line-height:.95!important;
  letter-spacing:-.035em!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-eyebrow{
  margin-bottom:9px!important;
  font-size:8.5px!important;
  letter-spacing:.19em!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-eyebrow::before{
  width:27px!important;
  height:1.5px!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-title-foot{
  width:112px!important;
  height:2px!important;
  margin-top:17px!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-page-copy{
  padding-left:22px!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-page-copy strong{
  margin-bottom:7px!important;
  font-size:10.5px!important;
  letter-spacing:.095em!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-page-copy p{
  max-width:430px!important;
  font-size:12.5px!important;
  line-height:1.56!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-page-copy .bb-unified-mini{
  margin-top:10px!important;
  font-size:8px!important;
  letter-spacing:.12em!important;
}

html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
  .bb-unified-page-hero::before{
  font-size:clamp(72px,8vw,118px)!important;
  bottom:-17px!important;
  opacity:.34!important;
}

/* Shop/Merch/Bits retain their compact glass treatment, just tighter still. */
html body#bb-test-font-lock:is(.shop-landing-page,.merch-page,.bits-page)
  .bb-unified-page-hero{
  min-height:0!important;
  padding:20px 23px 17px!important;
}

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

/* =========================================================
   5) INFO / POLICY / FAQ typography — a quieter second level.
   ========================================================= */
html body#bb-test-font-lock.info-page .bb-info-shell>h1,
html body#bb-test-font-lock.account-page .bb-info-shell>h1,
html body#bb-test-font-lock.newsletter-page .bb-info-shell>h1{
  font-size:clamp(29px,3vw,43px)!important;
  line-height:.96!important;
  margin-bottom:29px!important;
}

html body#bb-test-font-lock.info-page .bb-info-shell>.catalog-kicker,
html body#bb-test-font-lock.account-page .bb-info-shell>.catalog-kicker,
html body#bb-test-font-lock.newsletter-page .bb-info-shell>.catalog-kicker{
  font-size:8.5px!important;
  letter-spacing:.17em!important;
  margin-bottom:8px!important;
}

html body#bb-test-font-lock.info-page .bb-legal-copy h2,
html body#bb-test-font-lock.info-page .bb-info-shell h2{
  font-size:clamp(17px,1.45vw,20.5px)!important;
  line-height:1.18!important;
}

html body#bb-test-font-lock.info-page .bb-legal-copy p,
html body#bb-test-font-lock.info-page .bb-faq p{
  font-size:12.75px!important;
  line-height:1.64!important;
}

html body#bb-test-font-lock.info-page .bb-faq summary{
  font-size:13.5px!important;
  line-height:1.35!important;
}

html body#bb-test-font-lock.info-page .bb-faq details{
  padding:14px 16px!important;
}

/* =========================================================
   6) BITS — remove the empty gradient "art" slabs, keep stories.
   ========================================================= */
html body#bb-test-font-lock.bits-page .bits-story-art{
  display:none!important;
}

html body#bb-test-font-lock.bits-page .bits-story-card{
  position:relative!important;
  min-height:148px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(224,57,51,.055),transparent 38%),
    linear-gradient(145deg,rgba(9,10,12,.94),rgba(4,5,7,.98))!important;
}

html body#bb-test-font-lock.bits-page .bits-story-card::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:16px!important;
  bottom:16px!important;
  width:1px!important;
  background:linear-gradient(180deg,transparent,rgba(229,59,52,.56),transparent)!important;
}

html body#bb-test-font-lock.bits-page .bits-story-card>div:last-child{
  min-height:148px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:18px 20px!important;
}

html body#bb-test-font-lock.bits-page .bits-story-card h2{
  font-size:19px!important;
  line-height:1.1!important;
  margin:5px 0 8px!important;
}

html body#bb-test-font-lock.bits-page .bits-story-card p{
  font-size:11.5px!important;
  line-height:1.52!important;
}

html body#bb-test-font-lock.bits-page .bits-pulp-hero-copy-v261>h1{
  font-size:clamp(42px,5vw,72px)!important;
  margin-bottom:14px!important;
}

html body#bb-test-font-lock.bits-page .bits-pulp-hero-copy-v261>p{
  font-size:13.5px!important;
  line-height:1.55!important;
  margin-bottom:20px!important;
}

html body#bb-test-font-lock.bits-page .bits-live-head h2{
  font-size:clamp(25px,2.7vw,38px)!important;
}

html body#bb-test-font-lock.bits-page .bits-oddities-head h2,
html body#bb-test-font-lock.bits-page .bits-release-strip h2{
  font-size:clamp(21px,2vw,29px)!important;
}

/* =========================================================
   7) MOBILE title hierarchy.
   ========================================================= */
@media(max-width:720px){
  html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
    .bb-unified-page-hero{
    min-height:0!important;
    padding-top:24px!important;
    padding-bottom:20px!important;
    gap:14px!important;
  }

  html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
    .bb-unified-page-title{
    font-size:clamp(31px,9.8vw,42px)!important;
  }

  html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
    .bb-unified-page-hero.bb-title-long .bb-unified-page-title{
    font-size:clamp(29px,8.8vw,39px)!important;
  }

  html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
    .bb-unified-page-hero.bb-title-xlong .bb-unified-page-title{
    font-size:clamp(27px,8vw,36px)!important;
  }

  html body#bb-test-font-lock.bb-unified-title-page:not(.category-page)
    .bb-unified-page-copy{
    padding-left:0!important;
  }
}

/* Reduced motion: the scanner becomes a static highlight. */
@media(prefers-reduced-motion:reduce){
  html body#bb-test-font-lock .bb-nav-word::before{
    display:none!important;
  }
}