/* ============================================================ HELIO PEPTIDES — homepage GEOMETRY control Tightens the vertical rhythm to buyhelio's filled density, caps oversized heights, and fail-safes the reveal animation so no section ever renders as an empty band. Loaded AFTER helio-home.css so these win. ============================================================ */ /* fail-safe: content is always visible even if the scroll observer misfires */ .reveal{opacity:1 !important; transform:none !important;} .hs-sec{margin:0 !important;} /* no horizontal scroll on ANY viewport — full-bleed sections can bleed a few px; overflow-x:clip stops it without breaking position:sticky (unlike overflow:hidden) */ html,body{max-width:100%; overflow-x:clip;} /* HERO — fill the viewport without an oversized empty region */ .hero{height:auto !important; min-height:74vh !important;} @media(max-width:749px){ .hero{min-height:58vh !important;} } /* SECTION vertical rhythm — consistent, tighter than raw vh */ .statement{padding:clamp(56px,8vh,96px) 0 clamp(24px,3vh,40px) !important;} .omq{padding:6px 0 clamp(24px,4vh,44px) !important;} .bento{padding:clamp(8px,2vh,18px) 0 clamp(48px,7vh,80px) !important;} .story{padding:clamp(48px,7vh,84px) 0 !important;} .shop{padding:clamp(40px,6vh,72px) 0 clamp(56px,8vh,88px) !important;} .dark{padding:clamp(64px,9vh,104px) 6vw !important; margin:0 20px !important;} .cat{padding:clamp(48px,7vh,84px) 0 !important;} .aq{padding:clamp(48px,7vh,84px) 0 !important;} .trace{padding:clamp(48px,7vh,84px) 0 !important;} .gs{padding:clamp(48px,7vh,84px) 0 !important;} .lib{padding:clamp(48px,7vh,84px) 0 !important;} .co{padding:clamp(56px,8vh,96px) 0 !important;} .faq{padding:clamp(20px,3vh,40px) 0 clamp(56px,8vh,96px) !important;} .cta{padding:clamp(56px,9vh,104px) 0 !important;} /* STORY — reduce the 14vh scrollytelling gaps that create blank bands */ .story .steps{gap:clamp(40px,7vh,80px) !important; padding:2vh 0 3vh !important;} .story-vis{top:96px !important;} /* BENTO — cells hug content; cap image heights so no tall empty boxes */ .bento .b{padding:28px !important;} .bento .bimg{height:210px !important;} .bento .bimg.tall{height:300px !important;} .bento .bimg.wide{height:230px !important;} /* PRODUCT cards — consistent image box height */ .pgrid{gap:16px !important;} .shop .pc .pimg,.shop .pc .pph{height:200px !important;} /* RESEARCH-field + GUIDE cards — tighter image ratio */ .acard .acard-img{aspect-ratio:16/10 !important; min-height:0 !important;} .gs-card .gs-img{aspect-ratio:16/10 !important;} /* headings — remove oversized default gaps */ .statement h1{margin:14px auto 0 !important;} .shop-head,.cat-head,.trace-head{margin-bottom:clamp(28px,4vh,48px) !important;} /* FOOTER — buyhelio density, no huge gap before it */ .footer{padding-bottom:24px !important;} .footer .footer__content-top{padding-top:48px !important; padding-bottom:32px !important;} .footer .footer__content-bottom{padding-top:20px !important;} /* FIX: headings/eyebrows on dark (navy) sections must be white, not ink-black */ .dark h1,.dark h2,.dark h3,.dark .n,.dark p{color:#fff !important;} .dark .eyebrow{color:rgba(255,255,255,.5) !important;} .dark em.serif,.dark .st .n{color:#E8923A !important;} .dark .st .l{color:rgba(255,255,255,.55) !important;} /* product cards use the richer _pc_card layout (media + info) — edge-to-edge media */ .pgrid .pc{padding:0 !important; overflow:hidden; display:flex; flex-direction:column; cursor:default;} .pgrid .pc:hover{transform:translateY(-6px);} .pgrid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr)) !important;} /* tighter product cards — shorter media, compact info (less empty space) */ .pgrid .pc-media{aspect-ratio:auto !important; height:196px !important; border-radius:24px 24px 0 0 !important;} .pgrid .pv-img{width:auto !important; height:88% !important; max-width:80% !important;} .pgrid .pc-info{padding:14px 16px 16px !important; gap:4px !important;} .pgrid .pc-info .area-tag{margin-bottom:2px !important;} .pgrid .pc-info h3{font-size:17px !important; margin:0 !important;} .pgrid .pc-price{margin:2px 0 0 !important;} .pgrid .pc-btns{margin-top:10px !important;} .pgrid .coa-pill{bottom:10px !important;} /* ── PDP typographic hierarchy — dark headings · gray body · mono labels · accent ── */ .pd h1{color:#0A0C10 !important;} .pd .record__cas{color:#6B6F76 !important;font-family:'JetBrains Mono',monospace !important;font-size:11px;letter-spacing:.06em;} .pd .pd-desc,.pd .pd-desc p{color:#3B4048 !important;font-size:16.5px !important;line-height:1.62 !important;font-weight:500 !important;margin:0 0 .55rem;} .pd .record__over h2{color:#0A0C10 !important;} .pd .record__over .prose,.pd .record__over .prose p{color:#565b63 !important;} .pd .record__over .prose strong,.pd .record__over .prose b{color:#0A0C10 !important;} .pd .eyebrow,.pd .spec-block__h .eyebrow{color:#6B6F76 !important;font-family:'JetBrains Mono',monospace !important;font-weight:700 !important;letter-spacing:.14em !important;text-transform:uppercase !important;} .pd .eyebrow--on-navy{color:rgba(255,255,255,.6) !important;} .pd .spec-table .k{color:#6B6F76 !important;font-weight:500 !important;} .pd .spec-table .v{color:#0A0C10 !important;font-weight:600 !important;} .pd .spec-table .ok{color:#2FA36B !important;font-weight:700 !important;} .pd .kchar__k{color:#6B6F76 !important;font-family:'JetBrains Mono',monospace !important;font-size:10px;letter-spacing:.1em;text-transform:uppercase;} .pd .kchar__v{color:#0A0C10 !important;font-weight:600;} .pd .area__k{color:#0A0C10 !important;font-weight:700;} .pd .area__d{color:#6B6F76 !important;} .pd .refs li{color:#565b63 !important;} .pd em.serif,.pd .serif{color:#E8923A !important;} .pd .pd-facts span{color:#6B6F76 !important;} /* fact label light */ .pd .pd-facts div{color:#0A0C10 !important;} /* fact value dark */ /* storage/FDA disclosure: normalize the store's inline-styled body to site type, keep bold headers dark */ .pd-disclosure .prose *{font-family:'Inter',sans-serif !important;background:transparent !important;font-size:15px !important;} .pd-disclosure .prose,.pd-disclosure .prose p,.pd-disclosure .prose span{color:#565b63 !important;line-height:1.65 !important;} .pd-disclosure .prose strong,.pd-disclosure .prose b,.pd-disclosure .prose h1,.pd-disclosure .prose h2,.pd-disclosure .prose h3,.pd-disclosure .prose h4{color:#0A0C10 !important;font-weight:700 !important;} .pd-disclosure .prose p{margin:0 0 .7rem !important;} /* PDP image gallery — main + thumbnails (all from product.images, admin-editable) */ .pd .pd-media-wrap{display:flex;flex-direction:column;gap:12px;} .pd .pd-thumbs{display:flex;gap:10px;flex-wrap:wrap;} .pd .pd-thumb{width:72px;height:72px;border-radius:14px;border:1px solid rgba(10,12,16,.12);background:#fff;padding:7px;cursor:pointer;overflow:hidden;transition:border-color .15s,transform .15s;} .pd .pd-thumb img{width:100%;height:100%;object-fit:contain;display:block;} .pd .pd-thumb:hover{border-color:#0A0C10;transform:translateY(-2px);} .pd .pd-thumb.is-active{border-color:#0A0C10;border-width:2px;} /* PDP size/format selector — sibling product links styled as pills */ .pd .buy__opts--links a.buy__opt{text-decoration:none;display:inline-flex;align-items:center;} /* FIX gallery overlap: stick the whole gallery (image + thumbs) as one unit, not just the image (previously the sticky main image overlapped the thumbnails on scroll). */ .pd .pd-media{position:relative !important; top:auto !important;} .pd .pd-media-wrap{position:sticky; top:110px; align-self:start; z-index:1;} @media(max-width:900px){ .pd .pd-media-wrap{position:relative; top:auto;} } /* CARD FIX (final): restore proper image size (not shrunk), tighten the TEXT/line spacing instead */ .pgrid .pc-media{aspect-ratio:1/1 !important; height:auto !important;} .pgrid .pv-img{width:auto !important; height:86% !important; max-width:86% !important;} .pgrid .pc-info{padding:16px 18px 18px !important; gap:3px !important; line-height:1.28 !important;} .pgrid .pc-info .area-tag{margin:0 0 3px !important;} .pgrid .pc-info h3,.pgrid .pc-info .pc-nl h3{font-size:17px !important; margin:0 !important; line-height:1.25 !important;} .pgrid .pc-info .pc-desc{margin:2px 0 0 !important; line-height:1.4 !important;} .pgrid .pc-price{margin:5px 0 0 !important;} .pgrid .pc-btns{margin-top:12px !important;} /* card descriptor line (buyhelio-style subtitle between name and price) */ .pgrid .pc-info .pc-desc{font-size:12.5px !important;color:#6B6F76 !important;font-weight:500 !important;margin:2px 0 0 !important;line-height:1.4 !important;} /* category filter chips — bigger, prominent, never truncate */ .shop-page .fchips{gap:10px !important; row-gap:10px !important;} .shop-page .chipf{font-size:14.5px !important; padding:10px 20px !important; white-space:nowrap !important; font-weight:700 !important;} /* FIX Quality hub — undo leaked mobile CSS (broken hero-team bg, collapsed COA grid) + white hero text */ .qual-hero{display:flex !important; align-items:flex-end !important; min-height:74vh !important; padding-top:0 !important; padding-bottom:0 !important;} .qual-hero .qh-in{padding:12vh 0 7vh !important;} .qual-hero h1,.qual-hero .eyebrow,.qual-hero .qh-stats b{color:#fff !important;} .qual-hero p{color:rgba(255,255,255,.9) !important;} .qual-hero .qh-stats div{color:rgba(255,255,255,.75) !important;} /* COA table: aligned 4-column grid on desktop; collapse only on mobile */ .coa-head-row{display:grid !important;} .coa-head-row,.coa-row{grid-template-columns:2fr 1.2fr 1.2fr auto !important; gap:16px !important;} @media(max-width:749px){ .coa-head-row{display:none !important;} .coa-row{grid-template-columns:1fr auto !important; gap:4px 12px !important;} } /* COA list sits inside a padded white card (not flush to the page edge) */ .coa-wrap{background:#fff !important; border:1px solid var(--line) !important; border-radius:24px !important; padding:clamp(20px,3vw,40px) !important; box-shadow:0 20px 50px rgba(10,12,16,.06) !important;} .coa-head-row,.coa-row{padding-left:12px !important; padding-right:12px !important;} .coa-browse{margin-left:12px !important;} /* keep all card text contained — no spilling past the rounded edge */ .coa-wrap,.trace-rec,.rec-row,.coa-row,.coa-head-row{min-width:0 !important;} .coa-wrap *,.trace-rec *{overflow-wrap:anywhere !important; word-break:break-word !important;} .rec-row,.coa-row{overflow:hidden !important;} .rec-row b,.rec-row span,.coa-row *{min-width:0 !important; overflow-wrap:anywhere !important;} /* indent all section heading/intro text inside the card padding — no spill past edges */ .qsec2{box-sizing:border-box !important;} .qsec2 .q2-head,.qsec2 .sec-intro,.qsec2 .aq-main,.qsec2 .trace-grid,.qsec2 .coa-wrap{padding-left:clamp(20px,3vw,40px) !important; padding-right:clamp(20px,3vw,40px) !important; box-sizing:border-box !important; max-width:100% !important;} .qsec2 .q2-head *,.qsec2 .sec-intro{overflow-wrap:anywhere !important; word-break:normal !important;} .coa-wrap{padding-left:clamp(20px,3vw,40px) !important; padding-right:clamp(20px,3vw,40px) !important;} /* Hero headings have no margin-bottom set → browser default 0.67em (~60px at hero sizes) created a huge gap before the sub. Zero it everywhere so the sub's margin-top is the real gap. */ .shop-hero h1,.qual-hero h1,.rh-hero h1,.lh-hero h1,.ct-hero h1,.legal-hero h1,.pd-info h1,.acct-form h1,.shop-hero .eyebrow,.lh-hero .eyebrow,.rh-hero .eyebrow{margin-bottom:0 !important;} /* Policy pages — render original Helio Peptides content cleanly in buyhelio legal-prose */ .legal-prose h2{margin-top:40px} .legal-prose h2:first-child,.legal-prose > :first-child{margin-top:0} .legal-prose h3{font-size:18px;letter-spacing:-.01em;margin:24px 0 8px} .legal-prose h4{font-size:16px;margin:20px 0 6px} .legal-prose strong,.legal-prose b{color:var(--ink);font-weight:800} .legal-prose ol{margin:0 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:8px} .legal-prose ol li{font-size:16px;line-height:1.6;color:#2b2f36} .legal-prose table{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px} .legal-prose td,.legal-prose th{border:1px solid var(--line);padding:10px 12px;text-align:left} .legal-prose img{max-width:100%;height:auto;border-radius:12px} /* TOC links live inside