/* Complete your set: section-level hooks on top of the ported design CSS.

   misfit/css/pdp.css draws .set, .set-grid, .set-card, the picked and owned
   states, the .set-card-tag and the whole .set-bar, including the three
   responsive column steps. Only the settings-driven parts are here. */

.set {
  background: var(--mm-set-bg, #140c28);
}

/* <theme-misfit-set> is the band's .wrap, so it has to be a block to centre. */
theme-misfit-set.wrap {
  display: block;
}

/* The design ships four cards per row; the count is a setting because the
   collection can hold any number of products. Desktop only: the design's own
   1000px, 860px and 560px rules own the narrow layouts. */
@media (min-width: 1001px) {
  .set-grid {
    grid-template-columns: repeat(var(--mm-set-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. */
.set-card-foot .price .product-price__item {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.set-card-foot .price.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* The threshold hint is painted from the store's money format, so reserve the
   line to stop a reflow when it lands. */
.set-bar-copy span:empty::before {
  content: "\2007";
}