/* Phones and small tablets: the yellow top bar scrolls away, the logo / cart row stays pinned. */
/* "html" outweighs the theme's own header.sticky-header rules, which load after this file */
@media (max-width: 767.98px) {
  html header.sticky-header {
    top: calc(-1 * var(--bb-topbar-h, 0px));
  }
  html body.admin-bar header.sticky-header {
    top: calc(46px - var(--bb-topbar-h, 0px));
  }
}

/* the footer pattern is full width, so on wide screens it is taller than the footer; keep it inside */
footer.bg-brownLight-900 {
  overflow: hidden;
}

/* /bafboxy/ benefits: 2 per row on phones (the fifth centred), 3 on tablets, 5 on desktop */
.bb-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.bb-benefits > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .bb-benefits {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2rem;
  }
  .bb-benefits > li {
    grid-column: span 2;
  }
  .bb-benefits > li:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .bb-benefits > li:last-child:nth-child(odd) {
    grid-column: 4 / span 2;
  }
}
@media (min-width: 1279px) {
  .bb-benefits {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bb-benefits > li,
  .bb-benefits > li:nth-child(4),
  .bb-benefits > li:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Gift wrap banner under the box offer */
.bb-gift-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  background: #477b39;
  color: #fff;
  text-align: center;
}
.bb-gift-banner::before {
  /* the existing winter pattern from the Christmas landing page, faint */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/xmas/pattern-six.svg") center / cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.bb-gift-banner > * {
  position: relative;
}
.bb-gift-banner__img {
  width: min(260px, 70%);
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.25);
}
.bb-gift-banner__title {
  margin: 0;
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}
.bb-gift-banner__text {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.9);
}
.bb-gift-banner__note {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.75);
}
.bb-gift-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: #af342d;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s;
}
.bb-gift-banner__cta:hover {
  background: #922a24;
  color: #fff;
}
@media (min-width: 768px) {
  .bb-gift-banner {
    flex-direction: row;
    justify-content: center;
    gap: 3rem;
    padding: 2.5rem 3rem;
    text-align: left;
  }
  .bb-gift-banner__img {
    width: 240px;
    flex-shrink: 0;
  }
  .bb-gift-banner__title {
    font-size: 2rem;
  }
}

/* Christmas look of /bafboxy/ (body.bb-xmas, see inc/bafbox-season.php): red buttons, green bands */
.bb-xmas header.sticky-header .btn-blue {
  background-color: #af342d;
  color: #fff;
}
.bb-xmas header.sticky-header .btn-blue:hover {
  background-color: #922a24;
  color: #fff;
}
.bb-xmas .bb-hero {
  background-color: #477b39;
  background-image: url("../images/xmas/pattern-first.svg") !important;
}
/* the wide desktop hero crops the pattern top and bottom; show more of its lower shapes */
@media (min-width: 768px) {
  .bb-xmas .bb-hero {
    background-position: left bottom;
  }
}
/* on phones the pattern shapes run into the heading; plain green (with the snow) there */
@media (max-width: 767.98px) {
  .bb-xmas .bb-hero {
    background-image: none !important;
  }
}
.bb-xmas .bb-hero-cta {
  background-color: #af342d;
  color: #fff;
}
.bb-xmas .bb-hero-cta:hover {
  background-color: #922a24;
  color: #fff;
}
.bb-xmas li.sub-product .btn-yellow:not([aria-disabled="true"]),
.bb-xmas .footer-cart-view.btn-yellow {
  background-color: #af342d;
  color: #fff;
}
.bb-xmas li.sub-product .btn-yellow:not([aria-disabled="true"]):hover,
.bb-xmas .footer-cart-view.btn-yellow:hover {
  background-color: #922a24;
  color: #fff;
}
.bb-xmas .bb-hero {
  position: relative;
}
.bb-xmas .bb-hero > .container--box {
  position: relative;
  z-index: 1;
}
.bb-snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bb-snow i {
  position: absolute;
  top: -12px;
  border-radius: 50%;
  background: #fff;
  will-change: transform;
  animation-name: bb-snow-fall, bb-snow-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
@keyframes bb-snow-fall {
  from { translate: 0 0; }
  to { translate: 0 var(--bb-snow-fall, 600px); }
}
@keyframes bb-snow-sway {
  from { transform: translateX(-12px); }
  to { transform: translateX(12px); }
}
/* the gift banner follows the box list closely on desktop */
@media (min-width: 768px) {
  .bb-xmas #subscription-form-new .sub-product-listing.sub-product-listing {
    margin-bottom: 40px;
  }
}