/* Black Friday artwork is included in the shared Chrome on every storefront page.
   The warning strip and navigation are fixed, so reserve their height above
   the naturally scrolling promotion instead of placing the image underneath. */
.site-promo {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: calc(var(--warn-h) + var(--head-h));
  line-height: 0;
  background: #090000;
  text-decoration: none;
}
.site-promo__image {
  display: block;
  width: 100%;
  height: auto;
}
.site-promo:focus-visible { outline: 3px solid #ffe000; outline-offset: -3px; }
.site-promo__mobile-caption { display: none; }

/* These pages previously reserved header height in their own top padding.
   The shared banner now reserves that space, so avoid an extra empty band. */
body.page-shop .phero { padding-top: 50px; }
body.page-product .pdp__top { padding-top: 30px; }
body.page-cart .cartpage { padding-top: 40px; }
body.page-app .app-main { padding-top: 32px; }

@media (max-width: 700px) {
  .site-promo__mobile-caption {
    display: block;
    padding: 12px 16px;
    border-top: 2px solid #ed1515;
    background: #110807;
    color: #ffe000;
    text-align: center;
    font: 700 12px/1.5 "Chakra Petch", sans-serif;
    letter-spacing: .025em;
    text-transform: uppercase;
  }
  body.page-shop .phero { padding-top: 30px; }
  body.page-product .pdp__top { padding-top: 16px; }
}