/* Bar menu: section-level hooks on top of the ported design CSS.

   misfit/css/landing.css draws .menu / .tiers / .tier and misfit/css/offers.css
   draws .tier-gift and the card links exactly as the approved design does. This
   file only re-points what the section's own settings can change, plus the two
   places where a platform component's markup needs to sit inside the design's
   own boxes. */

.menu {
  background-color: var(--mm-menu-bg, var(--mm-plum, #251938));
}

.tier {
  background: var(--mm-tier-bg, #f3e8d0);
}

/* The design ships four tiers per row; the count is a setting because a
   merchant can publish fewer bundles. Only desktop: the design's own 900px and
   580px rules own the narrow layouts. */
@media (min-width: 901px) {
  .tiers {
    grid-template-columns: repeat(var(--mm-tier-columns, 4), minmax(0, 1fr));
  }
}

/* product/price renders its amount in a nested element carrying the theme's
   typography class, so the design's .price type has to be handed down. */
.tier .price .product-price__item {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.tier .price.product-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

/* product/form wraps the submit button in <theme-product-form>, which becomes
   the flex item the design expects the button to be. */
.tier .product-form {
  display: block;
  width: 100%;
}

/* The gift line's amount is painted from the store's money format on load. */
.tier-gift [data-offer-amount]:empty::before {
  content: "\2007\2007";
}