/** Shopify CDN: Minification failed

Line 13:51 Unexpected "*"
Line 15:74 Unterminated string token
Line 17:81 Unterminated string token

**/
/* Product feature panel — icon feature points below the buy box.

   Colour is the THEME's: the section wrapper and every card carry
   `color-{scheme} gradient`, so backgrounds and text come from the colour
   schemes and there is no private dark/light mode to keep in sync. Spacing is
   the theme's too (`section__inner` + the pt-*/pb-* classes on the wrapper).

   Sizes here stay in PX: Ignite's root font-size is ~9.5px, so rem values
   render about 40% small (same trap as the accessories panel and the notice
   block). The heading is the exception — it uses the theme's own size classes,
   which are built for that root size. */

.pfp {
  --pfp-accent: #5b9bff;
  --pfp-cols: 3;
  --pfp-head-gap: 34px;
  --pfp-align: left;
  --pfp-align-md: left;

  color: rgb(var(--color-foreground));
}

.pfp__head {
  margin-bottom: var(--pfp-head-gap);
  text-align: var(--pfp-align);
}

/* Type comes entirely from the theme's h6…hxl / text-size-custom classes, so
   there is nothing to declare here beyond killing the browser's h1–h4 margin.
   `.pfp__accent` is just a hook — italics-convert / italics-* own its colour,
   and the line break is a real <br> emitted by the section. */
.pfp__heading {
  margin: 0;
}

.pfp__sub {
  margin: 18px 0 0;
  color: rgba(var(--color-foreground), 0.7);
}

/* 750px is Ignite's own md breakpoint, so the desktop alignment setting flips
   where every other theme section's does. */
@media screen and (min-width: 750px) {
  .pfp__head {
    text-align: var(--pfp-align-md);
  }
}

/* Off left, the subheading needs a measure too, or it runs the full 1180px and
   stops reading as a caption under the heading. */
.pfp--head-center .pfp__sub,
.pfp--head-right .pfp__sub {
  max-width: 620px;
}

.pfp--head-center .pfp__sub {
  margin-left: auto;
  margin-right: auto;
}

.pfp--head-right .pfp__sub {
  margin-left: auto;
}

.pfp__grid {
  display: grid;
  grid-template-columns: repeat(var(--pfp-cols), minmax(0, 1fr));
  gap: 20px;
}

/* No background here — the card carries its own `color-{scheme} gradient`. */
.pfp__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  min-height: 260px;
  padding: 26px 24px 28px;
  border-radius: 16px;
}

/* Deeper than the theme's own `.card--shadow`, which at 1–3% alpha disappears
   entirely when the card scheme and the section scheme are close in tone — and
   they are by default (#fff cards on the #f8f9fa page). rgba(9, 3, 2, …) is
   still the theme's shadow colour; the 1px ring stands in for a border so the
   card box doesn't change size. */
.pfp__card--shadow {
  box-shadow:
    0 0 0 1px rgba(9, 3, 2, 0.05),
    0 2px 4px rgba(9, 3, 2, 0.04),
    0 10px 28px rgba(9, 3, 2, 0.08);
}

.pfp__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.7);
}

.pfp__statement {
  margin: 0;
  font-size: 27px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: rgb(var(--color-heading));
}

.pfp__icon {
  display: block;
  width: 66px;
  height: 66px;
  margin-top: 26px;
  color: var(--pfp-accent);
}

/* The theme's icon snippet emits bare paths; these two classes are what its own
   wrapper would otherwise set. Paths with no class are solid glyphs. */
.pfp__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pfp__icon .fill-none {
  fill: none;
  stroke: currentColor;
}

.pfp__icon .stroke-width-standard {
  stroke-width: 32;
}

.pfp__icon path:not([class]),
.pfp__icon circle:not([class]),
.pfp__icon rect:not([class]),
.pfp__icon polygon:not([class]) {
  fill: currentColor;
}

/* No heading step-down in either query: Ignite's own size classes are already
   responsive across its 750/990 breakpoints, which is most of the point of
   using them. Section padding is the wrapper's job now, too. */
@media screen and (max-width: 989px) {
  .pfp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pfp__card {
    min-height: 220px;
  }

  .pfp__statement {
    font-size: 22px;
  }
}

@media screen and (max-width: 574px) {
  /* One column rather than two: at 390px a two-up grid leaves ~150px of card,
     which wraps "-50°C to +250°C" onto three lines. */
  .pfp__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pfp__card {
    min-height: 0;
    padding: 24px 20px;
  }

  .pfp__icon {
    width: 52px;
    height: 52px;
    margin-top: 18px;
  }
}