/* =========================================================
   Rev272 — About memories / account avatar / gallery controls
   The Bacon Bin
   ========================================================= */

/* ---------------------------------------------------------
   1. ABOUT — real archival memories as quiet environmental art.
   Keep the photographs atmospheric, feathered, and subordinate
   to the copy instead of presenting them as hard-edged panels.
   --------------------------------------------------------- */
html body.about-page .about-origin-story::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:-2!important;
  top:0!important;
  right:-2vw!important;
  left:auto!important;
  width:min(56vw,900px)!important;
  height:100%!important;
  aspect-ratio:auto!important;
  transform:none!important;
  background:url("images/about/about-bg-toy-aisle-v272.webp") center 44%/cover no-repeat!important;
  opacity:.145!important;
  filter:grayscale(1) contrast(1.08) brightness(.76)!important;
  pointer-events:none!important;
  box-shadow:none!important;
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 13%,#000 35%,#000 79%,rgba(0,0,0,.42) 91%,transparent 100%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.72) 11%,#000 27%,#000 73%,rgba(0,0,0,.56) 89%,transparent 100%)!important;
  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 13%,#000 35%,#000 79%,rgba(0,0,0,.42) 91%,transparent 100%),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.72) 11%,#000 27%,#000 73%,rgba(0,0,0,.56) 89%,transparent 100%)!important;
  -webkit-mask-composite:source-in!important;
  mask-composite:intersect!important;
}

/* Preserve a strong reading surface over the aisle image. */
html body.about-page .about-origin-story::after{
  background:
    linear-gradient(90deg,#050505 0%,rgba(5,5,5,.94) 27%,rgba(5,5,5,.70) 49%,rgba(5,5,5,.28) 73%,rgba(5,5,5,.70) 100%),
    linear-gradient(180deg,#050505 0%,rgba(5,5,5,.16) 18%,rgba(5,5,5,.10) 61%,rgba(5,5,5,.74) 88%,#050505 100%)!important;
}

/* Second memory: lower About section, right-side soft dissolve. */
html body.about-page .about-story::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:-2!important;
  right:-4vw!important;
  top:4%!important;
  width:min(58vw,920px)!important;
  height:92%!important;
  aspect-ratio:auto!important;
  background:url("images/about/about-bg-computer-memory-v272.webp") 58% center/cover no-repeat!important;
  opacity:.125!important;
  filter:saturate(.70) contrast(1.02) brightness(.68)!important;
  pointer-events:none!important;
  box-shadow:none!important;
  -webkit-mask-image:
    radial-gradient(ellipse 76% 75% at 57% 50%,#000 0 46%,rgba(0,0,0,.78) 62%,rgba(0,0,0,.34) 78%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 17%,#000 39%,#000 84%,transparent 100%)!important;
  mask-image:
    radial-gradient(ellipse 76% 75% at 57% 50%,#000 0 46%,rgba(0,0,0,.78) 62%,rgba(0,0,0,.34) 78%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 17%,#000 39%,#000 84%,transparent 100%)!important;
  -webkit-mask-composite:source-in!important;
  mask-composite:intersect!important;
}
html body.about-page .about-story::before{
  z-index:-1!important;
  background:
    linear-gradient(90deg,#070606 0%,rgba(7,6,6,.96) 34%,rgba(7,6,6,.78) 55%,rgba(7,6,6,.36) 78%,#050505 100%),
    linear-gradient(180deg,#070606 0%,rgba(7,6,6,.24) 18%,rgba(5,5,5,.24) 68%,#050505 100%)!important;
  box-shadow:none!important;
}

@media(max-width:1000px){
  html body.about-page .about-origin-story::before{
    width:82vw!important;
    right:-18vw!important;
    opacity:.115!important;
  }
  html body.about-page .about-story::after{
    width:82vw!important;
    right:-26vw!important;
    opacity:.10!important;
  }
}
@media(max-width:680px){
  html body.about-page .about-origin-story::before{
    width:118vw!important;
    right:-55vw!important;
    opacity:.085!important;
  }
  html body.about-page .about-story::after{
    width:118vw!important;
    right:-66vw!important;
    opacity:.075!important;
  }
}

/* ---------------------------------------------------------
   2. HEADER ACCOUNT IDENTITY — keep the chosen avatar, but
   make it behave exactly like the other circular header tools.
   No expanding identity pill or off-center portrait.
   --------------------------------------------------------- */
html body .bb-site-header .shop-tools>a.bb-account-shortcut.bb-account-identity,
html body .bb-site-header .shop-tools>a.bb-account-shortcut.bb-account-authenticated{
  box-sizing:border-box!important;
  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;
  display:grid!important;
  place-items:center!important;
  gap:0!important;
  padding:0!important;
  border-radius:50%!important;
  overflow:visible!important;
  background:#080a0d!important;
}
html body .bb-site-header .bb-header-avatar-wrap{
  position:relative!important;
  display:block!important;
  width:25px!important;
  min-width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
}
html body .bb-site-header .bb-header-avatar{
  display:block!important;
  width:25px!important;
  height:25px!important;
  max-width:25px!important;
  max-height:25px!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  border:1px solid rgba(224,52,46,.58)!important;
  box-shadow:none!important;
  transform:none!important;
}
html body .bb-site-header .bb-header-online-dot{
  right:-3px!important;
  bottom:-2px!important;
  width:6px!important;
  height:6px!important;
  border:2px solid #080a0d!important;
  box-shadow:0 0 5px rgba(85,218,119,.42)!important;
}
html body .bb-site-header .bb-header-nickname{display:none!important}

@media(max-width:1280px) and (min-width:1101px){
  html body .bb-site-header .shop-tools>a.bb-account-shortcut.bb-account-identity,
  html body .bb-site-header .shop-tools>a.bb-account-shortcut.bb-account-authenticated{
    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;
  }
  html body .bb-site-header .bb-header-avatar-wrap,
  html body .bb-site-header .bb-header-avatar{
    width:23px!important;min-width:23px!important;max-width:23px!important;height:23px!important;
  }
}

/* ---------------------------------------------------------
   3. PRODUCT GALLERY — arrow buttons stay physically still.
   Hover may brighten, but no rise/drop/dunk animation in either
   the normal gallery or full-screen zoom view.
   --------------------------------------------------------- */
.product-page .bb-gallery-nav,
.product-page .bb-gallery-nav:hover,
.product-page .bb-gallery-nav:focus,
.product-page .bb-gallery-nav:focus-visible,
.product-page .bb-gallery-nav:active{
  animation:none!important;
  transform:none!important;
  translate:none!important;
  margin:0!important;
}
.product-page .bb-photo-zoom__nav,
.product-page .bb-photo-zoom__nav:hover,
.product-page .bb-photo-zoom__nav:focus,
.product-page .bb-photo-zoom__nav:focus-visible,
.product-page .bb-photo-zoom__nav:active{
  top:50%!important;
  animation:none!important;
  transform:translateY(-50%)!important;
  translate:none!important;
  margin:0!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.product-page .bb-photo-zoom__nav:hover,
.product-page .bb-photo-zoom__nav:focus-visible{
  filter:brightness(1.12)!important;
  border-color:rgba(227,59,53,.65)!important;
  box-shadow:0 0 0 1px rgba(227,59,53,.22),0 0 20px rgba(227,59,53,.12)!important;
  outline:none!important;
}