/* Navneleg payment badges v1.
   All payment marks are self-contained tiles and are sized by height so their
   native proportions and backgrounds stay intact. */

.nls-paybadges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: inherit;
  font-size: 13px;
  line-height: 1.4;
}

.nls-paybadges__label {
  flex: 0 0 100%;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

.nls-paybadges__brands {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.nls-paybadges__brand {
  display: block;
  height: 26px;
  width: auto;
  margin: 0;
  border-radius: 4px;
  /* Salient sets max-width on img inside widgets; keep the tiles from collapsing. */
  max-width: none;
}

/* Product page: compact, single-line assurance row from the product mockup. */
html body.single-product .summary.entry-summary .nls-paybadges--product {
  flex-wrap: nowrap!important;
  align-items: center!important;
  gap: 10px!important;
  width: 100%!important;
  height: auto!important;
  min-height: 0!important;
  margin: 20px 0 0!important;
  padding: 16px 0 0!important;
  border-top: 1px solid rgba(40, 36, 42, .1);
}

html body.single-product .summary.entry-summary .nls-paybadges--product .nls-paybadges__label {
  flex: 0 0 auto!important;
  width: auto!important;
  font-size: 12.5px!important;
  font-weight: 400!important;
  color: inherit;
  opacity: .58;
}

html body.single-product .summary.entry-summary .nls-paybadges--product .nls-paybadges__brands {
  display: inline-flex!important;
  flex-wrap: nowrap!important;
  align-items: center!important;
  gap: 6px!important;
}

html body.single-product .summary.entry-summary .nls-paybadges--product .nls-paybadges__brand {
  width: auto!important;
  height: 24px!important;
  max-width: none!important;
  max-height: 24px!important;
  margin: 0!important;
  padding: 0!important;
}

/* Mini-cart: centred under the buttons, label is redundant there. */
.nls-paybadges--mini-cart {
  justify-content: center;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(40, 36, 42, .1);
}

.nls-paybadges--mini-cart .nls-paybadges__label { display: none; }
.nls-paybadges--mini-cart .nls-paybadges__brand { height: 24px; }

/* Footer and slide-out menu: left aligned under the column text. */
.nls-paybadges--footer,
.nls-paybadges--slideout {
  align-items: flex-start;
  margin: 4px 0 0;
}

.nls-paybadges--footer .nls-paybadges__brands {
  gap: 10px;
}
.nls-paybadges--footer .nls-paybadges__brand {
  height: 28px!important;
  max-height: 28px!important;
  width: auto!important;
  max-width: 92px!important;
  object-fit: contain;
  margin: 0!important;
}
.nls-paybadges--slideout .nls-paybadges__brand { height: 24px; }

@media (min-width: 691px) and (max-width: 1024px) {
  .nls-paybadges--footer .nls-paybadges__brands { gap: 8px; }
  .nls-paybadges--footer .nls-paybadges__brand {
    height: 24px!important;
    max-height: 24px!important;
    max-width: 80px!important;
  }
}

/* The slide-out column is narrow; let the marks wrap rather than overflow. */
.nls-paybadges--slideout .nls-paybadges__brands { flex-wrap: wrap; }

@media (max-width: 690px) {
  .nls-paybadges { gap: 6px 8px; }
  .nls-paybadges--footer .nls-paybadges__brands { gap: 6px; }
  .nls-paybadges--footer .nls-paybadges__brand { height: 20px!important; width: auto!important; max-width: 76px; }
  .nls-paybadges__brand { height: 24px; }
  html body.single-product .summary.entry-summary .nls-paybadges--product {
    flex-wrap: wrap!important;
  }
  html body.single-product .summary.entry-summary .nls-paybadges--product .nls-paybadges__label {
    flex: 0 0 100%!important;
  }
  html body.single-product .summary.entry-summary .nls-paybadges--product .nls-paybadges__brands {
    flex-wrap: wrap!important;
  }
  .nls-paybadges--product .nls-paybadges__brand { height: 24px!important; }
}