/* Fallback styling for the scaffold the shared product template emits.
   ====================================================================
   Loaded BEFORE the product's own page stylesheet, so any page that already
   styles these classes keeps its own design untouched — this only fills in
   where a page never had the element in the first place.

   The CTA row is the clearest case. It exists on every product page the
   template renders, but only the .phero pages ever had one in the static
   build, so .pcta has no rules at all on a .cpe-hero or .sw-hero page and the
   three buttons stacked on top of one another.

   Everything here is layout and containment only: no colour, no type, no
   borders. The look continues to come from the page stylesheet. */

/* --- the call-to-action row --- */
.pcta {
  display: flex;
  flex-wrap: wrap;          /* wrap rather than overlap when space runs out */
  align-items: center;
  gap: 12px;
}
.pcta > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.pcta svg {
  flex: none;               /* a flex item's svg shrinks to nothing otherwise */
  width: 15px;
  height: 15px;
}

/* --- images never wider than what holds them --- */
.phero img,
.cpe-hero img,
.sw-hero img {
  max-width: 100%;
  height: auto;
}

/* --- two-column heroes collapse to one on narrow screens ---
   Grid children default to min-width:auto, which stops them shrinking below
   their content and is the usual reason a two-column hero overflows on a
   phone rather than stacking. */
.phero-grid,
.cpe-grid,
.sw-grid { min-width: 0; }
.phero-grid > *,
.cpe-grid > *,
.sw-grid > * { min-width: 0; }

@media (max-width: 860px) {
  .phero-grid,
  .cpe-grid,
  .sw-grid {
    grid-template-columns: 1fr;
    display: grid;
    gap: 26px;
  }
  .pcta { justify-content: flex-start; }
}