/* ===== rev272f.css ===== */
/* =========================================================
   Rev272F — iPhone stability + restrained page titles + lightbox polish
   Cosmetic/performance layer only. Cart / checkout transport is untouched.
   ========================================================= */

/* ---------------------------------------------------------
   1. INFO / UTILITY PAGE TITLES
   Keep Account, Policies, FAQ, Cart, etc. from feeling oversized
   or crowding the first content panel.
   --------------------------------------------------------- */
body:not(.arcade-mini-page) .bb-info-shell > h1,
body:not(.arcade-mini-page) .bb-contact-shell > h1,
body.cart-page .cart-main h1,
body.cart-page .cart-shell h1{
  font-family:"Bahnschrift SemiCondensed",Bahnschrift,"Arial Narrow","Segoe UI",Arial,sans-serif!important;
  font-size:clamp(36px,4.15vw,58px)!important;
  font-weight:720!important;
  line-height:.94!important;
  letter-spacing:.018em!important;
  text-transform:uppercase!important;
  margin-top:4px!important;
  margin-bottom:34px!important;
}
body:not(.arcade-mini-page) .bb-info-shell > .catalog-kicker,
body:not(.arcade-mini-page) .bb-contact-shell > .catalog-kicker{
  margin-bottom:9px!important;
}
.account-page .bb-account-layout,
.account-page .bb-account-dashboard-v2{
  margin-top:0!important;
}

/* ---------------------------------------------------------
   2. PRODUCT IMAGE VIEWER
   Keep the zoom experience as a clean borderless lightbox rather
   than a near-fullscreen slab. The backdrop still isolates the item.
   --------------------------------------------------------- */
.product-page .bb-photo-zoom{
  padding:clamp(18px,4vw,52px)!important;
  background:rgba(0,0,0,.82)!important;
  -webkit-backdrop-filter:blur(9px)!important;
  backdrop-filter:blur(9px)!important;
}
.product-page .bb-photo-zoom__panel{
  width:min(980px,calc(100vw - 72px))!important;
  height:min(780px,calc(100dvh - 84px))!important;
  max-width:980px!important;
  max-height:780px!important;
  border:0!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#050607!important;
  box-shadow:0 34px 110px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.055)!important;
}
.product-page .bb-photo-zoom__toolbar{
  min-height:50px!important;
  height:50px!important;
  background:#07090b!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
}
.product-page .bb-photo-zoom__viewport{
  padding:18px!important;
  background:#030405!important;
}

/* ---------------------------------------------------------
   3. PHONE HEADER — deterministic layout for Safari.
   Authenticated avatar stays in the mobile menu, not in the crowded
   top row. Hamburger bars are drawn on the button itself so Safari
   cannot lose three empty child <i> elements.
   --------------------------------------------------------- */
@media(max-width:760px){
  html body .bb-site-header{
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    grid-template-rows:64px!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    gap:5px!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{
    height:64px!important;
    min-height:64px!important;
    width:min(158px,43vw)!important;
    max-width:158px!important;
  }
  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>img.bb-final-header-logo{
    width:min(126px,34vw)!important;
    max-width:126px!important;
    max-height:43px!important;
    flex-basis:126px!important;
  }
  html body .bb-site-header .shop-tools{
    grid-column:2!important;
    gap:4px!important;
  }
  /* Later account/avatar rules used to override the old mobile hide. */
  html body .bb-site-header .shop-tools .language-picker,
  html body .bb-site-header .shop-tools .bb-wishlist-link,
  html body .bb-site-header .shop-tools .bb-account-shortcut,
  html body .bb-site-header .shop-tools .bb-account-shortcut.bb-account-authenticated,
  html body .bb-site-header .shop-tools .bb-account-shortcut.bb-account-identity{
    display:none!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;
  }
  html body .bb-site-header .shop-menu-toggle{
    grid-column:3!important;
    display:block!important;
    position:relative!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.15)!important;
    border-radius:6px!important;
    background:
      linear-gradient(#eee,#eee) center calc(50% - 7px)/20px 1.5px no-repeat,
      linear-gradient(#eee,#eee) center 50%/20px 1.5px no-repeat,
      linear-gradient(#eee,#eee) center calc(50% + 7px)/20px 1.5px no-repeat,
      #090b0e!important;
  }
  html body .bb-site-header .shop-menu-toggle i{display:none!important}
  html body .bb-site-header .bb-site-nav{top:64px!important}
  html body .bb-site-header .bb-site-nav.open{max-height:calc(100dvh - 64px)!important}

  /* iOS Safari gets a lighter compositing path. */
  body.shop-landing-page .universe-hover-video{display:none!important}
  body.shop-landing-page .universe-tile,
  body.shop-landing-page .bb-inventory-browser,
  body.shop-landing-page .product-card,
  body.shop-landing-page .bb-filter-panel,
  body.shop-landing-page .bb-inventory-toolbar{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
  }
  body.shop-landing-page .catalog-section{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body.shop-landing-page .universe-grid{
    gap:10px!important;
  }

  /* Utility/account pages: tighter, deliberate mobile rhythm. */
  body:not(.arcade-mini-page) .bb-info-shell,
  body:not(.arcade-mini-page) .bb-contact-shell{
    width:100%!important;
    max-width:none!important;
    padding:34px 14px 64px!important;
  }
  body:not(.arcade-mini-page) .bb-info-shell > h1,
  body:not(.arcade-mini-page) .bb-contact-shell > h1,
  body.cart-page .cart-main h1,
  body.cart-page .cart-shell h1{
    font-size:clamp(34px,10.5vw,44px)!important;
    line-height:.94!important;
    margin-bottom:26px!important;
  }
  .account-page .bb-profile-command{
    border-radius:12px!important;
    padding:18px!important;
  }
  .account-page .bb-profile-editor,
  .account-page .bb-account-orders{
    border-radius:12px!important;
  }

  /* Lightbox stays a popup on phones too. */
  .product-page .bb-photo-zoom{padding:14px!important}
  .product-page .bb-photo-zoom__panel{
    width:calc(100vw - 28px)!important;
    height:min(76dvh,650px)!important;
    max-height:76dvh!important;
    border-radius:14px!important;
  }
  .product-page .bb-photo-zoom__viewport{padding:10px!important}
}

/* Load-more button for mobile inventory batching. */
.bb-mobile-inventory-more{
  display:none;
  width:100%;
  min-height:48px;
  margin:18px 0 0;
  border:1px solid rgba(227,58,50,.55);
  border-radius:5px;
  background:#0a0c0f;
  color:#f4f2ee;
  font-family:"Bahnschrift SemiCondensed",Bahnschrift,"Arial Narrow",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  cursor:pointer;
}
@media(max-width:820px),(pointer:coarse){
  .bb-mobile-inventory-more[aria-hidden="false"]{display:block}
}

/* Phone menu keeps utilities available after decluttering the top row. */
.bb-mobile-nav-tools .bb-mobile-language-picker{display:none}
@media(max-width:900px){
  .bb-mobile-nav-tools .bb-mobile-language-picker{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    width:100%;min-height:46px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.07);
    color:#a9adb4;font-size:10px;font-weight:800;letter-spacing:.12em;box-sizing:border-box;
  }
  .bb-mobile-nav-tools .bb-mobile-language-picker select{
    min-width:82px;height:34px;padding:0 26px 0 10px;border:1px solid rgba(255,255,255,.12);border-radius:5px;
    background:#090b0e;color:#f3f1ed;font:inherit;
  }
}

/* ===== rev272b.css ===== */
/* =========================================================
   Rev272B — category continuity polish ONLY
   The Bacon Bin
   Cosmetic scope: category hero type/logo scale/spacing.
   No cart, checkout, account, gallery, inventory, or API logic.
   ========================================================= */

/* 1. CATEGORY DIRECTORY COPY — slightly larger without changing layout. */
html body.category-page .category-breadcrumbs{
  font-size:11.5px!important;
  letter-spacing:.135em!important;
  line-height:1.35!important;
  margin-bottom:18px!important;
}
html body.category-page .category-hero-copy>.catalog-kicker{
  font-size:10.5px!important;
  letter-spacing:.18em!important;
  line-height:1.25!important;
  margin-bottom:14px!important;
}

/* 2. CATEGORY INVENTORY TITLES — mirror the Shop wordmark language:
      category name in warm white, PRODUCTS in Bacon Bin red. */
html body.category-page .category-products-head h2{
  display:flex!important;
  align-items:baseline!important;
  flex-wrap:wrap!important;
  gap:.22em!important;
  font-family:"Arial Black",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif!important;
  font-size:clamp(32px,3.5vw,46px)!important;
  font-weight:900!important;
  line-height:.9!important;
  letter-spacing:-.052em!important;
  text-transform:uppercase!important;
  text-shadow:0 2px 0 rgba(0,0,0,.95),0 9px 22px rgba(0,0,0,.34)!important;
}
html body.category-page .category-products-head h2 .bb-category-heading-main{
  color:#f5f3ef!important;
}
html body.category-page .category-products-head h2 .bb-category-heading-accent{
  color:#ef332f!important;
  font:inherit!important;
}

/* 3. VIDEO GAMES — its source artwork is much taller/squarer than the other
      category marks, so equal max-height made it read optically smaller.
      Give this one a modest optical correction only. */
html body.category-page.category-video-games .category-title-logo.video-games-title-logo{
  max-height:152px!important;
  max-width:min(455px,61vw)!important;
  width:auto!important;
}

/* 4. SKATEBOARDING — collapse the artificial hero floor so the logo flows
      directly into the product heading instead of leaving a dead-air band. */
html body.category-page.category-skateboarding .skateboarding-category-hero{
  min-height:0!important;
  padding-bottom:0!important;
}
html body.category-page.category-skateboarding .category-logo-heading-skate{
  margin-bottom:0!important;
}
html body.category-page.category-skateboarding .skateboarding-products{
  padding-top:14px!important;
}

@media(max-width:800px){
  html body.category-page .category-breadcrumbs{font-size:11px!important}
  html body.category-page .category-hero-copy>.catalog-kicker{font-size:10px!important}
  html body.category-page.category-video-games .category-title-logo.video-games-title-logo{
    max-height:124px!important;
    max-width:74vw!important;
  }
  html body.category-page.category-skateboarding .skateboarding-category-hero{
    min-height:0!important;
    padding-bottom:0!important;
  }
  html body.category-page.category-skateboarding .skateboarding-products{padding-top:12px!important}
}

@media(max-width:520px){
  html body.category-page .category-breadcrumbs{font-size:10.5px!important;gap:7px!important}
  html body.category-page .category-hero-copy>.catalog-kicker{font-size:9.8px!important}
  html body.category-page .category-products-head h2{
    font-size:clamp(29px,9vw,39px)!important;
    gap:.18em!important;
  }
  html body.category-page.category-video-games .category-title-logo.video-games-title-logo{
    max-height:100px!important;
    max-width:82vw!important;
  }
  html body.category-page.category-skateboarding .skateboarding-category-hero{
    min-height:0!important;
    padding-bottom:0!important;
  }
  html body.category-page.category-skateboarding .skateboarding-products{padding-top:10px!important}
}

/* ===== rev272h.css ===== */
/* =========================================================
   Rev272H — safe visual continuity + Arcade circuitry + security UI
   No cart / checkout transport rules live in this file.
   ========================================================= */

:root{
  --bb-glass-radius:14px;
  --bb-glass-border:rgba(255,255,255,.085);
  --bb-glass-bg:linear-gradient(145deg,rgba(15,17,20,.93),rgba(6,7,9,.95));
  --bb-glass-shadow:0 24px 66px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.025);
}

/* ---------------------------------------------------------
   SAFE SITEWIDE GLASS POLISH
   Existing layout/geometry is retained; this only softens surfaces.
   --------------------------------------------------------- */
body:not(.arcade-mini-page) :is(
  .bb-legal-copy,
  .bb-faq details,
  .bb-account-card,
  .bb-profile-command,
  .bb-profile-editor,
  .bb-account-orders,
  .bb-collector-panel,
  .bb-product-journal .bb-journal-panel,
  .cart-summary,
  .cart-item,
  .wishlist-card,
  .bb-mini-product,
  .merch-card,
  .category-products .product-card,
  .catalog-section .product-card
){
  border-radius:var(--bb-glass-radius)!important;
}
body:not(.arcade-mini-page) :is(
  .bb-legal-copy,
  .bb-account-card,
  .bb-profile-command,
  .bb-profile-editor,
  .bb-account-orders,
  .bb-product-journal .bb-journal-panel
){
  border-color:var(--bb-glass-border)!important;
  background:var(--bb-glass-bg)!important;
  box-shadow:var(--bb-glass-shadow)!important;
}
body:not(.arcade-mini-page) .product-card,
body:not(.arcade-mini-page) .cart-item,
body:not(.arcade-mini-page) .wishlist-card,
body:not(.arcade-mini-page) .bb-mini-product,
body:not(.arcade-mini-page) .merch-card{
  overflow:hidden;
}

/* Category search gets a clear active/focus treatment. */
body.category-page .catalog-search{
  border-radius:11px!important;
  overflow:hidden!important;
  background:rgba(10,12,15,.90)!important;
  border-color:rgba(255,255,255,.095)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 30px rgba(0,0,0,.16)!important;
}
body.category-page .catalog-search:focus-within{
  border-color:rgba(232,63,56,.72)!important;
  box-shadow:0 0 0 3px rgba(224,58,51,.09),0 16px 36px rgba(0,0,0,.22)!important;
}
body.category-page .catalog-empty{
  padding:20px 0;color:#9fa3aa;
}

/* ---------------------------------------------------------
   CONTACT — approved site header logo inside the location card.
   --------------------------------------------------------- */
body.contact-page .bb-contact-location .bb-location-brand{
  display:block;
  width:min(310px,100%);
  height:auto;
  margin:2px 0 18px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.42));
}
body.contact-page .bb-contact-location address{
  margin-top:4px;
}

/* Turnstile/security area follows Bacon Bin glass language. */
.bb-security-challenge{
  display:none;
  min-height:0;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(5,7,10,.74);
}
.bb-security-challenge.is-ready{display:block}
.bb-security-challenge .cf-turnstile{min-height:65px}
.bb-security-note{margin:6px 0 0;color:#777d86;font-size:9px;line-height:1.45;letter-spacing:.02em}

/* ---------------------------------------------------------
   ARCADE — circuitry only behind the EXISTING approved logo.
   The asset itself contains no generated Arcade logo artwork.
   --------------------------------------------------------- */
body.arcade-hub-page .bb-arcade-poster-main::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.02) 24%,rgba(0,0,0,.18) 48%,rgba(0,0,0,.72) 72%,#000 100%),
    url("images/arcade-rev272h/arcade-circuit-ceiling-v272h.webp") center top/2000px auto no-repeat!important;
  opacity:.74!important;
}
body.arcade-hub-page .bb-arcade-page-logo{
  position:relative!important;
  z-index:12!important;
}
body.arcade-hub-page .bb-arcade-poster{
  position:relative!important;
  z-index:2!important;
}
@media(max-width:900px){
  body.arcade-hub-page .bb-arcade-poster-main::after{
    background-size:1450px auto!important;
    background-position:center top!important;
    opacity:.60!important;
  }
}
@media(max-width:520px){
  body.arcade-hub-page .bb-arcade-poster-main::after{
    background-size:1120px auto!important;
    background-position:center top!important;
    opacity:.50!important;
  }
}

/* Slightly more deliberate rounded/glass continuity on informational pages. */
body.info-page .bb-info-shell :is(.bb-legal-copy,.bb-faq details),
body.contact-page .bb-contact-form-card,
body.contact-page .bb-contact-side>article{
  border-radius:16px!important;
}

@media(max-width:680px){
  :root{--bb-glass-radius:11px}
  body.contact-page .bb-contact-location .bb-location-brand{width:min(270px,92%)}
  body.info-page .bb-info-shell :is(.bb-legal-copy,.bb-faq details),
  body.contact-page .bb-contact-form-card,
  body.contact-page .bb-contact-side>article{border-radius:12px!important}
}