/* * VT2 override stylesheet — only active when . * * CDN vt2 typography lives in @layer vt2. Put overrides in the same layer * (this file loads last) with more specific selectors. Use !important when CDN does. */ @layer vt2 { /* 7 Forms of Magnesium — green card titles (e.g. Magnesium Glycinate) */ @media (min-width: 768px) { body.vt2-test .vt-mag-forms-grid .vt-mag-form-card .flex.flex-col > p.vt2-font-button:first-of-type { font-size: 28px !important; white-space: normal !important; } } /* About section — center checklist text with bullet icon */ body.vt2-test .about-section-v1test li.vt-checklist-bullet { position: relative !important; display: block !important; min-height: 28px !important; padding-top: 0 !important; padding-bottom: 0 !important; background-image: none !important; } body.vt2-test .about-section-v1test li.vt-checklist-bullet::before { content: ''; position: absolute; left: 0; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); background: url('https://fb-v1.cdn-bio.com/assets/uploads/3fe0-bd63-2c4e-4a6e_Container-dg.svg') no-repeat center / 28px; } /* * Items (2–7): vertically center text against the 28px icon via flex. * Using a tight line-height (instead of line-height: 28px) so that when these * bullets wrap to two lines on mobile there's no gap between the wrapped lines. */ body.vt2-test .about-section-v1test li.vt-checklist-bullet:not(:first-child):not(:last-child) { display: flex !important; align-items: center !important; line-height: 1.25 !important; } /* * Contact line (last item): make the phone number and email bold. Their inline * s carry `vt:font-normal` (font-weight: normal), so override to bold. */ body.vt2-test .about-section-v1test li.vt-checklist-bullet:last-child strong { font-weight: 700 !important; } /* * About section headlines — keep desktop line breaks from 601px up. * CDN vt2 visibility flips at 1064px; extend desktop spans down to 600px. */ @media screen and (min-width: 601px) and (max-width: 1063px) { body.vt2-test .about-section-v1test p.vt2-headline-breaks-600 .vt2-block-desktop.vt2-hidden-mobile { display: block !important; } body.vt2-test .about-section-v1test p.vt2-headline-breaks-600 .vt2-block-mobile.vt2-hidden-desktop { display: none !important; } } /* * About section headlines — mobile line breaks at <=507px. * The mobile span carries classed
elements that are * hidden by default (so 508–600px keeps natural wrapping) and revealed at * <=507px to force: * "Why" / "BIOptimizers Is A" / "Different Kind" / "Of Company" * "BIOptimizers" / "Was Born" / "From Pain And" / "Passion" */ body.vt2-test .about-section-v1test p.vt2-headline-breaks-600 .vt2-block-mobile br.vt2-about-br { display: none !important; } @media screen and (max-width: 507px) { body.vt2-test .about-section-v1test p.vt2-headline-breaks-600 .vt2-block-mobile br.vt2-about-br { display: inline !important; } } /* * 7 Forms of Magnesium hero — keep the desktop two-column look down to 768px. * CDN flips the hero to a stacked (column-reverse) layout at <=1063px; re-assert * the row-reverse desktop layout for 768–1063px. The desktop text min-width (590px) * would overflow here, so it's relaxed and the image is sized proportionally. */ @media screen and (min-width: 768px) and (max-width: 1063px) { body.vt2-test .vt-7forms-section-v1test .vt-mag-forms-hero { flex-direction: row-reverse !important; } body.vt2-test .vt-7forms-section-v1test .vt-mag-forms-hero__media { flex-shrink: 0 !important; width: clamp(260px, 38vw, 460px) !important; max-width: 460px !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; margin: 0 !important; } body.vt2-test .vt-7forms-section-v1test .vt-mag-forms-hero__text { flex: auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } } /* * 7 Forms hero headline — mobile line breaks for 628–767px. * Collapse the default 4-line stack into two lines: * "Why Getting ALL 7 Forms of" / "Magnesium Matters*" * by hiding the break after "Why Getting ALL" (br1) and after "Magnesium" (br3), * keeping only the break after "7 Forms of" (br2). */ @media screen and (min-width: 628px) and (max-width: 767px) { body.vt2-test .vt-mag-forms-hero__text p.vt-headline-h2-v1test br.vt2-mag7-br1, body.vt2-test .vt-mag-forms-hero__text p.vt-headline-h2-v1test br.vt2-mag7-br3 { display: none !important; } } /* * Product bullets (VT2) — show the desktop bullet list from 768px up. * CDN vt2 hides .vt2-hidden-mobile below 1064px; re-assert visibility for * 768px and above so the bullets appear at the tablet breakpoint too. */ @media screen and (min-width: 768px) { body.vt2-test .vt-product-bullets-list.vt2-block-desktop.vt2-hidden-mobile { display: block !important; } } }