/* 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; }
}

/* Add to Cart, the quieter of the two actions on a product page.
   ==========================================================================
   Same blue as Buy Now, carried by an outline instead of a fill, so the two
   read as a pair rather than as two different offers.

   !important throughout, and not for tidiness: each ported product page
   brings its own stylesheet, several of them set a.buybtn colours with
   !important of their own, and the hover rule swaps the background to deep
   blue while leaving the text white. Without this the button turned white on
   white the moment the pointer touched it. */
a.buybtn.hbe-add,
a.buybtn.hbe-add:link,
a.buybtn.hbe-add:visited {
  background: transparent !important;
  color: var(--blue, #0076af) !important;
  box-shadow: inset 0 0 0 2px currentColor !important;
  border-color: currentColor !important;
  margin-left: 10px;
}

a.buybtn.hbe-add:hover,
a.buybtn.hbe-add:focus,
a.buybtn.hbe-add:active {
  background: var(--blue, #0076af) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px var(--blue, #0076af) !important;
  border-color: var(--blue, #0076af) !important;
}

a.buybtn.hbe-add svg { stroke: currentColor !important; }

/* Side by side on a desktop, stacked on a phone rather than overflowing. */
@media (max-width: 560px) {
  a.buybtn.hbe-add { margin-left: 0; margin-top: 10px; display: flex; }
}