/* HPL Peptides — responsive overrides.
   Hooks are data-m tokens on layout containers; everything else is fluid inline. */

html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; }
* { -webkit-tap-highlight-color: rgba(75,50,168,0.12); }

@media (max-width: 1024px) {
  [data-m~="split"] { grid-template-columns: minmax(0,1fr) !important; gap: 36px !important; }
  [data-m~="cols5"] { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  [data-m~="cols4"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  [data-m~="cols3"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  [data-m~="sticky"] { position: static !important; top: auto !important; }
  [data-m~="split"] > * { grid-column: auto !important; }
}

@media (max-width: 680px) {
  [data-m~="cols4"], [data-m~="cols3"], [data-m~="cols2"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-m~="cols5"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  /* spanning children would otherwise regenerate an implicit second track */
  [data-m~="cols2"] > *, [data-m~="cols3"] > *, [data-m~="cols4"] > *, [data-m~="split"] > * { grid-column: auto !important; }
  [data-m~="row"] { grid-template-columns: 64px minmax(0,1fr) !important; gap: 16px !important; }
  /* grid-template-columns is inert on a flex container, so the one token covers
     both kinds of user: the flex ones stack by direction, the grid ones by
     collapsing to a single track. */
  [data-m~="stack"] { flex-direction: column !important; align-items: stretch !important; grid-template-columns: minmax(0,1fr) !important; }
  [data-m~="stack"] > * { min-width: 0; grid-column: auto !important; }
  [data-m~="dt"] { display: none !important; }
  [data-m~="annotated"] { padding-right: 0 !important; }
  [data-m~="scroll"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  [data-m~="scroll"] > * { min-width: 560px; }
  [data-m~="pad"] { padding-left: 18px !important; padding-right: 18px !important; }
  /* footer link lists become tappable rows */
  footer a { min-height: 40px; display: inline-flex; align-items: center; }
  button, [role="button"], input[type="submit"] { min-height: 44px; }
  button[aria-label] { min-width: 44px; }
  /* Height and order only. Never `position`: the panel contains absolutely
     positioned shots, and unpositioning it lets them cover the whole page.
     See .hpl-shotpanel in theme.css. */
  [data-m~="shotpanel"] { height: 52vh !important; border-radius: 16px; order: -1; }

  /* The image is ordered above the copy on a phone, so the copy column no longer
     needs the 116px that clears the fixed header — that padding was pushing the
     buy block another screenful down. */
  [data-product-page] > div:first-child { padding-top: 24px !important; }

  /* Clearance for the fixed buy bar. */
  [data-product-page] { padding-bottom: 92px !important; }

  /* Four tab labels in one nowrap row run off the side of a phone, and
     html/body clip the overflow, so Research and Terms of sale could not be
     reached at all. Let them wrap onto a second line. */
  [data-m~="tabs"] { flex-wrap: wrap !important; gap: 4px 20px !important; margin-top: 34px !important; }
  [data-m~="tabs"] > * { padding-bottom: 10px !important; }
}

@media (max-width: 680px) {
  /* hero photography protection: vertical veil instead of the desktop side wash */
  [data-m~="heroveil"] {
    background-image: linear-gradient(to bottom, rgba(244,242,251,0.96) 0%, rgba(244,242,251,0.95) 58%, rgba(244,242,251,0.62) 80%, rgba(244,242,251,0.2) 100%) !important;
  }
}

@media (min-width: 681px) {
  [data-m~="mb"] { display: none !important; }
}

/* ——— motion primitives, shared by every page ——— */
@keyframes hpl-bloom { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hpl-bloom-rise { from { opacity: 0; translate: 0 12px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes hpl-bloom-soft { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hpl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hpl-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hpl-node { from { background: #FBFAFE; border-color: #E4E0F0; color: #8C86A0; } to { background: #4B32A8; border-color: #4B32A8; color: #FFFFFF; } }
@keyframes hpl-load-shine { 0% { background-position: 190% 0; } 100% { background-position: -90% 0; } }
@keyframes hpl-load-bubble { 0% { transform: translateY(0) scale(0.6); opacity: 0 } 16% { opacity: 0.55 } 100% { transform: translateY(-340px) scale(1); opacity: 0 } }

/* if the browser has no scroll-driven timelines, show the final state rather than a stuck blur */
@supports not (animation-timeline: view()) {
  [style*="hpl-bloom"], [style*="hpl-bloom-rise"] { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [style*="hpl-bloom"] { animation: none !important; opacity: 1 !important; filter: none !important; }
}