/* Payment Icons block.
 *
 * Static by construction: every per-instance value rides on the root element as
 * an inline custom property. Out of the Liquid because a theme app extension
 * caps its total Liquid at 100 KiB and this one was written against that wall.
 */
.pb-pay {
  box-sizing: border-box;
  display: block;
  margin: 0.875rem 0;
  padding: var(--pb-pay-pad-y) var(--pb-pay-pad-x);
}
.pb-pay *,
.pb-pay *::before,
.pb-pay *::after { box-sizing: border-box; }

/* The resets are !important for the same reason the timeline's are: this is a
   list dropped into someone else's theme, and a rule like
   `.product__description ul { padding-left: 2rem }` beats one class and pads
   the left only, which shifts the whole row and reads as off-centre. */
.pb-pay__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pb-pay-gap);
  justify-content: var(--pb-pay-align, center);
}

/* A row that stretches: every mark keeps its own aspect and the row wraps when
   it runs out of width. */
.pb-pay__i {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  height: 2.1em;
  display: flex;
  align-items: center;
  border-radius: var(--pb-pay-radius);
  background: var(--pb-pay-bg, transparent);
  overflow: hidden;
}
.pb-pay--border-solid .pb-pay__i { border: 1px solid var(--pb-pay-border); }
.pb-pay--border-dotted .pb-pay__i { border: 1px dotted var(--pb-pay-border); }

/* Shopify's marks come as SVGs with their own viewBox; height drives them and
   the width follows, so a wide mark stays wide and a square one stays square. */
.pb-pay__i svg,
.pb-pay__i img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* A fixed grid instead: the row is cut into a set number of columns and each
   mark sits in one, which is what keeps two rows of eight lining up. */
.pb-pay--grid .pb-pay__list {
  display: grid;
  grid-template-columns: repeat(var(--pb-pay-per), 1fr);
}
.pb-pay--grid .pb-pay__i { height: auto; aspect-ratio: 8 / 5; justify-content: center; }
.pb-pay--grid .pb-pay__i svg,
.pb-pay--grid .pb-pay__i img { height: auto; width: 100%; }

/* Grey, but still legible: a flat grayscale leaves some marks nearly white on
   white, so contrast is pulled back up after the colour is taken out. */
.pb-pay--mono .pb-pay__i svg,
.pb-pay--mono .pb-pay__i img { filter: grayscale(1) contrast(1.15); }

@media (max-width: 640px) {
  .pb-pay--grid .pb-pay__list { grid-template-columns: repeat(var(--pb-pay-per-m), 1fr); }
}