/* Product claim band. Tokens only, per tokens.css. */

.pbg {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-8);
}

.pbg__h {
  margin: 0 0 var(--sp-6);
}

/* A centred, wrapping row rather than a grid (QA R2-04). Items share the
   width evenly between 8rem and 12rem, so seven benefits sit on one desktop
   line, and a leftover item on a narrower screen is centred instead of
   stranded in the left column. Works for any count the merchant sets. */
.pbg__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-6) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pbg__item {
  flex: 1 1 8rem;
  max-width: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  min-width: 0;
}

/* Height, not a square box — see the note in sections/pdp/pdp.css. The seals
   have different silhouettes and viewBoxes; matching their heights is what
   makes them look like one set. */
.pbg__icon {
  height: 60px;
  width: auto;
  max-width: 88px;
  color: var(--gold-line);
}

.pbg__label {
  color: var(--ink);
}

.pbg__note {
  text-wrap: balance;
}

.pbg__link {
  display: flex;
  width: fit-content;
  margin: var(--sp-7) auto 0;
}

@media (max-width: 34rem) {
  .pbg__item {
    flex-basis: 7rem;
  }

  .pbg__icon {
    height: 48px;
    max-width: 72px;
  }
}