/* ============================================================================
   renova-polish.css  ·  Renova Peptides
   Site-wide visual polish + responsive fixes. Loaded on every page.
   Additive only — overrides existing inline styles via later cascade,
   never removes site behaviour. Safe to remove to revert.

   MAIN FIX (2026-07): hero "science" side widgets used to keep a fixed
   width (290/320/340px) once shown at >=1180px, so on narrower desktops
   they overlapped the long hero headline line. They now scale down toward
   the screen edge as the window narrows. renova-conversion.js refines this
   to pixel-fluid + headline-measured; this file is the no-JS baseline.
   ============================================================================ */

/* Smooth the size/position change while resizing (JS drives the value). */
#hero .hero-side-widget{
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

/* --- No-JS baseline: stepped scale so the cards clear the headline --------
   Origin is the OUTER edge, so shrinking pulls each card toward its side of
   the screen and frees the centre column for the headline. Width is pinned
   to 290px through the constrained range so the site's 320/340px tiers don't
   re-introduce the overlap mid-scale. >=1640px keeps the original layout. */

/* Too cramped to show a readable card beside an 800px hero column → hide. */
@media (min-width:1180px) and (max-width:1239px){
  #hero .hero-side-widget{ display:none !important; }
}

@media (min-width:1240px) and (max-width:1639px){
  #hero .hero-side-widget{ width:290px !important; }
  #hero .hero-side-widget.left { left:3% !important;  transform-origin:left center;  }
  #hero .hero-side-widget.right{ right:3% !important; transform-origin:right center; }
}
@media (min-width:1240px) and (max-width:1299px){
  #hero .hero-side-widget.left,
  #hero .hero-side-widget.right{ transform:translateY(-50%) scale(.66); }
}
@media (min-width:1300px) and (max-width:1379px){
  #hero .hero-side-widget.left,
  #hero .hero-side-widget.right{ transform:translateY(-50%) scale(.74); }
}
@media (min-width:1380px) and (max-width:1459px){
  #hero .hero-side-widget.left,
  #hero .hero-side-widget.right{ transform:translateY(-50%) scale(.82); }
}
@media (min-width:1460px) and (max-width:1539px){
  #hero .hero-side-widget.left,
  #hero .hero-side-widget.right{ transform:translateY(-50%) scale(.88); }
}
@media (min-width:1540px) and (max-width:1639px){
  #hero .hero-side-widget.left,
  #hero .hero-side-widget.right{ transform:translateY(-50%) scale(.94); }
}
/* >=1640px: untouched — original full-size layout resumes. */

/* --- Accessibility: honour reduced-motion for the decorative hero loops --- */
@media (prefers-reduced-motion: reduce){
  #hero .hsw-card,
  #hero .hsw-eyebrow::before,
  #hero .hsw-bond,
  #hero .hsw-step.active .hsw-step-num{
    animation: none !important;
  }
  #hero .hero-side-widget{ transition: none !important; }
}