/* hero.css — hero headline sizing + the text-beside-product-image layout.
 *
 * History worth knowing: this file used to carry a fixed 4rem headline plus
 * four max-width/max-height step-downs, then a `.vss-alt` override with
 * !important. `alt` was pinned on and had no toggle UI, so the .vss-alt rules
 * won every time and all four step-downs were dead. The clamp() below is what
 * actually rendered; the rest is gone.
 *
 * The side-by-side layout was also applied from JS at mount via
 * `window.innerWidth > 900`, which never re-ran on resize — dragging a window
 * across the breakpoint left the old layout stuck. It's a media query now, so
 * the browser handles it.
 */
#vss-headline { font-size: clamp(1.6rem, 4vw, 3.2rem); }
#vss-headline-glance { font-size: clamp(2rem, 5vw, 4rem); }

#vss-herocontent { max-width: 720px; }

/* Narrow (default): product image stacks under the copy. */
#vss-alt-heroimg {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 440px;
  margin: 36px auto 0;
}

/* Wide: copy and product image side by side. 901px matches the >900 JS check
   this replaced. */
@media (min-width: 901px) {
  #vss-herowrap {
    display: flex;
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
  }
  #vss-herocontent { flex: 1 1 0; }
  #vss-alt-heroimg {
    flex: 0 0 46%;
    max-width: 46%;
    margin: 0;
  }
}