/* Shop the collection: section-level hooks on top of the ported design CSS.

   misfit/css/landing.css draws .shop-all / .shop-card and turns the grid into a
   horizontal snap scroller below 580px; misfit/css/offers.css draws the card
   links. Only the settings-driven parts live here. */

/* Column counts are settings because the collection can hold any number of
   products. The design's own 580px rule replaces the grid with a scroller, so
   these only touch the two grid bands above it. */
@media (min-width: 901px) {
  .shop-products {
    grid-template-columns: repeat(var(--mm-shop-desktop-columns, 3), minmax(0, 1fr));
  }
}
@media (min-width: 581px) and (max-width: 900px) {
  .shop-products {
    grid-template-columns: repeat(var(--mm-shop-tablet-columns, 2), 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. */
.shop-buy .price .product-price__item {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.shop-buy .price.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* product/form wraps the submit button in <theme-product-form>, which takes the
   button's place in the design's .shop-buy row. */
.shop-buy .product-form {
  display: block;
}