/* Benefit Grid — two, three or four boxes of icon, title and a line of text.
 *
 * No script at all: the column count is a custom property the Liquid works out
 * from how many boxes are filled in, so the grid answers to the merchant
 * without a byte of JavaScript and without a second paint.
 *
 * The preset icons are the set every block shares, written in between the
 * markers below by scripts/sync-icons.mjs. Edit scripts/icons.mjs, not this.
 */

.pb-bg {
  --pbi-s: var(--pb-bg-is, 28px);
  --pbi-c: var(--pb-bg-ico, #1a1a1a);
  font-family: inherit;
  color: var(--pb-bg-text, #1a1a1a);
  margin-block: var(--pb-bg-st, 0) var(--pb-bg-sb, 0);
}

.pb-bg__grid {
  display: grid;
  grid-template-columns: repeat(var(--pb-bg-cols, 2), minmax(0, 1fr));
  gap: var(--pb-bg-gap, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pb-bg__box {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  min-width: 0;
}

.pb-bg--card .pb-bg__box {
  background: var(--pb-bg-bg, #f4f4f5);
  border-radius: var(--pb-bg-r, 10px);
  padding: var(--pb-bg-p, 18px);
  border: var(--pb-bg-bw, 0) solid color-mix(in srgb, var(--pb-bg-text, #1a1a1a) 16%, transparent);
}

/* Icon beside the words rather than above them. The body has to be allowed to
   shrink, or a long line pushes the icon out of the box. */
.pb-bg--beside .pb-bg__box {
  flex-direction: row;
  align-items: center;
  gap: 0.85em;
}
.pb-bg--beside .pb-bg__body { min-width: 0; }

.pb-bg--center .pb-bg__box { text-align: center; align-items: center; }
.pb-bg--center.pb-bg--beside .pb-bg__box { text-align: start; justify-content: center; }

.pb-bg__title {
  margin: 0;
  font-weight: 600;
  font-size: var(--pb-bg-ts, 16px);
  line-height: 1.3;
}

/* The second line is the same colour, held back — it reads as supporting text
   on any background, light or dark, without a second colour setting. */
.pb-bg__text {
  margin: 0.3em 0 0;
  font-size: var(--pb-bg-bs, 14px);
  line-height: 1.45;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.pb-bg__text > :first-child { margin-top: 0; }
.pb-bg__text > :last-child { margin-bottom: 0; }

/* Uploaded art keeps its proportions, so a wide logo stays wide; "uniform"
   forces the square, which lines the icons up across the boxes. */
.pb-bg__icon {
  height: var(--pb-bg-is, 28px);
  width: auto;
  max-width: calc(var(--pb-bg-is, 28px) * 2.5);
  object-fit: contain;
  flex: 0 0 auto;
}
.pb-bg--fit .pb-bg__icon {
  width: var(--pb-bg-is, 28px);
  max-width: none;
}

.pb-bg__hint {
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 6px;
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: center;
}

@media (max-width: 749px) {
  .pb-bg__grid { grid-template-columns: repeat(var(--pb-bg-pcols, 1), minmax(0, 1fr)); }
}

/* pb-icons:start — written by scripts/sync-icons.mjs, do not edit by hand */
.pbi{width:var(--pbi-s,20px);height:var(--pbi-s,20px);flex:0 0 auto;background:var(--pbi-c,currentColor);-webkit-mask:var(--pbi-src) center / contain no-repeat;mask:var(--pbi-src) center / contain no-repeat}
.pbi--cf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0M10.5 16.3 6.2 12l1.5-1.5 2.8 2.8 5.8-5.8L17.8 9z'/%3E%3C/svg%3E")}
.pbi--ck{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E")}
.pbi--tk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l4 3.5V16h-8z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E")}
.pbi--sh{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 5.5v5.8c0 5-3.4 8.7-8 10.2-4.6-1.5-8-5.2-8-10.2V5.5z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.pbi--rf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 3v5h-5'/%3E%3C/svg%3E")}
.pbi--lf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5C3 12 8 4.5 20.5 3.5c1 11-5 16-12.5 16z'/%3E%3Cpath d='M7.5 17.5c2.5-4.5 5.5-7 9-8.5'/%3E%3C/svg%3E")}
.pbi--st{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.5 1-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.6l6.5-1z'/%3E%3C/svg%3E")}
.pbi--cl{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 6.5V12l3.8 2.2'/%3E%3C/svg%3E")}
.pbi--lk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 10V7.5a5.2 5.2 0 0 1 10.4 0V10'/%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3C/svg%3E")}
.pbi--hs{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='13' width='4.5' height='6' rx='2'/%3E%3Crect x='17' y='13' width='4.5' height='6' rx='2'/%3E%3Cpath d='M21 19v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E")}
.pbi--bx{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 21 7v10l-9 4.2L3 17V7z'/%3E%3Cpath d='M3 7l9 4.2L21 7M12 11.2V21.2'/%3E%3C/svg%3E")}
.pbi--md{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.5' r='6.5'/%3E%3Cpath d='m8.5 15.2-1.3 6.3 4.8-2.6 4.8 2.6-1.3-6.3'/%3E%3C/svg%3E")}
.pbi--cd{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.8h19M6 15h3.5'/%3E%3C/svg%3E")}
.pbi--pp{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 2 9.8l8.3 3.4 3.4 8.3z'/%3E%3Cpath d='m10.3 13.2 11.2-10.7'/%3E%3C/svg%3E")}
.pbi--gf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8.5' width='18' height='4.5' rx='1'/%3E%3Cpath d='M4.5 13v7.5a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V13M12 8.5v13'/%3E%3Cpath d='M12 8.5S10.8 3 8 3a2.5 2.5 0 0 0 0 5.5zM12 8.5S13.2 3 16 3a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E")}
/* pb-icons:end */