/* ===== TOP PICKS BASE - shared with the product-page related row ===== Copied verbatim from the Top Picks style block that lives in the HOMEPAGE page content, which never loads on a product page. It sits at the TOP of this sheet so the existing "TOP PICKS - …" override blocks further down still win, exactly as they do on the homepage where the page-content copy loads last. The homepage now has these rules twice, identically, which changes nothing there. The four custom properties are declared here because they are defined in the homepage content too. If the homepage card CSS is ever edited, re-copy this block. ===== */ .tp-section{--bg:#f6f9f7;--green:#149954;--text:#12261c;--muted:#5c6f65;} .tp-section{position:relative;background:var(--bg);padding:64px 24px 70px;overflow:hidden}.tp-head{max-width:1280px;margin:0 auto 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}.tp-eyebrow{display:flex;align-items:center;gap:10px;color:#2EF96B;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-family:'Archivo',sans-serif;margin-bottom:10px}.tp-eyebrow .ln{width:22px;height:1px;background:var(--green);display:inline-block}.tp-title{font-family:'Archivo',sans-serif;font-size:38px;font-weight:800;color:var(--text);margin:0}.tp-title span{color:#2EF96B}.tp-sub{color:var(--muted);font-size:15px;margin-top:8px;max-width:420px;font-weight:800}.tp-controls{display:flex;align-items:center;gap:12px}.tp-viewall{border:1px solid rgb(255 255 255 / .35);color:var(--text);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:12px 22px;border-radius:999px;text-decoration:none;font-family:'Archivo',sans-serif;transition:background .2s ease,color .2s ease;white-space:nowrap}.tp-viewall:hover{background:var(--green);color:#07100c}.tp-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgb(255 255 255 / .35);background:#fff0;color:var(--text);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.tp-arrow:hover{background:var(--green);color:#07100c}.tp-track{max-width:1280px;margin:0 auto;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:none}.tp-track::-webkit-scrollbar{display:none}.tp-card{position:relative;flex:0 0 auto;scroll-snap-align:start;width:200px;background:#f4f6f4;border-radius:14px;padding:18px 16px 20px;text-decoration:none;display:flex;flex-direction:column;box-shadow:0 8px 20px rgb(0 0 0 / .25);transition:transform .25s ease,box-shadow .25s ease}.tp-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgb(0 0 0 / .35)}.tp-ribbon{position:absolute;top:12px;left:12px;background:rgb(10 10 10 / .4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgb(46 249 107 / .8);color:#fff;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;border-radius:999px;z-index:2}.tp-imgwrap{background:#eef1ef url(https://codexresearch.shop/wp-content/uploads/2026/07/lab-glassware-background-1.webp) center/cover no-repeat;border-radius:10px;height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px}.tp-imgwrap img{max-height:130px;max-width:85%;object-fit:contain}.tp-kicker{font-size:10px;color:#8a8f89;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-family:'Archivo',sans-serif;margin-bottom:4px}.tp-name{font-size:18px;font-weight:800;color:#101410;font-family:'Archivo',sans-serif;margin-bottom:3px}.tp-cat{font-size:11px;color:#7a7a74;font-weight:500;margin-bottom:10px}.tp-badges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}.tp-badge{display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:#0f8f56;border:1px solid rgb(15 143 86 / .35);background:rgb(15 143 86 / .08);padding:4px 6px;border-radius:999px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.tp-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;margin-bottom:12px}.tp-purity{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#0f8f56}.tp-price{font-size:16px;color:#101410;font-weight:800}.tp-price small{font-size:10px;color:#7a7a74;font-weight:500;margin-right:3px;text-transform:uppercase}.tp-view{background:var(--green);color:#07100c;text-align:center;padding:11px 0;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:'Archivo',sans-serif}.tp-card-top{display:flex;flex-direction:column;text-decoration:none;color:inherit;flex:1;min-height:0}.tp-stats{display:flex;align-items:stretch;justify-content:space-between;margin:12px 0 10px;padding-top:12px;border-top:1px solid rgb(10 10 10 / .08)}.tp-stat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0}.tp-stat-top{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:800;color:#101410;white-space:nowrap}.tp-stat-top svg{width:12px;height:12px;flex-shrink:0}.tp-stat-purity{color:#0a0a0a}.tp-stat-purity svg{color:#0a0a0a}.tp-stat-points svg{color:#f5a623;fill:#f5a623}.tp-stat-label{font-size:8px;letter-spacing:.05em;color:#8a8f8a;font-weight:700;text-transform:uppercase}.tp-stat-div{width:1px;background:rgb(10 10 10 / .1);margin:1px 2px;align-self:stretch}.tp-price-new{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;color:#0a0a0a;padding-left:4px}.tp-price-new .tp-price-d{font-size:21px;font-weight:800}.tp-price-new .tp-price-c{font-size:13px;font-weight:700}.tp-actions{display:flex;gap:6px;margin-top:auto}.tp-btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:2px;padding:8px 2px;border-radius:8px;font-size:7.3px;line-height:1.15;font-weight:800;letter-spacing:0;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;font-family:'Archivo',sans-serif;transition:filter .2s;text-align:center;overflow:hidden}.tp-btn svg{width:12px;height:12px;flex-shrink:0}.tp-actions .tp-btn.tp-btn-cart{background:#2EF96B!important;color:#07100c!important;flex:1;white-space:nowrap}.tp-btn-cart:hover{filter:brightness(.92)}.tp-btn-cart.loading{opacity:.6;pointer-events:none}.tp-btn-buy{background:#0a0a0a;color:#fff;flex:1;white-space:nowrap}.tp-btn-buy:hover{filter:brightness(1.3)}@media (max-width:700px){.tp-btn{font-size:10px;padding:10px 4px;gap:4px}.tp-stat-top{font-size:14px}}@media (max-width:700px){.tp-section{padding:48px 18px 10px;background:var(--bg) url(https://codexresearch.shop/wp-content/uploads/2026/07/tp-section-mobile-bg-1.webp) 25% center/cover no-repeat}.tp-section::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:12px;background:linear-gradient(to bottom,#fff0 0%,var(--bg) 100%);pointer-events:none;z-index:1}.tp-title{font-size:34px}.tp-head{flex-wrap:nowrap;align-items:flex-end;margin-bottom:18px}.tp-sub{font-size:10px}.tp-head>div:first-child{min-width:0;flex:1}.tp-controls{flex-shrink:0}.tp-viewall{border-color:rgb(15 143 86 / .55);background:rgb(15 143 86 / .1);padding:10px 16px;font-size:11px}.tp-controls .tp-arrow{display:none}.tp-card{width:72vw;max-width:290px}.tp-track::after{content:'';flex:0 0 56px;position:sticky;right:0;top:0;align-self:stretch;background:linear-gradient(to right,#fff0,rgb(255 255 255 / .85));pointer-events:none}.tp-imgwrap{height:210px}.tp-imgwrap img{max-height:190px}}.tp-kicker{text-align:center}.tp-name{text-align:center}.tp-cat{text-align:center}.tp-badges{justify-content:center}.tp-break{flex-basis:100%;height:0} /* ===== /TOP PICKS BASE ===== */ /* Codex - checkout mobile compact alerts */ @media (max-width:767px){ body.woocommerce-checkout .spar-cart-rewards-box{padding:8px 12px !important;margin:0 0 10px !important;border-radius:12px !important;} body.woocommerce-checkout .spar-cart-rewards-header{display:flex !important;flex-direction:row !important;align-items:center !important;flex-wrap:nowrap !important;gap:8px !important;} body.woocommerce-checkout .spar-cart-rewards-title{display:none !important;} body.woocommerce-checkout .spar-cart-rewards-title-section{flex:1 1 auto !important;min-width:0 !important;margin:0 !important;} body.woocommerce-checkout .spar-cart-earning-message{margin:0 !important;font-size:11.5px !important;line-height:1.35 !important;} body.woocommerce-checkout .spar-cart-rewards-summary{flex:0 0 auto !important;display:flex !important;align-items:center !important;gap:6px !important;margin:0 !important;} body.woocommerce-checkout .spar-cart-rewards-points{display:none !important;} body.woocommerce-checkout .spar-cart-rewards-actions{margin:0 !important;} body.woocommerce-checkout .spar-redeem-toggle-btn{padding:6px 10px !important;font-size:10px !important;letter-spacing:.03em !important;white-space:nowrap !important;} body.woocommerce-checkout .cdx-fop-notice{padding:8px 12px !important;margin:0 0 10px !important;} body.woocommerce-checkout .cdx-fop-notice::before{font-size:10px !important;} body.woocommerce-checkout .cdx-fop-notice::after{font-size:10px !important;} } /* Codex - checkout perk bar */ body.woocommerce-checkout .cdx-fop-notice{display:flex !important;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:0 !important;line-height:0 !important;border:1px solid rgba(31,168,118,.32) !important;background:#F3FBF7 !important;border-radius:12px !important;padding:10px 12px !important;margin:0 0 14px !important;} body.woocommerce-checkout .cdx-fop-notice::before{content:"\01F381 30% off your first order";font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;line-height:1.45;color:#0A0A0A;} body.woocommerce-checkout .cdx-fop-notice::after{content:"Applied with account creation \2713";margin-left:auto;font-size:11px;font-weight:700;line-height:1.45;color:#1FA876;white-space:nowrap;} /* Codex - checkout mobile layout fixes */ @media (max-width:767px){ html body.woocommerce-checkout #order_review.woocommerce-checkout-review-order{padding:12px !important;} html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method{display:flex !important;flex-wrap:wrap !important;align-items:center !important;} html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type=radio]{flex:0 0 auto !important;margin:0 8px 0 0 !important;} html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label{flex:1 1 0 !important;min-width:0 !important;margin:0 !important;} html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > .payment_box{flex:0 0 100% !important;} } /* CDX-DESKTOP-NAV-CENTRE-NARROW */ @media (min-width:850px) and (max-width:1399px){ body .header-main ul.header-nav-main > li{margin-left:11px !important;margin-right:11px !important;} } /* CDX-DESKTOP-NAV-CENTRE */ @media (min-width:850px){ body .header-main .header-inner > .flex-col.logo, body .header-main .header-inner > .flex-col.flex-right{flex:1 1 0 !important;min-width:0 !important;} body .header-main .header-inner > .flex-col.hide-for-medium.flex-left{flex:0 1 auto !important;min-width:0 !important;} body .header-main .header-inner > .flex-col.hide-for-medium.flex-left ul.header-nav-main{width:auto !important;justify-content:center !important;flex-wrap:nowrap !important;} body .header-main ul.header-nav-main > li{margin-left:22px !important;margin-right:22px !important;} body .header-main ul.header-nav-main > li:first-child{margin-left:0 !important;} body .header-main ul.header-nav-main > li:last-child{margin-right:0 !important;} } /* CDX-DESKTOP-PERK-MARQUEE */ @media (min-width:601px){ /* some pages hide the header bottom row via Additional CSS - keep it for the perk bar on mobile */ body #wide-nav.header-bottom{display:flex !important;} /* let the bar span the full width of the header row */ .header-bottom .flex-row.container{padding-left:0 !important;padding-right:0 !important;max-width:100% !important;} .header-bottom .flex-col{width:100% !important;flex:1 1 100% !important;max-width:100% !important;} .header-bottom ul.nav{width:100% !important;margin:0 !important;} .header-bottom ul.nav > li.html{width:100% !important;padding:0 !important;margin:0 !important;} .cdx-perk-global{width:100%;} .cdx-perk-global .cdx-mobile-perk-marquee{display:block !important;position:relative;overflow:hidden;background:#F0F0F0;padding:10px 0;width:100%;margin:0;left:0;box-sizing:border-box;border-bottom:2px solid #2EF96B;--pk:min(11px,2.18vw);} .cdx-perk-global .cdx-mobile-perk-track{display:flex;align-items:center;justify-content:center;width:100%;} .cdx-perk-global .cdx-mobile-perk-item{display:flex;align-items:center;gap:2px;padding:0 3px;font-family:"Archivo",sans-serif;white-space:nowrap;justify-content:center;} .cdx-perk-global .cdx-mobile-perk-item .ic{font-size:calc(var(--pk)*1.29);line-height:1;} .cdx-perk-global .cdx-mobile-perk-item .perk-bold{font-weight:800;color:#0A0A0A;text-transform:uppercase;font-size:var(--pk);letter-spacing:0;} .cdx-perk-global .cdx-mobile-perk-item .perk-sub{font-weight:800;color:#0A0A0A;font-size:var(--pk);text-transform:none;letter-spacing:0;} .cdx-perk-global .cdx-mobile-perk-item .perk-divider{color:#D1D5DB;font-size:var(--pk);} .cdx-perk-global .cdx-mobile-perk-item .perk-applied{font-weight:700;color:#16A34A;font-size:var(--pk);text-transform:none;letter-spacing:0;} .cdx-perk-global .cdx-mobile-perk-item .perk-check{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--pk)*1.41);height:calc(var(--pk)*1.41);border-radius:50%;background:#16A34A;color:#fff;font-size:calc(var(--pk)*0.82);line-height:1;flex-shrink:0;} body.woocommerce-checkout .cdx-perk-global{display:none !important;} .content-area .cdx-mobile-perk-marquee{display:none !important;} body .header-top{display:none !important;} body .header-bottom .flex-col.show-for-medium{display:block !important;} body .header-bottom .flex-col.hide-for-medium{display:none !important;} body .header-bottom ul.nav.mobile-nav{display:flex !important;} } /* CDX-REL-CENTRE */ @media (min-width:850px){ body.single-product .product-footer .related .product-section-title-related{text-align:center !important;} body.single-product .product-footer .related .row{text-align:center !important;} body.single-product .product-footer .related .row > .col{text-align:center;} } @media (max-width:849px){ /* ==== Codex Research — single product (mobile): centered copy + related products ==== */ /* order: Overview > Storage & Handling > Related products > Intended Use > Terms */ body.single-product .product-footer > .container{display:flex !important;flex-direction:column !important;} body.single-product .product-footer > .container > .woocommerce-notices-wrapper{order:0;} body.single-product .product-footer > .container > div:not(.cdx-inline-desc):not(.related):not(.woocommerce-notices-wrapper){order:1;} body.single-product .product-footer .cdx-inline-desc, body.single-product .product-footer .cdx-inline-desc > div{display:contents;} body.single-product .product-footer .cdx-inline-desc > div > *{width:100%;max-width:560px;margin-left:auto !important;margin-right:auto !important;} /* section order + centring, keyed off the section classes added in PHP */ body.single-product .product-footer .cdx-inline-desc .cdx-sec{order:4;text-align:center;} body.single-product .product-footer .cdx-inline-desc .cdx-sec p{text-align:center !important;text-wrap:pretty;} body.single-product .product-footer .cdx-inline-desc .cdx-sec-volume{display:none !important;} body.single-product .product-footer .cdx-inline-desc .cdx-sec-included, body.single-product .product-footer .cdx-inline-desc .cdx-sec-overview{order:2;} body.single-product .product-footer .cdx-inline-desc .cdx-sec-focus{order:3;} body.single-product .product-footer .cdx-inline-desc .cdx-sec-storage{order:5;} body.single-product .product-footer > .container > .related{order:6;} body.single-product .product-footer .cdx-inline-desc .cdx-sec-intended{order:7;} body.single-product .product-footer .cdx-inline-desc .cdx-sec-legal{order:8;} body.single-product .product-footer .cdx-inline-desc .cdx-sec-terms{order:9;} body.single-product .product-footer .cdx-inline-desc .cdx-sec-note{order:10;margin-bottom:26px !important;} body.single-product .product-footer .cdx-inline-desc .cdx-sec-storage, body.single-product .product-footer .cdx-inline-desc .cdx-sec-storage p{text-align:left !important;} /* centered copy: Research Overview, Intended Use & Legal Disclaimer, Terms of Sale */ /* related products: section header */ body.single-product .product-footer > .container > .related{margin:24px 0 4px;padding:22px 0 6px;border-top:1px solid rgba(10,10,10,.08);} body.single-product .related .product-section-title-related{ text-align:center !important;text-transform:none !important; font-family:'DM Sans',-apple-system,Helvetica,Arial,sans-serif; font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:#0A0A0A; border:0 !important;padding:0 !important;margin:0 auto 18px !important;max-width:none;} body.single-product .related .product-section-title-related::after{ content:"";display:block;width:44px;height:3px;border-radius:2px;background:#2EE89B;margin:12px auto 0;} /* related products: cards */ body.single-product .related .product-small .col-inner{ background:#fff;border:1px solid rgba(10,10,10,.10);border-radius:16px;overflow:hidden;height:100%;} body.single-product .related .product-small .box-image{ background:#F2F3EE;border-top:0 !important;box-shadow:none !important;border-radius:0 !important; border-bottom:1px solid rgba(10,10,10,.07);} body.single-product .related .product-small:nth-child(4n+1) .box-image{background:#EEF3F1;} body.single-product .related .product-small:nth-child(4n+2) .box-image{background:#F2F1E9;} body.single-product .related .product-small:nth-child(4n+3) .box-image{background:#ECEFF3;} body.single-product .related .product-small:nth-child(4n+4) .box-image{background:#F1EFF2;} body.single-product .related .product-small .box-text{padding:12px 10px 14px !important;text-align:center;} /* name above the grey descriptor */ body.single-product .related .box-text .title-wrapper{display:flex;flex-direction:column;} body.single-product .related .box-text .product-title{display:block !important;order:1;margin:0 0 3px !important;} body.single-product .related .product-small .box-text .product-title, body.single-product .related .product-small .box-text .product-title a{ font-family:'DM Sans',-apple-system,Helvetica,Arial,sans-serif !important; font-size:13px !important;font-weight:700 !important;line-height:1.3 !important; letter-spacing:0 !important;text-transform:none !important; color:#0A0A0A !important;-webkit-text-fill-color:#0A0A0A !important;} body.single-product .related .box-text .product-cat{ display:block !important;order:2;font-family:'DM Mono',monospace;font-size:9px; letter-spacing:.1em;color:#8a8a80;opacity:1 !important;margin:0 0 8px;} /* price row */ body.single-product .related .price-wrapper{margin:0 0 10px;} body.single-product .related .price{ display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px; font-family:'DM Sans',-apple-system,Helvetica,Arial,sans-serif;} body.single-product .related .price del{color:#9a9a92;font-size:12px;font-weight:500;opacity:1;text-decoration:line-through;} body.single-product .related .price > .amount, body.single-product .related .price ins{font-size:17px;font-weight:800;color:#0A0A0A;text-decoration:none;} body.single-product .related .price ins, body.single-product .related .price ins .amount{color:#1FA876;} body.single-product .related .cdx-stock-badge{font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:#8a8a80;} /* discount badge on any related product that is on sale */ body.single-product .related .badge-container{left:auto !important;right:0 !important;top:0 !important;margin:8px 8px 0 0;} body.single-product .related .badge-container .badge{height:auto !important;width:auto !important;min-width:0 !important;margin:0;} body.single-product .related .badge-container .badge-inner{ display:inline-block;background:#5B1220 !important;color:#fff !important;-webkit-text-fill-color:#fff !important; border:0 !important;border-radius:999px !important; font-family:'DM Sans',-apple-system,Helvetica,Arial,sans-serif;font-size:10px;font-weight:700;line-height:1; height:auto !important;width:auto !important;min-width:0 !important;padding:5px 9px;} /* ADD button */ body.single-product .related .add-to-cart-button{margin:0;} body.single-product .related .add-to-cart-button a.button{ width:100%;max-width:230px;margin:0 auto !important; min-height:0 !important;line-height:1 !important;padding:13px 12px !important; background:#0A0A0A !important;border:1px solid #0A0A0A !important; color:#fff !important;-webkit-text-fill-color:#fff !important; border-radius:999px !important;box-shadow:none !important; font-family:Archivo,sans-serif;font-size:11px !important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;} /* equal-height cards */ body.single-product .related .row-slider .flickity-viewport .col{height:100%;} body.single-product .related .product-small .col-inner, body.single-product .related .product-small .col-inner > .product-small.box{display:flex;flex-direction:column;} body.single-product .related .product-small .col-inner > .product-small.box{flex:1 1 auto;} body.single-product .related .product-small .box-text{flex:1 1 auto;display:flex;flex-direction:column;} body.single-product .related .product-small .box-text .add-to-cart-button{margin-top:auto;} } /* ==== Codex Research — product buttons: professional green ==== */ html body.single-product a.cx3-coa-btn{ background-color:#1FA876 !important; border-color:#1FA876 !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } html body.single-product a.cx3-coa-btn:hover{ background-color:#17845C !important; border-color:#17845C !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } html body.single-product form.cart .quantity .ux-quantity__button.button, html body.single-product button.single_add_to_cart_button.button.alt, html body.single-product button.ux-buy-now-button.button.primary{ background-color:#1FA876 !important; border-color:#1FA876 !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } html body.single-product form.cart .quantity .ux-quantity__button.button:hover, html body.single-product button.single_add_to_cart_button.button.alt:hover, html body.single-product button.ux-buy-now-button.button.primary:hover{ background-color:#17845C !important; border-color:#17845C !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } /* ==== Codex Research — desktop: smaller product photo ==== */ @media (min-width:850px){ /* pin the two product columns so nothing inside can make them grow and wrap */ body.single-product .product-main .row.content-row{flex-wrap:nowrap !important;} body.single-product .product-main .product-gallery, body.single-product .product-main .product-info.summary{ flex:0 0 50% !important;width:50% !important;max-width:50% !important;min-width:0 !important;} body.single-product .product-main .cx3-pd, body.single-product .product-main .cx3-bs, body.single-product .product-main .cx3-bs-c, body.single-product .product-main .cx3-bs-c > *{min-width:0 !important;} body.single-product .product-main .product-gallery .product-images{max-width:520px;margin-left:auto;margin-right:auto;margin-top:16px !important;height:422px !important;} body.single-product .product-gallery .woocommerce-product-gallery__wrapper, body.single-product .product-gallery .woocommerce-product-gallery__image{height:100% !important;} body.single-product .product-gallery .product-thumbnails{display:none !important;} /* bigger hero type */ body.single-product .cx3-pd .cx3-eyebrow{font-size:14px !important;letter-spacing:.22em !important;} body.single-product .cx3-pd .cx3-title{font-size:56px !important;line-height:1.04 !important;} body.single-product .cx3-pd .cx3-pills .cx3-pill{font-size:13px !important;padding:9px 16px !important;} body.single-product .cx3-pd .cx3-priceline{font-size:19px !important;} body.single-product .cx3-pd .cx3-priceline .cx3-price, body.single-product .cx3-pd .cx3-priceline > span:first-child{font-size:1.55em !important;} body.single-product .cx3-pd .cx3-desc{font-size:17px !important;line-height:1.6 !important;} body.single-product .cx3-pd .cx3-sv{font-size:15px !important;} body.single-product .cx3-pd .cx3-sl{font-size:12.5px !important;} body.single-product .cx3-pd .cx3-specs{padding-top:22px !important;padding-bottom:22px !important;} body.single-product form.cart .single_add_to_cart_button, body.single-product form.cart .ux-buy-now-button{font-size:15px !important;min-height:56px !important;} body.single-product .product-main .product-gallery .product-images{max-width:600px !important;} /* kit pages: What’s inside on one line, and larger vials in the photo */ body.single-product .cx3-pd > div > div[style*="flex-direction:column"]{flex-direction:row !important;align-items:stretch !important;gap:12px !important;} body.single-product .cx3-pd > div > div[style*="flex-direction:column"] > a{flex:1 1 0 !important;min-width:0 !important;} body.single-product .cx3-pd > div > div[style*="flex-direction:column"] > a > span{min-width:0 !important;} /* whats-inside label centred + green outlines to match the buttons */ body.single-product .cx3-pd > div > div:has(+ div[style*="flex-direction:column"]){text-align:center !important;} body.single-product .cx3-pd > div > div[style*="flex-direction:column"] > a{border-color:#1FA876 !important;} /* roomier bundle rows + COA table on desktop */ body.single-product .product-main .cx3-bs-c{margin-bottom:18px !important;padding:18px 16px !important;} body.single-product .product-main .cx3-bs-c:last-child{margin-bottom:0 !important;} body.single-product .product-main .cx3-coa-row{padding-top:16px !important;padding-bottom:16px !important;} /* roomier certificate card */ body.single-product .product-main .cx3-coa{padding:34px 30px 30px !important;} body.single-product .product-main .cx3-coa-head{padding-bottom:10px !important;} body.single-product .product-main .cx3-coa-hero{padding:28px 0 30px !important;} body.single-product .product-main .cx3-coa-num{font-size:1.25em !important;} /* fuller bundle rows: spread across the row instead of stacking on the right */ body.single-product .product-main .cx3-bs-c{ display:grid !important; grid-template-columns:auto minmax(90px,1fr) auto auto 120px 140px 150px 22px !important; grid-template-rows:auto !important; align-items:center !important; column-gap:24px !important;row-gap:0 !important; } body.single-product .product-main .cx3-bs-c .cx3-vg{grid-column:1 !important;grid-row:1 !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-n{grid-column:2 !important;grid-row:1 !important;justify-self:center !important;text-align:center !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-was{ grid-column:3 !important;grid-row:1 !important;justify-self:end !important;display:block !important; text-decoration:line-through !important;color:#9a9a92 !important;font-size:15px !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-ea{grid-column:4 !important;grid-row:1 !important;justify-self:end !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-off{ grid-column:5 !important;grid-row:1 !important;justify-self:center !important;display:inline-block !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-save{grid-column:6 !important;grid-row:1 !important;justify-self:center !important;text-align:center !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-tot{ grid-column:7 !important;grid-row:1 !important;justify-self:center !important;text-align:center !important;display:block !important; color:#6d716f !important;font-size:14px !important;} body.single-product .product-main .cx3-bs-c .cx3-radio{grid-column:8 !important;grid-row:1 !important;} /* vertically centre every cell in the bundle row */ body.single-product .product-main .cx3-bs-c > *, body.single-product .product-main .cx3-bs-c .cx3-bs-mid > *, body.single-product .product-main .cx3-bs-c .cx3-bs-right > *{align-self:center !important;} /* bundle & save: centred header */ body.single-product .cx3-pd .cx3-bs-head{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;gap:3px !important;} } @media (max-width: 849px) { /* ==== Codex Research — mobile menu redesign ==== */ #main-menu.mobile-sidebar{background:#fff;min-height:100vh !important;} .mfp-content:has(#main-menu){background:#fff !important;} /* pin off-canvas to very top on all pages (match home on inner pages) */ .off-canvas .mfp-container{padding-top:0 !important;padding-bottom:0 !important;} .off-canvas .mfp-content{top:0 !important;margin-top:0 !important;} .off-canvas .mobile-sidebar-slide,.off-canvas .mobile-sidebar{top:0 !important;margin-top:0 !important;} #main-menu .sidebar-menu{padding:100px 0 0 !important;} /* inner pages: less top space (no fixed header to clear) */ body:not(.home) #main-menu .sidebar-menu{padding-top:52px !important;} #main-menu .nav-sidebar.nav-vertical{padding:0;margin:0;} #main-menu .nav-sidebar.nav-vertical>li{display:block !important;margin:0;border:0 !important;list-style:none;} #main-menu .nav-sidebar.nav-vertical>li+li{border-top:0 !important;} /* section labels */ #main-menu .header-search-form::before,#main-menu .sec-explore::before,#main-menu .sec-verify::before,#main-menu .sec-company::before{ display:block;padding:0 24px 12px;color:#1ca34a;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;} #main-menu .header-search-form::before{content:"SEARCH";display:none !important;} #main-menu .sec-explore::before{content:"EXPLORE";} #main-menu .sec-verify::before{content:"VERIFICATION";} #main-menu .sec-company::before{content:"COMPANY";} #main-menu .sec-explore{margin-top:32px !important;} #main-menu .sec-verify,#main-menu .sec-company{margin-top:15px !important;} /* search field */ #main-menu .header-search-form{padding:0 !important;} #main-menu .header-search-form .search-form-categories{display:none !important;} #main-menu .header-search-form .header-search-form-wrapper{padding:0 !important;margin:0;max-width:none;} #main-menu .header-search-form .searchform-wrapper{padding:0 24px !important;margin:0;max-width:none;} #main-menu .header-search-form .flex-row{border:1px solid #333;border-radius:10px;background:#fff;align-items:center;padding:0 6px;margin:0;} #main-menu .header-search-form select,#main-menu .header-search-form input.search-field,#main-menu .header-search-form input[type=search]{border:0 !important;box-shadow:none !important;background:transparent !important;height:42px;font-size:15px;color:#333;margin:0;padding:0 10px;} #main-menu .header-search-form button{background:transparent !important;box-shadow:none !important;color:#111 !important;padding:0 8px;margin:0;min-height:0;} /* rows */ #main-menu .nav-sidebar.nav-vertical>li[class*="mi-"]>a{display:flex;align-items:center;padding:17px 24px 17px 62px !important;color:#1a1a1a;font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid #efefef;position:relative;line-height:1;background-color:#fff;} #main-menu .nav-sidebar.nav-vertical>li.mi-home>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a1a1a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2011l9-8%209%208'%2F%3E%3Cpath%20d%3D'M5%209.5V21h14V9.5'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:24px center;background-size:22px 22px;} #main-menu .nav-sidebar.nav-vertical>li.mi-catalog>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a1a1a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'7.5'%20height%3D'7.5'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'13.5'%20y%3D'3'%20width%3D'7.5'%20height%3D'7.5'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'3'%20y%3D'13.5'%20width%3D'7.5'%20height%3D'7.5'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'13.5'%20y%3D'13.5'%20width%3D'7.5'%20height%3D'7.5'%20rx%3D'1.5'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:24px center;background-size:22px 22px;} #main-menu .nav-sidebar.nav-vertical>li.mi-about>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a1a1a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'8.5'%20cy%3D'9'%20r%3D'3.2'%2F%3E%3Cpath%20d%3D'M2.5%2020c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6'%2F%3E%3Cpath%20d%3D'M16%206.2a3.2%203.2%200%200%201%200%206'%2F%3E%3Cpath%20d%3D'M18.2%2014.9c2%20.6%203.3%202.4%203.3%205.1'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:24px center;background-size:22px 22px;} #main-menu .nav-sidebar.nav-vertical>li.mi-coa>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a1a1a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l7%202.6v5.4c0%204.7-3.1%207.7-7%209-3.9-1.3-7-4.3-7-9V5.6z'%2F%3E%3Cpath%20d%3D'M8.7%2012l2.3%202.3%204.3-4.4'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:24px center;background-size:22px 22px;} #main-menu .nav-sidebar.nav-vertical>li.mi-terms>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a1a1a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%203h7l5%205v13H6z'%2F%3E%3Cpath%20d%3D'M13%203v5h5'%2F%3E%3Cpath%20d%3D'M9%2013h6M9%2017h5'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:24px center;background-size:22px 22px;} #main-menu .nav-sidebar.nav-vertical>li.mi-contact>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a1a1a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2.5'%2F%3E%3Cpath%20d%3D'M4%207l8%205.5L20%207'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:24px center;background-size:22px 22px;} #main-menu .nav-sidebar.nav-vertical>li.mi-affiliates>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a1a1a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9'%20cy%3D'8'%20r%3D'3.4'%2F%3E%3Cpath%20d%3D'M2.6%2020c0-3.5%202.9-6.2%206.4-6.2%201.3%200%202.6.4%203.6%201'%2F%3E%3Cpath%20d%3D'M19%208.4v5.4M16.3%2011.1h5.4'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:24px center;background-size:22px 22px;} #main-menu .current-menu-item.mi-affiliates>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231ca34a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9'%20cy%3D'8'%20r%3D'3.4'%2F%3E%3Cpath%20d%3D'M2.6%2020c0-3.5%202.9-6.2%206.4-6.2%201.3%200%202.6.4%203.6%201'%2F%3E%3Cpath%20d%3D'M19%208.4v5.4M16.3%2011.1h5.4'%2F%3E%3C%2Fsvg%3E");} #main-menu .nav-sidebar.nav-vertical>li.mi-affiliates>a{border-bottom:0 !important;} #main-menu li[class*="mi-"]>a::after{content:"";width:18px;height:18px;flex:0 0 18px;margin-left:auto;background-color:#c8ced3;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;} /* active item */ #main-menu .current-menu-item>a{color:#0c7a37;box-shadow:inset 4px 0 0 #0c7a37;} #main-menu .current-menu-item.mi-home>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231ca34a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2011l9-8%209%208'%2F%3E%3Cpath%20d%3D'M5%209.5V21h14V9.5'%2F%3E%3C%2Fsvg%3E");} #main-menu .current-menu-item.mi-catalog>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231ca34a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'7.5'%20height%3D'7.5'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'13.5'%20y%3D'3'%20width%3D'7.5'%20height%3D'7.5'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'3'%20y%3D'13.5'%20width%3D'7.5'%20height%3D'7.5'%20rx%3D'1.5'%2F%3E%3Crect%20x%3D'13.5'%20y%3D'13.5'%20width%3D'7.5'%20height%3D'7.5'%20rx%3D'1.5'%2F%3E%3C%2Fsvg%3E");} #main-menu .current-menu-item.mi-about>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231ca34a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'8.5'%20cy%3D'9'%20r%3D'3.2'%2F%3E%3Cpath%20d%3D'M2.5%2020c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6'%2F%3E%3Cpath%20d%3D'M16%206.2a3.2%203.2%200%200%201%200%206'%2F%3E%3Cpath%20d%3D'M18.2%2014.9c2%20.6%203.3%202.4%203.3%205.1'%2F%3E%3C%2Fsvg%3E");} #main-menu .current-menu-item.mi-coa>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231ca34a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l7%202.6v5.4c0%204.7-3.1%207.7-7%209-3.9-1.3-7-4.3-7-9V5.6z'%2F%3E%3Cpath%20d%3D'M8.7%2012l2.3%202.3%204.3-4.4'%2F%3E%3C%2Fsvg%3E");} #main-menu .current-menu-item.mi-terms>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231ca34a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%203h7l5%205v13H6z'%2F%3E%3Cpath%20d%3D'M13%203v5h5'%2F%3E%3Cpath%20d%3D'M9%2013h6M9%2017h5'%2F%3E%3C%2Fsvg%3E");} #main-menu .current-menu-item.mi-contact>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231ca34a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2.5'%2F%3E%3Cpath%20d%3D'M4%207l8%205.5L20%207'%2F%3E%3C%2Fsvg%3E");} #main-menu .current-menu-item>a::after{background-color:#1ca34a;} /* hide flatsome extras */ #main-menu .nav-sidebar.nav-vertical>li.header-newsletter-item{display:none !important;} #main-menu .nav-sidebar.nav-vertical>li.html_top_right_text{display:none !important;} /* footer brand card (hidden per request) */ #main-menu .nav-sidebar.nav-vertical>li.header-social-icons{display:none !important;} #main-menu .nav-sidebar.nav-vertical>li.header-social-icons{margin:16px 0 0 !important;padding:24px 24px 30px !important;border-top:1px solid #eee;background:#fff;} #main-menu .header-social-icons::before{content:"";display:block;width:100%;height:112px;margin-bottom:6px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'116'%20viewBox%3D'0%200%20300%20116'%20fill%3D'none'%20font-family%3D'Montserrat%2C%20Arial%2C%20sans-serif'%3E%0A%3Cg%20stroke%3D'%231ca34a'%20stroke-width%3D'2'%20fill%3D'none'%3E%3Cpolygon%20points%3D'30%2C10%2047%2C20%2047%2C40%2030%2C50%2013%2C40%2013%2C20'%2F%3E%3Cellipse%20cx%3D'30'%20cy%3D'30'%20rx%3D'11'%20ry%3D'4.2'%20transform%3D'rotate(28%2030%2030)'%2F%3E%3Cellipse%20cx%3D'30'%20cy%3D'30'%20rx%3D'11'%20ry%3D'4.2'%20transform%3D'rotate(-28%2030%2030)'%2F%3E%3C%2Fg%3E%0A%3Ccircle%20cx%3D'30'%20cy%3D'30'%20r%3D'2.4'%20fill%3D'%231ca34a'%2F%3E%0A%3Ctext%20x%3D'64'%20y%3D'27'%20font-size%3D'15'%20font-weight%3D'700'%20letter-spacing%3D'2.5'%20fill%3D'%231a1a1a'%3ECODEX%20RESEARCH%3C%2Ftext%3E%0A%3Ctext%20x%3D'64'%20y%3D'45'%20font-size%3D'9.5'%20font-weight%3D'600'%20letter-spacing%3D'1'%20fill%3D'%238a9099'%3EPRECISION.%20PURITY.%20TRANSPARENCY.%3C%2Ftext%3E%0A%3Cline%20x1%3D'64'%20y1%3D'62'%20x2%3D'120'%20y2%3D'62'%20stroke%3D'%231ca34a'%20stroke-width%3D'2.5'%2F%3E%0A%3Cg%20transform%3D'translate(16%2C80)'%3E%3Cpath%20d%3D'M8%201l6%202.1v4.5c0%203.9-2.6%206.5-6%207.6-3.4-1.1-6-3.7-6-7.6V3.1z'%20stroke%3D'%231ca34a'%20stroke-width%3D'1.6'%2F%3E%3Cpath%20d%3D'M5.4%208.2l1.8%201.8%203.4-3.4'%20stroke%3D'%231ca34a'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Ctext%20x%3D'22'%20y%3D'13'%20font-size%3D'11.5'%20font-weight%3D'700'%20letter-spacing%3D'.4'%20fill%3D'%231a1a1a'%3E99%25%2B%20PURITY%3C%2Ftext%3E%3C%2Fg%3E%0A%3Cline%20x1%3D'150'%20y1%3D'82'%20x2%3D'150'%20y2%3D'98'%20stroke%3D'%23dcdcdc'%20stroke-width%3D'1.4'%2F%3E%0A%3Cg%20transform%3D'translate(164%2C80)'%3E%3Cpath%20d%3D'M6.5%201v5l-4.2%208.2A1.8%201.8%200%200%200%204%2017h8a1.8%201.8%200%200%200%201.7-2.8L9.5%206V1'%20stroke%3D'%231ca34a'%20stroke-width%3D'1.6'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M5%201h6'%20stroke%3D'%231ca34a'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%2F%3E%3Ctext%20x%3D'22'%20y%3D'13'%20font-size%3D'11.5'%20font-weight%3D'700'%20letter-spacing%3D'.4'%20fill%3D'%231a1a1a'%3EHPLC%20VERIFIED%3C%2Ftext%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") left center/contain no-repeat;} #main-menu .header-social-icons .social-icons,#main-menu .header-social-icons ul{margin:0;padding:0;display:flex;gap:18px;align-items:center;} #main-menu .header-social-icons a{color:#8a9099 !important;background:transparent !important;font-size:19px;margin:0 !important;opacity:1 !important;} #main-menu .header-social-icons a:before{color:#8a9099 !important;} #main-menu .header-social-icons a.facebook{display:none !important;} } /* Codex Research - Age Gate: full catalog, big vials rising slowly with varied lean */ @keyframes codex-vial-rise-left { 0% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-60px,-80vh) rotate(-6deg); } 100% { transform: translate(-110px,-160vh) rotate(-10deg); } } @keyframes codex-vial-rise-right { 0% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(60px,-80vh) rotate(6deg); } 100% { transform: translate(110px,-160vh) rotate(10deg); } } @keyframes codex-vial-rise-straight { 0% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(6px,-80vh) rotate(1deg); } 100% { transform: translate(-4px,-160vh) rotate(-2deg); } } .age-gate__background::before, .age-gate__background::after, .age-gate__restricted--standard::before, .age-gate__restricted--standard::after, .age-gate__heading::before, .age-gate__heading::after, .age-gate__wrapper::before, .age-gate__wrapper::after, .age-gate__wrapper p:first-of-type::before, .age-gate__wrapper p:first-of-type::after, .age-gate__wrapper p:nth-of-type(2)::before, .age-gate__wrapper p:nth-of-type(2)::after, .age-gate__wrapper button:first-of-type::before, .age-gate__wrapper button:first-of-type::after, .age-gate__wrapper button:last-of-type::before, .age-gate__wrapper button:last-of-type::after, .age-gate__wrapper label::before, .age-gate__wrapper label::after, .age-gate__wrapper a::before, .age-gate__wrapper a::after { content: ""; position: fixed; top: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 0 16px rgba(31,214,130,.55)); pointer-events: none; z-index: 1; opacity: .95; animation-timing-function: linear; animation-iteration-count: infinite; } .age-gate__background::before { left: 2%; width: 260px; height: 260px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/semax-removebg.webp'); animation-name: codex-vial-rise-left; animation-duration: 34s; animation-delay: -3.8s; } .age-gate__background::after { left: 8%; width: 280px; height: 280px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/epithalon-removebg.webp'); animation-name: codex-vial-rise-right; animation-duration: 38s; animation-delay: -17.1s; } .age-gate__heading::before { left: 14%; width: 250px; height: 250px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/epithalon-removebg.webp'); animation-name: codex-vial-rise-straight; animation-duration: 30s; animation-delay: -7.6s; } .age-gate__restricted--standard::before { left: 20%; width: 240px; height: 240px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/bpc-157-removebg.webp'); animation-name: codex-vial-rise-left; animation-duration: 36s; animation-delay: -22.8s; } .age-gate__restricted--standard::after { left: 26%; width: 230px; height: 230px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/ghk-cu-removebg-std.webp'); animation-name: codex-vial-rise-right; animation-duration: 32s; animation-delay: -11.4s; } .age-gate__heading::after { left: 74%; width: 260px; height: 260px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/glow-removebg.webp'); animation-name: codex-vial-rise-straight; animation-duration: 40s; animation-delay: -26.6s; } .age-gate__wrapper::before { left: 80%; width: 240px; height: 240px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/glp-2-tz__1_-removebg.webp'); animation-name: codex-vial-rise-left; animation-duration: 34s; animation-delay: -5.7s; } .age-gate__wrapper::after { left: 86%; width: 250px; height: 250px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/nad-removebg.webp'); animation-name: codex-vial-rise-right; animation-duration: 30s; animation-delay: -19s; } .age-gate__wrapper p:first-of-type::before { left: 92%; width: 230px; height: 230px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/klow-removebg.webp'); animation-name: codex-vial-rise-straight; animation-duration: 38s; animation-delay: -1.9s; } .age-gate__wrapper p:first-of-type::after { left: 98%; width: 245px; height: 245px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/tesamorelin__1_-removebg-std.webp'); animation-name: codex-vial-rise-left; animation-duration: 36s; animation-delay: -15.2s; } .age-gate__wrapper p:nth-of-type(2)::before { left: 5%; width: 235px; height: 235px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/mots-c-removebg.webp'); animation-name: codex-vial-rise-right; animation-duration: 32s; animation-delay: -28.5s; } .age-gate__wrapper p:nth-of-type(2)::after { left: 11%; width: 255px; height: 255px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/NEW_CP-10-removebg-std.webp'); animation-name: codex-vial-rise-straight; animation-duration: 42s; animation-delay: -9.5s; } .age-gate__wrapper button:first-of-type::before { left: 17%; width: 225px; height: 225px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/melanotan-ii__1_-removebg-std.webp'); animation-name: codex-vial-rise-left; animation-duration: 28s; animation-delay: -20.9s; } .age-gate__wrapper button:first-of-type::after { left: 23%; width: 260px; height: 260px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/glp-1-sm__1_-removebg-std.webp'); animation-name: codex-vial-rise-right; animation-duration: 36s; animation-delay: -13.3s; } .age-gate__wrapper button:last-of-type::before { left: 77%; width: 240px; height: 240px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/pt-141-removebg.webp'); animation-name: codex-vial-rise-straight; animation-duration: 34s; animation-delay: -24.7s; } .age-gate__wrapper button:last-of-type::after { left: 83%; width: 230px; height: 230px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/tb-500-removebg-1-std.webp'); animation-name: codex-vial-rise-left; animation-duration: 30s; animation-delay: -4.75s; } .age-gate__wrapper label::before { left: 89%; width: 250px; height: 250px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/kisspeptin-10-removebg.webp'); animation-name: codex-vial-rise-right; animation-duration: 40s; animation-delay: -18.05s; } .age-gate__wrapper label::after { left: 95%; width: 235px; height: 235px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/ipamorelin-removebg.webp'); animation-name: codex-vial-rise-straight; animation-duration: 33s; animation-delay: -8.55s; } .age-gate__wrapper a::before { left: 29%; width: 245px; height: 245px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/wolverine-removebg.webp'); animation-name: codex-vial-rise-left; animation-duration: 38s; animation-delay: -30.4s; } .age-gate__wrapper a::after { left: 71%; width: 255px; height: 255px; background-image: url('https://codexresearch.shop/wp-content/uploads/2026/09/glp-3-rt__2_-removebg.webp'); animation-name: codex-vial-rise-right; animation-duration: 37s; animation-delay: -12.35s; } /* --- Modal card + logo header box --- */ .age-gate__wrapper { background: #ffffff; border-top: 4px solid #1fd682; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 40px rgba(31,214,130,.15); overflow: hidden; } .age-gate__heading { background-color: #0a0e0c !important; } @media (max-width: 782px) { .age-gate__background::before, .age-gate__background::after, .age-gate__restricted--standard::before, .age-gate__restricted--standard::after, .age-gate__heading::before, .age-gate__heading::after, .age-gate__wrapper::before, .age-gate__wrapper::after, .age-gate__wrapper p:first-of-type::before, .age-gate__wrapper p:first-of-type::after, .age-gate__wrapper p:nth-of-type(2)::before, .age-gate__wrapper p:nth-of-type(2)::after, .age-gate__wrapper button:first-of-type::before, .age-gate__wrapper button:first-of-type::after, .age-gate__wrapper button:last-of-type::before, .age-gate__wrapper button:last-of-type::after, .age-gate__wrapper label::before, .age-gate__wrapper label::after, .age-gate__wrapper a::before, .age-gate__wrapper a::after { display: none; } } /* Codex - cart page cards */ /* Remove the reward-points banner at the top of the cart (desktop + mobile) */ body.woocommerce-cart .spar-cart-rewards-box{display:none !important;} /* Match the checkout cards: light neutral grey, faint black hairline */ html body.woocommerce-cart .wc-block-cart table.wc-block-cart-items{ box-sizing:border-box !important; width:100% !important; } html body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar, html body.woocommerce-cart .wc-block-cart table.wc-block-cart-items{ background:#F5F6F7 !important; border:1px solid rgba(10,10,10,.12) !important; border-radius:16px !important; box-shadow:none !important; padding:28px 28px 30px !important; } @media (max-width:767px){ html body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar, html body.woocommerce-cart .wc-block-cart table.wc-block-cart-items{ padding:20px 18px 22px !important; } } /* Very narrow phones: keep the line item inside the card */ @media (max-width:374px){ html body.woocommerce-cart .wc-block-cart table.wc-block-cart-items{ padding-left:14px !important; padding-right:14px !important; } html body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector{ max-width:88px !important; min-width:0 !important; } } /* Codex - cart page: RUO note, taller desktop, slim BAC alert */ /* Research-use disclaimer box, centred under the product + totals cards */ html body.woocommerce-cart .cdx-cart-ruo{ max-width:720px; margin:26px auto 0; padding:10px 14px 11px; background:#FFF6EC; border:1px solid rgba(194,65,12,.2); border-radius:11px; font-family:'DM Sans',-apple-system,Helvetica,Arial,sans-serif; font-size:10px; line-height:1.55; font-weight:700; color:#4A4340; text-align:center; } html body.woocommerce-cart .cdx-cart-ruo b{color:#C2410C;font-weight:900;} html body.woocommerce-cart .cdx-cart-ruo img.emoji{width:1em;height:1em;vertical-align:-.12em;} @media (max-width:767px){ html body.woocommerce-cart .wc-block-cart{margin-bottom:0 !important;} html body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar{margin-bottom:0 !important;} html body.woocommerce-cart .cdx-cart-ruo{margin-top:14px;padding:10px 12px 11px;} } @media (min-width:768px){ html body.woocommerce-cart .wc-block-cart{margin-bottom:24px !important;} html body.woocommerce-cart .cdx-cart-ruo{margin-top:16px;} } /* Desktop only: give the page more room so the footer stays below the fold */ @media (min-width:850px){ html body.woocommerce-cart #main{min-height:calc(100vh - 120px);} } /* Mobile only: slim, single-line bacteriostatic water alert */ @media (max-width:767px){ html body.woocommerce-cart #main > div:not([class]){ padding:7px 10px !important; gap:8px !important; margin:0 0 14px !important; border-radius:9px !important; } html body.woocommerce-cart #main > div:not([class]) > div > div:nth-child(2){display:none !important;} html body.woocommerce-cart #main > div:not([class]) > div > div:first-child{ font-size:0 !important; letter-spacing:0 !important; line-height:1.3 !important; margin:0 !important; white-space:nowrap !important; } html body.woocommerce-cart #main > div:not([class]) > div > div:first-child::before{ content:"⚗ Ships lyophilized (powder)"; font-size:9px; letter-spacing:.4px; } html body.woocommerce-cart #main > div:not([class]) > a{ font-size:9.5px !important; padding:7px 11px !important; white-space:nowrap !important; } } /* Codex - desktop header: breathing room for the logo */ @media (min-width:850px){ html body #header:not(.transparent) .header-main{height:84px !important;} html body #header:not(.transparent) .header-main #logo img{max-height:64px !important;} html body #header .header-wrapper.stuck .header-main{height:74px !important;} html body #header .header-wrapper.stuck .header-main #logo img{max-height:56px !important;} } /* Codex - desktop header: inset logo + icons, larger perk bar */ @media (min-width:850px){ html body #header .header-main .header-inner{padding-left:44px !important;padding-right:44px !important;} html body .cdx-perk-global .cdx-mobile-perk-marquee{ --pk:min(14px,1.3vw) !important; padding-top:6px !important; padding-bottom:6px !important; } html body .cdx-perk-global .cdx-mobile-perk-item{ gap:calc(var(--pk) * .9) !important; padding:0 8px !important; } html body .cdx-perk-global .cdx-mobile-perk-item .perk-bold, html body .cdx-perk-global .cdx-mobile-perk-item .perk-sub, html body .cdx-perk-global .cdx-mobile-perk-item .perk-applied{letter-spacing:.07em !important;} html body .cdx-perk-global .cdx-mobile-perk-item{line-height:1.15 !important;} html body .cdx-perk-global .cdx-mobile-perk-item .perk-bold, html body .cdx-perk-global .cdx-mobile-perk-item .perk-applied{font-size:0 !important;} html body .cdx-perk-global .cdx-mobile-perk-item .perk-bold::before{content:"Enjoy 30% Off";font-size:var(--pk);letter-spacing:.07em;} html body .cdx-perk-global .cdx-mobile-perk-item .perk-applied::before{content:"Applied automatically with account creation";font-size:var(--pk);letter-spacing:.07em;} } /* Codex - cart drawer: readable name + View cart, drawer above header */ .mfp-bg.off-canvas{z-index:10040 !important;} .mfp-wrap.off-canvas{z-index:10050 !important;} html body #cart-popup .woocommerce-mini-cart-item > a, html body #cart-popup .woocommerce-mini-cart-item > a:hover{ color:#0A0A0A !important; -webkit-text-fill-color:#0A0A0A !important; } html body #cart-popup .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout){ background:#FFFFFF !important; color:#0A0A0A !important; -webkit-text-fill-color:#0A0A0A !important; border:1px solid #0A0A0A !important; } html body #cart-popup .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover{ background:#0A0A0A !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } /* Codex - COA hero: tighter on desktop */ @media (min-width:850px){ html body .cdx-coa .cdx-coa-hero{padding-top:115px !important;min-height:405px !important;} html body .cdx-coa .cdx-coa-hero-inner{padding-bottom:44px !important;} html body .cdx-coa .cdx-coa-hero-inner .cdx-coa-sub{display:none !important;} html body .cdx-coa .cdx-coa-hero-inner .cdx-coa-rule{margin-top:20px !important;margin-bottom:26px !important;} } /* Codex - COA list as cards, 3 across on desktop */ @media (min-width:1001px){ html body .cdx-coa .cdx-coa-thead{display:none !important;} html body .cdx-coa .cdx-coa-table,html body .cdx-coa .cdx-coa-foot{max-width:1520px !important;} html body .cdx-coa .cdx-coa-controls{max-width:1472px !important;} html body .cdx-coa .cdx-coa-tbody{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:22px !important;align-items:start !important;} html body .cdx-coa .cdx-coa-empty{grid-column:1 / -1 !important;} html body .cdx-coa .cdx-coa-row{ display:grid !important; grid-template-columns:1fr auto !important; grid-template-areas:"compound compound" "img img" "batch date" "purity status" "testing testing" "coa coa" !important; align-items:center !important; column-gap:12px !important;row-gap:10px !important; margin-top:0 !important;padding:0 0 18px !important; background:#F5F6F7 !important;border:1px solid rgba(10,10,10,.12) !important;border-radius:16px !important; position:relative !important;overflow:hidden !important; } html body .cdx-coa .cdx-coa-row::before{content:"";grid-area:img;display:block;width:100%;height:262px;background:#fff var(--cdx-coa-row-bg,none) no-repeat center top;background-size:100% auto;border-bottom:1px solid rgba(10,10,10,.10);margin-bottom:4px;} html body .cdx-coa .cdx-coa-row .cc-compound{grid-area:compound;padding:16px 18px 12px !important;margin-bottom:-10px !important;} html body .cdx-coa .cdx-coa-row .cc-batch{grid-area:batch;padding-left:18px !important;} html body .cdx-coa .cdx-coa-row .cc-date{grid-area:date;padding-right:18px !important;text-align:right !important;} html body .cdx-coa .cdx-coa-row .cc-purity{grid-area:purity;padding-left:18px !important;} html body .cdx-coa .cdx-coa-row .cc-status{grid-area:status;padding-right:18px !important;text-align:right !important;} html body .cdx-coa .cdx-coa-row .cc-testing{grid-area:testing;padding:0 18px !important;} html body .cdx-coa .cdx-coa-row .cc-coa{grid-area:coa;padding:0 18px !important;text-align:left !important;} html body .cdx-coa .cdx-coa-row .cc-coa a{display:flex !important;justify-content:center !important;width:100% !important;} html body .cdx-coa .cdx-coa-row .cc-compound img{position:absolute !important;top:238px !important;right:20px !important;width:72px !important;height:72px !important;border-radius:50% !important;background:#fff !important;border:1px solid rgba(10,10,10,.12) !important;object-fit:contain !important;padding:4px !important;z-index:2 !important;box-shadow:0 5px 14px -7px rgba(10,10,10,.5) !important;} } /* Codex - COA cards on mobile: full-width, aligned with the filter bar */ @media (max-width:600px){ html body .cdx-coa .cdx-coa-table{padding-left:0 !important;padding-right:0 !important;} } /* Codex - COA cards on mobile: same design as desktop */ @media (max-width:600px){ html body .cdx-coa .cdx-coa-row{ display:grid !important;grid-template-columns:1fr auto !important; grid-template-areas:"compound compound" "img img" "batch date" "purity status" "testing testing" "coa coa" !important; align-items:center !important;column-gap:8px !important;row-gap:7px !important; padding:0 0 14px !important;background:#F5F6F7 !important;border:1px solid rgba(10,10,10,.12) !important;border-radius:14px !important; position:relative !important;overflow:hidden !important; } html body .cdx-coa .cdx-coa-row::before{content:"";grid-area:img;display:block;width:100%;height:118px;background:#fff var(--cdx-coa-row-bg,none) no-repeat center top;background-size:100% auto;border-bottom:1px solid rgba(10,10,10,.10);} html body .cdx-coa .cdx-coa-row .cc-compound{grid-area:compound;display:block !important;padding:11px 12px 9px !important;margin-bottom:-7px !important;} html body .cdx-coa .cdx-coa-row .cc-compound .cc-nm b{font-size:12.5px !important;} html body .cdx-coa .cdx-coa-row .cc-compound .cc-nm span{font-size:9.5px !important;} html body .cdx-coa .cdx-coa-row .cc-compound img{position:absolute !important;width:42px !important;height:42px !important;top:115px !important;right:10px !important;border-radius:50% !important;background:#fff !important;border:1px solid rgba(10,10,10,.12) !important;object-fit:contain !important;padding:3px !important;z-index:2 !important;box-shadow:0 4px 10px -6px rgba(10,10,10,.5) !important;} html body .cdx-coa .cdx-coa-row .cc-batch{grid-area:batch;display:block !important;padding-left:12px !important;font-size:9.5px !important;white-space:nowrap !important;letter-spacing:-.2px !important;} html body .cdx-coa .cdx-coa-row .cc-date{grid-area:date;display:block !important;padding-right:12px !important;text-align:right !important;font-size:9px !important;white-space:nowrap !important;} html body .cdx-coa .cdx-coa-row .cc-purity{grid-area:purity;padding-left:12px !important;} html body .cdx-coa .cdx-coa-row .cc-status{grid-area:status;display:block !important;padding-right:12px !important;text-align:right !important;} html body .cdx-coa .cdx-coa-row .cc-testing{grid-area:testing;display:flex !important;flex-wrap:wrap !important;gap:6px !important;padding:0 12px !important;} html body .cdx-coa .cdx-coa-row .cc-testing .cc-test{font-size:9px !important;} html body .cdx-coa .cdx-coa-row .cc-coa{grid-area:coa;padding:0 12px !important;text-align:left !important;} html body .cdx-coa .cdx-coa-row .cc-coa a{display:flex !important;justify-content:center !important;width:100% !important;font-size:10px !important;} } /* CDX-MOBILE-NAV-TOP */ @media (max-width: 849px){ #main-menu .nav-sidebar.nav-vertical>li.mi-bundle>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a1a1a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l9%205-9%205-9-5%209-5z'%2F%3E%3Cpath%20d%3D'M3%2013l9%205%209-5'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:24px center;background-size:22px 22px;} #main-menu .nav-sidebar.nav-vertical>li.mi-membership>a{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a1a1a'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'5'%20width%3D'20'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M2%2010h20'%2F%3E%3Cpath%20d%3D'M6%2015h5'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:24px center;background-size:22px 22px;} html body #main-menu.mobile-sidebar{padding-top:0!important;} html body #main-menu.mobile-sidebar .sidebar-menu{padding-top:14px!important;} html.has-off-canvas body #header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:10060!important;} html.has-off-canvas body .off-canvas .mfp-content{top:104px!important;height:calc(100% - 104px)!important;} html.has-off-canvas body .off-canvas .mfp-close{top:104px!important;} } /* ========================================================================== CODEX RESEARCH — DESKTOP HERO (v6, landscape podium background) Lives in Customizer > Additional CSS. Last updated 2026-08-21. Desktop only (>= 901px). The mobile hero is completely untouched. No markup changes: it reuses the three .mobile-podium-vials s that are already inside the hero, just hidden above 900px. Three variables drive everything: --cdxW how wide the background artwork renders (sets podium size) --cdxShift horizontal nudge applied to the artwork AND the vials together, so they never come apart --cdxHeroH the hero's height, which the vials are sized against, so they keep the same proportion at every viewport width ========================================================================== */ @media (min-width: 901px){ body.home section.hero{ /* 150vw sizes the artwork; the podium is centred in it (0.49) */ --cdxW: min(150vw, 3400px); /* negative = left. 0.022 lands the podium at ~70% across */ --cdxShift: calc(var(--cdxW) * -0.022); --cdxHeroH: clamp(560px, 31vw, 720px); /* vial size is a fraction of the hero height, not of the artwork — this is what keeps them from shrinking on 1366/1440 screens where the hero height hits its 560px floor */ --cdxVial: calc(var(--cdxHeroH) * 0.90); /* where the vials stand, measured up from the hero's bottom edge. 0.0515 puts them near the FRONT of the ring; 0.0591 was mid-platform, 0.0497 would be right on the front rim. Less the 64px the artwork is pushed down by. */ --cdxStand: calc(var(--cdxW) * 0.0515 - 64px); position: relative; min-height: var(--cdxHeroH); display: flex; align-items: flex-start; /* copy rides high, near the promo bar */ padding: 44px 24px 40px !important; overflow: hidden; background: /* left scrim so the headline stays readable over the molecular art */ linear-gradient(90deg,#050c09 0%, rgba(5,12,9,.97) 18%, rgba(5,12,9,.88) 34%, rgba(5,12,9,.48) 48%, rgba(5,12,9,0) 64%), /* soften the top edge where the artwork is cropped */ linear-gradient(180deg,#050c09 0%, rgba(5,12,9,0) 8%), /* bottom-anchored, pushed 64px down and --cdxShift to the left */ url(https://codexresearch.shop/wp-content/uploads/2026/08/ChatGPT-Image-Aug-21-2026-11_02_57-AM.webp) var(--cdxShift) calc(100% + 64px) / var(--cdxW) auto no-repeat, #050c09 !important; border-bottom: 1px solid rgba(43,255,126,.18) !important; } body.home section.hero .hero-grid{ width:100%; position:relative; z-index:4; } /* retire the old baked-in trio image (keeps its grid column) */ body.home section.hero .vials-photo{ visibility:hidden !important; } /* --- Type: light on dark ------------------------------------------- */ body.home section.hero .trust-badge{ color:#eafff0 !important; } body.home section.hero h1{ color:#ffffff !important; font-size:clamp(36px,3.3vw,62px) !important; } body.home section.hero h1 span{ color:#2bff7e !important; } body.home section.hero p{ color:#cfe6da !important; } body.home section.hero .mini-stat{ color:#8fae9d !important; } body.home section.hero .mini-stat b{ color:#ffffff !important; } /* --- The vial stage -------------------------------------------------- */ body.home section.hero .mobile-podium-vials{ display: block !important; position: absolute; left: 0; right: 0; top: 0; height: 100%; width: auto; max-width: none; transform: none; pointer-events: none; z-index: 3; } body.home section.hero .pv-vial{ position: absolute; bottom: var(--cdxStand); /* the PNGs carry ~6% transparent padding under the vial; this puts the glass, not the bounding box, on the podium surface */ transform: translate(-50%, 6%) !important; filter: drop-shadow(0 16px 20px rgba(0,0,0,.6)) contrast(1.12) saturate(.97); animation: none !important; /* dead still — no float, no bob */ } body.home section.hero .pv-center{ left: calc(var(--cdxW) * 0.49 + var(--cdxShift)); width: var(--cdxVial); z-index: 3; } body.home section.hero .pv-back-left{ left: calc(var(--cdxW) * 0.49 + var(--cdxShift) - var(--cdxVial) * 0.335); bottom: calc(var(--cdxStand) + var(--cdxVial) * 0.055); width: calc(var(--cdxVial) * 0.84); z-index: 2; } body.home section.hero .pv-back-right{ left: calc(var(--cdxW) * 0.49 + var(--cdxShift) + var(--cdxVial) * 0.335); bottom: calc(var(--cdxStand) + var(--cdxVial) * 0.055); width: calc(var(--cdxVial) * 0.84); z-index: 2; } } /* -------------------------------------------------------------------------- TUNING CHEAT-SHEET move everything left / right ........ 0.022 -> raise / lower podium bigger / smaller ............. 150vw -> raise / lower vials bigger / smaller .............. 0.90 -> raise / lower (above ~0.93 the caps start clipping the top edge at this hero height) vials further forward / back ........ 0.0515 -> lower / raise artwork further down / up ........... 64px -> raise / lower (BOTH places) vials further apart / closer ........ 0.335 -> raise / lower copy higher / lower ................. 44px -> lower / raise hero taller / shorter ............... 31vw / 560px floor -------------------------------------------------------------------------- */ /* ========================================================================== Codex - DESKTOP hero (>=901px): CTA pills + green marquee section break ========================================================================== */ @media (min-width:901px){ /* CTA pills, directly under the mini-stats row */ html body .hero .mobile-hero-cta{ display:flex !important; align-items:center; gap:14px; margin-top:30px; } html body .hero .mobile-hero-cta a{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 30px; border-radius:9999px; font-family:'Archivo',sans-serif; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } html body .hero .mobile-hero-cta .mh-shop{ background:#2EF96B; border:1px solid #2EF96B; color:#07100c; box-shadow:0 8px 24px rgba(46,249,107,.22); } html body .hero .mobile-hero-cta .mh-shop:hover{ background:#4DFF85; border-color:#4DFF85; transform:translateY(-2px); box-shadow:0 12px 30px rgba(46,249,107,.34); } html body .hero .mobile-hero-cta .mh-coa{ background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; } html body .hero .mobile-hero-cta .mh-coa:hover{ border-color:#2EF96B; color:#2EF96B; transform:translateY(-2px); } html body .hero .mobile-hero-cta img.emoji{width:16px;height:16px;} /* green marquee acts as the section break at the bottom of the hero */ html body main .content-area > .cdx-hbar{ display:block !important; width:100%; margin:0 !important; } } /* Codex - DESKTOP hero: a little more vertical room (>=901px). Adds height on top of --cdxHeroH so the podium artwork and the vials, which are both anchored to the hero's bottom edge, keep their scale. */ @media (min-width:901px){ html body.home section.hero{ min-height:calc(var(--cdxHeroH) + 64px) !important; } } /* Codex - DESKTOP hero: larger left-hand copy (>=901px). The right grid column only reserves space - .vials-photo is visibility:hidden on desktop and the real vials are the absolutely-positioned .pv-* images - so widening the left column costs nothing and keeps the headline on one line. h1 is capped at 63px: past that "Research Peptides." outruns the 1200px content container on very wide screens and wraps. */ @media (min-width:901px){ html body.home section.hero .hero-grid{ grid-template-columns:1.35fr 0.65fr !important; } html body.home section.hero h1{ font-size:clamp(40px,3.75vw,63px) !important; } html body.home section.hero p{ font-size:19px !important; line-height:1.55 !important; max-width:600px !important; } html body.home section.hero .trust-badge{ font-size:15px !important; } html body.home section.hero .trust-badge .stars{ font-size:16px !important; } html body.home section.hero .mini-stats{ gap:34px !important; margin-top:38px !important; } html body.home section.hero .mini-stat{ font-size:13.5px !important; } html body.home section.hero .mini-stat b{ font-size:15px !important; } html body.home section.hero .mobile-hero-cta a{ font-size:15px !important; padding:17px 34px !important; } } /* Codex - DESKTOP hero: lift the background out of flat black (>=901px). The v6 scrim was near-opaque across the left 48%, which killed the molecular artwork behind the headline - it read as dead black once the hero got taller. Same four layers, softer scrim, plus a wide low-opacity green radial so the copy side has some ambience instead of being flat. To go darker again raise the four rgba stops in the 90deg gradient; to go brighter, lower them. */ @media (min-width:901px){ html body.home section.hero{ background: /* left scrim - softer, and fully clear by 68% instead of 64% */ linear-gradient(90deg, rgba(5,12,9,.51) 0%, rgba(5,12,9,.45) 16%, rgba(5,12,9,.31) 34%, rgba(5,12,9,.11) 50%, rgba(5,12,9,0) 68%), /* ambient green wash behind the copy */ radial-gradient(130% 110% at 20% 34%, rgba(46,249,107,.17) 0%, rgba(46,249,107,.07) 34%, rgba(46,249,107,0) 62%), /* unchanged: bottom-anchored artwork, pushed 64px down and --cdxShift left */ url(https://codexresearch.shop/wp-content/uploads/2026/08/ChatGPT-Image-Aug-21-2026-11_02_57-AM.webp) var(--cdxShift) calc(100% + 64px) / var(--cdxW) auto no-repeat, #050c09 !important; } } /* Codex - DESKTOP hero: mini-stat icons + "Transparency you can trust" COA card. The markup for both lives in the homepage [ux_html] block. Everything here is >=901px only - the mobile hero and the green trust marquee are untouched. Below 1280px the podium artwork (150vw) leaves too little clear space beside it, so the card and the icons drop out and the stats fall back to the old compact row. That is deliberate, not a missing style. */ @media (max-width:900px){ html body .hero .hero-coa-card{ display:none !important; } } @media (min-width:901px){ html body.home section.hero .mini-stats{ gap:clamp(20px,2.6vw,42px) !important; } html body.home section.hero .mini-stat{ display:flex !important; align-items:flex-start; gap:10px; font-size:clamp(12px,.95vw,14px) !important; } html body.home section.hero .mini-stat .ms-ic{ flex:0 0 auto; width:clamp(19px,1.5vw,23px); height:clamp(19px,1.5vw,23px); color:#2EF96B; margin-top:2px; } html body.home section.hero .mini-stat .ms-ic svg{ display:block; width:100%; height:100%; } html body.home section.hero .mini-stat b{ text-transform:uppercase; letter-spacing:.045em; font-size:clamp(12.5px,1.02vw,14.5px) !important; margin-bottom:2px; white-space:nowrap; } html body.home section.hero .hero-coa-card{ display:flex; align-items:center; gap:clamp(14px,1.4vw,20px); margin-top:26px; max-width:clamp(500px,42vw,600px); padding:clamp(13px,1.1vw,16px) clamp(16px,1.5vw,22px); border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06); } html body.home section.hero .hcc-shield{ flex:0 0 auto; width:clamp(36px,3vw,44px); } html body.home section.hero .hcc-shield svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 0 12px rgba(46,249,107,.4)); } html body.home section.hero .hcc-tx{ flex:1 1 auto; min-width:0; } html body.home section.hero .hcc-tx b{ display:block; font-family:'Archivo',sans-serif; color:#2EF96B; text-transform:uppercase; font-weight:800; font-size:clamp(13px,1.05vw,15px); letter-spacing:.05em; margin-bottom:5px; } html body.home section.hero .hcc-tx span{ display:block; color:#dbe7df; font-size:clamp(12.5px,1vw,14.5px); line-height:1.45; } html body.home section.hero .hcc-qr{ flex:0 0 auto; width:clamp(72px,6vw,92px); display:block; transition:transform .18s ease; } html body.home section.hero .hcc-qr svg{ display:block; width:100%; height:auto; } html body.home section.hero .hcc-qr:hover{ transform:scale(1.045); } } @media (min-width:901px) and (max-width:1279px){ html body.home section.hero .hero-coa-card{ display:none !important; } html body.home section.hero .mini-stat .ms-ic{ display:none !important; } html body.home section.hero .mini-stats{ gap:24px !important; } html body.home section.hero .mini-stat b{ font-size:12.5px !important; } html body.home section.hero .mini-stat{ font-size:12px !important; } } /* the mini-stat icons only make sense in the >=1280px layout - below that (tablet included) they would render as unstyled inline SVGs. */ @media (max-width:1279px){ html body .hero .mini-stat .ms-ic{ display:none !important; } } /* Codex - hero mini-stat icons: match the mockup weight, size and alignment. Only applies where the icons are actually shown (>=1280px). */ @media (min-width:1280px){ html body.home section.hero .mini-stat{ align-items:center !important; gap:12px !important; font-size:clamp(12.5px,1vw,15px) !important; } html body.home section.hero .mini-stat .ms-ic{ width:clamp(23px,1.85vw,28px) !important; height:clamp(23px,1.85vw,28px) !important; margin-top:0 !important; } html body.home section.hero .mini-stat b{ font-size:clamp(13px,1.05vw,15.5px) !important; } } /* Codex - DESKTOP hero: nudge the podium + vials right, and tighten the vertical rhythm so the section is shorter (>=901px). --cdxShift moves the background artwork and the .pv-* vials together so they never come apart; -0.022 -> -0.008 of --cdxW is about +33px at 1550px wide and scales with the viewport. The height is taken out of the internal spacing, NOT out of --cdxHeroH: --cdxVial is derived from that variable, so lowering it would shrink the vials along with the section. This supersedes the earlier +64px min-height. */ @media (min-width:901px){ html body.home section.hero{ --cdxShift: calc(var(--cdxW) * -0.008) !important; min-height: var(--cdxHeroH) !important; padding-top: 32px !important; padding-bottom: 32px !important; } html body.home section.hero p{ margin-top:14px !important; } html body.home section.hero .mini-stats{ margin-top:26px !important; } html body.home section.hero .mobile-hero-cta{ margin-top:22px !important; } html body.home section.hero .hero-coa-card{ margin-top:18px !important; } } /* Codex - DESKTOP hero: second pass on the height, ~40px tighter again. Still taken out of padding and the gaps between blocks, so --cdxHeroH and therefore the vial size are untouched. Below ~1280px the min-height floor (560px) is what sets the height, so this has no effect there. */ @media (min-width:901px){ html body.home section.hero{ padding-top:22px !important; padding-bottom:22px !important; } html body.home section.hero .mini-stats{ margin-top:18px !important; } html body.home section.hero .mobile-hero-cta{ margin-top:16px !important; } html body.home section.hero .hero-coa-card{ margin-top:12px !important; } } /* Codex - hero COA card: scaled down so it clears the podium glow. It was 600px wide and its right edge sat on the bright ring arc of the artwork. 480px max keeps the whole card on the dark part of the background. The QR is only trimmed 92 -> 84px: shrinking it further drops the module size low enough to hurt scanning, so the width came out of the padding, shield and type instead. Card only renders >=1280px. */ @media (min-width:1280px){ html body.home section.hero .hero-coa-card{ max-width:clamp(420px,33vw,480px) !important; padding:clamp(11px,.9vw,14px) clamp(14px,1.2vw,18px) !important; gap:clamp(12px,1.1vw,16px) !important; border-radius:18px !important; } html body.home section.hero .hcc-shield{ width:clamp(30px,2.4vw,36px) !important; } html body.home section.hero .hcc-tx b{ font-size:clamp(12px,.9vw,13.5px) !important; margin-bottom:3px !important; } html body.home section.hero .hcc-tx span{ font-size:clamp(11.5px,.86vw,13px) !important; line-height:1.4 !important; } html body.home section.hero .hcc-qr{ width:clamp(66px,5.4vw,84px) !important; } } /* Codex - hero subhead on one line. At 19px the sentence measures 607px and the wrap cap was 600px, so "shipped." was dropping to a second line over a 7px shortfall. 660px clears it with headroom for font-rendering variance, and still sits inside the 783px column. Below ~1000px the column is narrower than the sentence, so it wraps again there by design. */ @media (min-width:901px){ html body.home section.hero p{ max-width:660px !important; } } /* Codex - hero copy pushed left. The 1200px grid was centred, which on a 1900px screen parked the copy ~350px in and left a big dead strip on the left while the podium sat right. Left-anchoring the grid and insetting the section by 8vw scales the margin with the viewport (82px at 1024 up to 154px at 1920) instead of ballooning, and the clamp stops it running away on ultrawide. The vials are positioned against the hero, not the grid, so they do not move. */ @media (min-width:901px){ html body.home section.hero{ padding-left:clamp(24px,8vw,200px) !important; } html body.home section.hero .hero-grid{ margin-left:0 !important; margin-right:auto !important; } } /* Codex - Top Picks on desktop (>=1025px): four large cards per view. The section was built as a 200px-wide mobile scroller and reused as-is on desktop. Cards are now sized to exactly quarter the 1280px track, so a page is one screenful and the arrows step a whole page (see #cdxTpPager in the homepage block) instead of nudging 320px. Blurb and COA row are markup in the homepage block, hidden below 1025px so the mobile card is unchanged. */ @media (max-width:1024px){ html body .tp-blurb, html body .tp-coa{ display:none !important; } } @media (min-width:1025px){ html body .tp-track{ gap:22px !important; } html body .tp-card{ flex:0 0 calc((100% - 66px)/4) !important; width:auto !important; padding:20px 18px 22px !important; border-radius:16px !important; } html body .tp-imgwrap{ height:216px !important; margin-bottom:16px !important; } html body .tp-imgwrap img{ max-height:192px !important; max-width:88% !important; } html body .tp-kicker{ font-size:10.5px !important; } html body .tp-name{ font-size:21px !important; margin-bottom:4px !important; } html body .tp-cat{ font-size:12px !important; margin-bottom:8px !important; } html body .tp-blurb{ display:block; margin:0 0 11px; font-size:12.5px; line-height:1.45; color:#5f665e; font-family:'Archivo',sans-serif; } html body .tp-badge{ font-size:9px !important; padding:4px 8px !important; } html body .tp-coa{ display:flex; align-items:center; gap:6px; margin:2px 0 0; padding:8px 10px; border-radius:9px; background:rgba(15,143,86,.07); border:1px solid rgba(15,143,86,.2); color:#0f8f56; font-size:11px; font-weight:700; text-decoration:none; font-family:'Archivo',sans-serif; transition:background .18s ease, border-color .18s ease; } html body .tp-coa svg{ width:13px; height:13px; flex:0 0 auto; } html body a.tp-coa:hover{ background:rgba(15,143,86,.14); border-color:rgba(15,143,86,.4); } html body .tp-coa.is-pending{ color:#8a8f89; background:rgba(10,10,10,.05); border-color:rgba(10,10,10,.12); } html body .tp-stats{ margin:12px 0 12px !important; } html body .tp-stat-top{ font-size:14px !important; } } /* == TP DESKTOP REFINEMENTS v1 == */ @media (min-width:1025px){ html body .tp-blurb{ text-align:center !important; margin:0 auto 10px !important; max-width:95%; text-wrap:balance; } html body .tp-badges{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center; gap:4px !important; margin-bottom:10px !important; } html body .tp-badges .tp-break{ display:none !important; } html body .tp-badges .tp-badge{ flex:0 0 auto; gap:0 !important; padding:4px 6px !important; font-size:0 !important; line-height:1; } html body .tp-badges .tp-badge::after{ font-size:8px; font-weight:700; line-height:1; letter-spacing:.03em; white-space:nowrap; } html body .tp-badges .tp-badge:nth-child(1)::after{ content:"\2713\0020 CONTAMINANT"; } html body .tp-badges .tp-badge:nth-child(2)::after{ content:"\2713\0020 ENDOTOXIN"; } html body .tp-badges .tp-badge:last-child::after{ content:"\2713\0020 HPLC"; } html body .tp-coa{ display:flex !important; justify-content:center; align-items:center; gap:5px !important; margin:0 0 2px !important; padding:0 !important; background:none !important; border:none !important; border-radius:0 !important; color:#9aa09a !important; font-size:10.5px !important; font-weight:600 !important; letter-spacing:.005em; transition:color .18s ease; } html body .tp-coa svg{ width:11px !important; height:11px !important; opacity:.6; transition:opacity .18s ease; } html body a.tp-coa:hover{ background:none !important; border:none !important; color:#1FA876 !important; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } html body a.tp-coa:hover svg{ opacity:1; } html body .tp-coa.is-pending{ background:none !important; border:none !important; color:#b7bbb6 !important; font-style:italic; } html body a.tp-coa.is-pending:hover{ color:#b7bbb6 !important; text-decoration:none; } html body .tp-actions .tp-btn.tp-btn-cart{ background:#1FA876 !important; color:#ffffff !important; } html body .tp-actions .tp-btn.tp-btn-cart:hover{ filter:brightness(1.08); } } @media (min-width:1360px){ html body .tp-badges{ gap:5px !important; } html body .tp-badges .tp-badge{ padding:4px 8px !important; } html body .tp-badges .tp-badge::after{ font-size:9px; } html body .tp-coa{ font-size:11px !important; } } /* == TP badge tighten narrow-desktop == */ @media (min-width:1025px) and (max-width:1200px){ html body .tp-badges{ gap:3px !important; } html body .tp-badges .tp-badge{ padding:4px 5px !important; } html body .tp-badges .tp-badge::after{ font-size:7.5px; letter-spacing:.02em; } } /* == TP COA view-link == */ @media (min-width:1025px){ html body .tp-coa > svg{ display:none !important; } html body .tp-coa > span{ display:none !important; } html body .tp-coa::before{ content:"View COA"; font-weight:600; letter-spacing:.01em; } html body .tp-coa::after{ content:"\2192"; font-size:12px; line-height:1; display:inline-block; transition:transform .18s ease; } html body a.tp-coa{ text-decoration:none !important; } html body a.tp-coa:hover{ text-decoration:none !important; } html body a.tp-coa:hover::before{ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } html body a.tp-coa:hover::after{ transform:translateX(3px); } html body .tp-coa.is-pending::before{ content:"COA in testing"; } html body .tp-coa.is-pending::after{ content:"" !important; display:none !important; } html body a.tp-coa.is-pending:hover::before{ text-decoration:none; } } /* == TP condense card footer == */ @media (min-width:1025px){ html body .tp-coa{ margin:0 0 1px !important; } html body .tp-stats{ margin:8px 0 9px !important; padding-top:9px !important; } html body .tp-stat{ gap:2px !important; } html body .tp-stat-top{ font-size:13px !important; line-height:1.15 !important; } html body .tp-stat-label{ line-height:1 !important; } html body .tp-price-d{ line-height:1.1 !important; } html body .tp-price-c{ line-height:1.1 !important; } html body .tp-actions .tp-btn{ padding-top:9px !important; padding-bottom:9px !important; } html body .tp-card{ padding-bottom:18px !important; } } /* == TP head-to-track gap == */ @media (min-width:1025px){ html body .tp-section .tp-head{ margin-bottom:16px !important; } } /* == TP viewall + arrows as grey pills == */ @media (min-width:1025px){ html body .tp-section .tp-viewall{ display:inline-flex !important; align-items:center; justify-content:center; height:44px !important; padding:0 22px !important; background:rgba(10,10,10,.055) !important; border:1px solid rgba(10,10,10,.10) !important; border-radius:999px !important; color:#12261C !important; transition:background .18s ease, border-color .18s ease, color .18s ease; } html body .tp-section a.tp-viewall:hover{ background:rgba(31,168,118,.10) !important; border-color:rgba(31,168,118,.35) !important; color:#1FA876 !important; } html body .tp-section .tp-arrow{ width:44px !important; height:44px !important; min-height:44px !important; max-height:44px !important; min-width:44px !important; margin-bottom:0 !important; padding:0 !important; background:rgba(10,10,10,.055) !important; border:1px solid rgba(10,10,10,.10) !important; border-radius:50% !important; color:#12261C !important; line-height:1 !important; font-size:20px !important; align-items:center; justify-content:center; transition:background .18s ease, border-color .18s ease, color .18s ease; } html body .tp-section .tp-arrow:hover:not([disabled]){ background:rgba(31,168,118,.10) !important; border-color:rgba(31,168,118,.35) !important; color:#1FA876 !important; } html body .tp-section .tp-arrow[disabled]{ opacity:.4; cursor:default; } } /* == TP viewall + arrows grey pills (tablet) == */ @media (min-width:701px) and (max-width:1024px){ html body .tp-section .tp-viewall{ display:inline-flex !important; align-items:center; justify-content:center; height:40px !important; min-height:40px !important; padding:0 18px !important; background:rgba(10,10,10,.055) !important; border:1px solid rgba(10,10,10,.10) !important; border-radius:999px !important; color:#12261C !important; } html body .tp-section a.tp-viewall:hover{ background:rgba(31,168,118,.10) !important; border-color:rgba(31,168,118,.35) !important; color:#1FA876 !important; } html body .tp-section .tp-arrow{ width:40px !important; height:40px !important; min-height:40px !important; max-height:40px !important; min-width:40px !important; margin-bottom:0 !important; padding:0 !important; background:rgba(10,10,10,.055) !important; border:1px solid rgba(10,10,10,.10) !important; border-radius:50% !important; color:#12261C !important; line-height:1 !important; font-size:18px !important; align-items:center; justify-content:center; } html body .tp-section .tp-arrow:hover:not([disabled]){ background:rgba(31,168,118,.10) !important; border-color:rgba(31,168,118,.35) !important; color:#1FA876 !important; } html body .tp-section .tp-arrow[disabled]{ opacity:.4; cursor:default; } } /* == QB standalone: shorten + fix photo ratio == */ @media (min-width:1025px){ html body .qb-standalone{ padding-bottom:48px !important; } html body .qb-standalone .qb-panel{ margin-top:28px !important; padding:24px 32px !important; } html body .qb-standalone .qb-left{ gap:14px !important; } html body .qb-standalone .qb-avg-header{ margin-bottom:10px !important; } html body .qb-standalone .qb-coa-preview{ flex-direction:row !important; align-items:flex-start !important; width:100% !important; max-width:100% !important; margin:6px 0 0 !important; gap:14px !important; padding:0 !important; } html body .qb-standalone .qb-coa-preview > div{ flex:1 1 0 !important; max-width:none !important; min-width:0 !important; } html body .qb-standalone .qb-coa-preview img{ width:100% !important; height:auto !important; display:block; } html body .qb-standalone .qb-stats{ padding-top:12px !important; } } /* == QB standalone: tighten pass 2 == */ @media (min-width:1025px){ html body .qb-standalone{ padding-bottom:40px !important; } html body .qb-standalone .qb-panel{ padding:20px 30px !important; } html body .qb-standalone .qb-left{ gap:12px !important; } html body .qb-standalone .qb-coa-preview{ max-width:640px !important; margin:4px auto 0 !important; } html body .qb-standalone .qb-avg-title{ font-size:36px !important; line-height:1.15 !important; } html body .qb-standalone .qb-chart{ padding:12px 14px 10px !important; } html body .qb-standalone .qb-linechart{ height:76px !important; } html body .qb-standalone .qb-stats{ padding-top:8px !important; } } /* == QB codex standard: drop photo, mobile-style tiles == */ @media (min-width:1025px){ html body .qb-standalone .qb-info::before{ display:none !important; } html body .qb-standalone .qb-info{ min-height:0 !important; } html body .qb-standalone .qb-info-text{ max-width:420px !important; } html body .qb-standalone .qb-checklist{ grid-template-columns:1fr !important; gap:26px !important; margin:0 0 22px !important; } html body .qb-standalone .qb-tile{ background-color:transparent !important; background-image:linear-gradient(135deg, rgba(46,249,107,.16), rgba(46,249,107,.03)) !important; border:1px solid rgba(10,10,10,.05) !important; border-radius:14px !important; padding:16px !important; box-shadow:rgba(10,10,10,.18) 0px 6px 16px -8px !important; } html body .qb-standalone .qb-acc-row{ gap:10px !important; align-items:flex-start !important; } html body .qb-standalone .qb-tile-icon{ width:40px !important; height:40px !important; flex:0 0 auto !important; border-radius:10px !important; background-color:transparent !important; background-image:linear-gradient(135deg, rgb(46,249,107), rgb(24,154,99)) !important; box-shadow:rgba(24,154,99,.55) 0px 6px 12px -4px !important; color:#ffffff !important; } html body .qb-standalone .qb-tile-icon svg{ color:#ffffff !important; width:20px !important; height:20px !important; } html body .qb-standalone .qb-tile-title{ font-size:15px !important; line-height:19.5px !important; } html body .qb-standalone .qb-tile-desc{ font-size:13px !important; line-height:18.2px !important; } html body .qb-standalone .qb-acc-toggle{ margin-top:12px !important; gap:10px !important; } } /* == QB standalone: remove section texture == */ @media (min-width:1025px){ html body .qb-standalone{ background-image:none !important; } } /* == QB codex standard: center block == */ @media (min-width:1025px){ html body .qb-standalone .qb-info{ justify-content:center !important; } html body .qb-standalone .qb-info-text{ margin-left:auto !important; margin-right:auto !important; } html body .qb-standalone .qb-heading{ text-align:center !important; } html body .qb-standalone .qb-desc{ text-align:center !important; } html body .qb-standalone .qb-checklist{ justify-items:center !important; } } /* == QB COA carousel == */ @media (min-width:1025px){ html body .qb-standalone .qb-coa-preview{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:16px !important; width:100% !important; max-width:470px !important; margin:4px auto 0 !important; padding:0 !important; } html body .qb-standalone .qb-coa-preview > .qb-coa-stage{ flex:0 1 330px !important; max-width:330px !important; min-width:0 !important; } html body .qb-standalone .qb-coa-img{ width:100% !important; height:auto !important; display:block; border-radius:10px; transition:opacity .16s ease; } html body .qb-standalone .qb-coa-preview > .qb-coa-nav{ flex:0 0 44px !important; width:44px !important; height:44px !important; min-height:44px !important; padding:0 !important; border-radius:50% !important; background:rgba(10,10,10,.055) !important; border:1px solid rgba(10,10,10,.10) !important; color:#12261C !important; font-size:20px !important; line-height:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer; font-family:inherit; transition:background .18s ease, border-color .18s ease, color .18s ease; } html body .qb-standalone .qb-coa-nav:hover{ background:rgba(31,168,118,.10) !important; border-color:rgba(31,168,118,.35) !important; color:#1FA876 !important; } html body .qb-standalone .qb-coa-meta{ display:flex !important; flex-direction:column; align-items:center; gap:2px; margin:12px 0 0 !important; text-align:center; font-family:'Archivo',sans-serif; } html body .qb-standalone .qb-coa-name{ font-size:13px; font-weight:800; color:#101410; } html body .qb-standalone .qb-coa-lot{ font-size:11px; font-weight:600; color:#8a8f89; } html body .qb-standalone .qb-coa-count{ font-size:10.5px; font-weight:700; letter-spacing:.05em; color:#9aa09a; } html body .qb-standalone .qb-linechart{ display:none !important; } html body .qb-standalone .qb-chart-topline{ justify-content:center !important; margin-bottom:6px; } html body .qb-standalone .qb-endo-status{ font-size:19px !important; line-height:1.15 !important; } } /* == QB column rebalance == */ @media (min-width:1025px){ html body .qb-standalone .qb-panel > .qb-info{ flex:1 1 0% !important; } html body .qb-standalone .qb-panel > .qb-left{ flex:1 1 0% !important; } html body .qb-standalone .qb-info-text{ max-width:520px !important; } html body .qb-standalone .qb-charts{ gap:16px !important; } html body .qb-standalone .qb-stats{ gap:12px !important; } } /* == QB chart card polish == */ @media (min-width:1025px){ html body .qb-standalone .qb-endo-status{ font-size:16px !important; line-height:1.2 !important; white-space:nowrap; } html body .qb-standalone .qb-endo-spec{ font-size:10px !important; } html body .qb-standalone .qb-chart-foot{ font-size:9.5px !important; gap:6px !important; } html body .qb-standalone .qb-chart-foot span{ font-size:9.5px !important; white-space:nowrap; } html body .qb-standalone .qb-chart-label{ font-size:9.5px !important; } html body .qb-standalone .qb-chart-value{ font-size:26px !important; } } /* ===== Codex Standard / Test Results — desktop alignment (added) ===== */ @media (min-width: 1025px){ /* headline + intro copy */ html body .qb-standalone .qb-info{ padding-top:0 !important; } html body .qb-standalone .qb-desc{ margin-left:auto !important; margin-right:auto !important; } html body .qb-standalone .qb-checklist{ gap:38px !important; } /* right column */ html body .qb-standalone .qb-left{ gap:14px !important; } html body .qb-standalone .qb-coa-preview{ margin:0 auto !important; } html body .qb-standalone .qb-coa-preview > .qb-coa-stage{ flex:0 1 auto !important; max-width:none !important; width:auto !important; margin:0 auto !important; } html body .qb-standalone .qb-coa-preview img{ max-height:536px !important; width:auto !important; height:auto !important; margin:0 auto !important; } /* hide lot / COA number line under the COA image */ html body .qb-standalone .qb-coa-meta{ display:none !important; } /* compact purity / contaminant / endotoxin cards */ html body .qb-standalone .qb-chart{ padding:10px 12px 8px !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; } html body .qb-standalone .qb-chart-value{ font-size:21px !important; line-height:1.3 !important; } html body .qb-standalone .qb-chart-topline{ margin:2px 0 4px !important; } html body .qb-standalone .qb-endo{ padding:2px 0 !important; margin-top:6px !important; gap:2px !important; } html body .qb-standalone .qb-endo-badge{ width:30px !important; height:30px !important; margin-bottom:0 !important; } html body .qb-standalone .qb-endo-badge svg{ width:16px !important; height:16px !important; } html body .qb-standalone .qb-chart-foot{ margin-top:6px !important; } /* hide the four trust stats (vials tested / lots / COAs / turnaround) */ html body .qb-standalone .qb-stats{ display:none !important; } /* pin VIEW COAS to the bottom so it lines up with VIEW ABOUT US */ html body .qb-standalone .qb-left > .qb-cta-left{ margin-top:auto !important; } } /* VIEW ABOUT US button is desktop-only */ @media (max-width: 1024px){ html body .qb-standalone .qb-cta-about{ display:none !important; } } /* remove the card/box around the section (all breakpoints) */ html body .qb-standalone .qb-panel{ background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-radius:0 !important; } /* ===== end ===== */ /* Codex - DESKTOP hero: a little taller so the marquee sits lower (901px+). Height comes from min-height only, so --cdxVial and the vials keep their size. */ @media (min-width:901px){ html body.home section.hero{ min-height: calc(var(--cdxHeroH) + 70px) !important; } } /* Codex - DESKTOP: scale the vial cluster up to fill the taller hero (901px+). Offsets in .pv-* are derived from --cdxVial, so the group scales together. */ @media (min-width:901px){ html body.home section.hero{ --cdxVial: calc(var(--cdxHeroH) * 0.97) !important; } } /* Codex - DESKTOP: rebalance the left copy for the 630px hero (901px+). Type and vertical rhythm scale with the section; p stays on one line. */ @media (min-width:901px){ html body.home section.hero h1{ font-size:clamp(42px,3.9vw,65px)!important; } html body.home section.hero p{ font-size:19px!important; max-width:660px!important; margin-top:18px!important; } html body.home section.hero .trust-badge{ font-size:15.5px!important; } html body.home section.hero .trust-badge .stars{ font-size:16.5px!important; } html body.home section.hero .mini-stats{ gap:34px!important; margin-top:46px!important; } html body.home section.hero .mini-stat{ font-size:14px!important; } html body.home section.hero .mini-stat b{ font-size:15.5px!important; } html body.home section.hero .mobile-hero-cta{ margin-top:42px!important; } html body.home section.hero .mobile-hero-cta a{ font-size:15.5px!important; padding:18px 36px!important; } } /* Codex - homepage motion, all breakpoints. Nothing here hides content permanently: every animation is a load-time entrance or a hover state, and the whole block is skipped when the visitor prefers reduced motion. */ @media (prefers-reduced-motion: no-preference){ @keyframes cdxHeroRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } } @keyframes cdxHeroFade{ from{ opacity:0; } to{ opacity:1; } } html body.home section.hero .trust-badge { animation:cdxHeroRise .65s cubic-bezier(.22,.61,.36,1) both .05s; } html body.home section.hero h1 { animation:cdxHeroRise .70s cubic-bezier(.22,.61,.36,1) both .14s; } html body.home section.hero p { animation:cdxHeroRise .70s cubic-bezier(.22,.61,.36,1) both .24s; } html body.home section.hero .mini-stats { animation:cdxHeroRise .70s cubic-bezier(.22,.61,.36,1) both .34s; } html body.home section.hero .mobile-hero-cta { animation:cdxHeroRise .70s cubic-bezier(.22,.61,.36,1) both .44s; } /* the vials carry positioning transforms, so they fade only */ html body.home section.hero .pv-center { animation:cdxHeroFade .9s ease both .18s; } html body.home section.hero .pv-back-left, html body.home section.hero .pv-back-right { animation:cdxHeroFade .9s ease both .34s; } /* hover polish */ html body.home section.hero .mobile-hero-cta a{ transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; } html body.home section.hero .mobile-hero-cta a:hover{ transform:translateY(-2px); } html body.home .tp-card{ transition:transform .25s ease, box-shadow .25s ease; } html body.home .tp-card:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(0,0,0,.14); } } /* Codex - homepage scroll reveal, all breakpoints. The .cdx-rv classes are added by JS (child theme footer script), so with JS off nothing is ever hidden. Clean opacity fade with a short rise - no blur, no scale. */ @media (prefers-reduced-motion: no-preference){ html body.home .cdx-rv{ opacity:0; transform:translateY(26px); transition:opacity 1.6s cubic-bezier(.22,.61,.36,1), transform 1.6s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; } html body.home .cdx-rv-fade{ transform:none; } /* items with their own hover transform */ html body.home .cdx-rv.cdx-in{ opacity:1; transform:none; } } /* Codex - MOBILE membership vials: same layout as desktop (spread across the full width, desktop sizes scaled up 1.55x for the narrower screen, desktop drift speeds and opacities). n15-n20 are hidden on desktop, so they are hidden here too. Travel keyframe stays cdxRiseM - the section is taller on mobile. */ @media (max-width:760px){ html body.home .cdx-mem-vial.n1{ width:19.39vw; height:19.39vw; left:1.946vw; animation-duration:34s; animation-delay:0s; --op:0.95; --dx:0.25vw; --r0:-15.5deg; --r1:-10.5deg; } html body.home .cdx-mem-vial.n2{ width:15.18vw; height:15.18vw; left:3.303vw; animation-duration:34s; animation-delay:-17s; --op:0.72; --dx:-0.25vw; --r0:-3.5deg; --r1:-8.5deg; } html body.home .cdx-mem-vial.n3{ width:13.90vw; height:13.90vw; left:16.683vw; animation-duration:27s; animation-delay:-0.7s; --op:0.8; --dx:0.25vw; --r0:12.5deg; --r1:17.5deg; } html body.home .cdx-mem-vial.n4{ width:17.38vw; height:17.38vw; left:26.958vw; animation-duration:31s; animation-delay:-1.4s; --op:0.52; --dx:-0.25vw; --r0:2.5deg; --r1:-2.5deg; } html body.home .cdx-mem-vial.n5{ width:12.80vw; height:12.80vw; left:28.433vw; animation-duration:31s; animation-delay:-16.9s; --op:0.44; --dx:0.25vw; --r0:6.5deg; --r1:11.5deg; } html body.home .cdx-mem-vial.n6{ width:14.81vw; height:14.81vw; left:39.189vw; animation-duration:25s; animation-delay:-2.1s; --op:0.58; --dx:-0.25vw; --r0:-6.5deg; --r1:-11.5deg; } html body.home .cdx-mem-vial.n7{ width:12.25vw; height:12.25vw; left:40.015vw; animation-duration:25s; animation-delay:-14.6s; --op:0.42; --dx:0.25vw; --r0:1.5deg; --r1:6.5deg; } html body.home .cdx-mem-vial.n8{ width:18.29vw; height:18.29vw; left:50.55vw; animation-duration:36s; animation-delay:-2.8s; --op:0.55; --dx:-0.25vw; --r0:13.5deg; --r1:8.5deg; } html body.home .cdx-mem-vial.n9{ width:14.08vw; height:14.08vw; left:51.907vw; animation-duration:36s; animation-delay:-20.8s; --op:0.45; --dx:0.25vw; --r0:-2.5deg; --r1:2.5deg; } html body.home .cdx-mem-vial.n10{ width:12.62vw; height:12.62vw; left:64.45vw; animation-duration:22s; animation-delay:-3.5s; --op:0.5; --dx:-0.25vw; --r0:-13.5deg; --r1:-18.5deg; } html body.home .cdx-mem-vial.n11{ width:17.01vw; height:17.01vw; left:74.363vw; animation-duration:29s; animation-delay:-4.2s; --op:0.78; --dx:0.25vw; --r0:3.5deg; --r1:8.5deg; } html body.home .cdx-mem-vial.n12{ width:13.53vw; height:13.53vw; left:75.484vw; animation-duration:29s; animation-delay:-18.7s; --op:0.68; --dx:-0.25vw; --r0:-9.5deg; --r1:-14.5deg; } html body.home .cdx-mem-vial.n13{ width:19.02vw; height:19.02vw; left:86.432vw; animation-duration:33s; animation-delay:-4.9s; --op:0.95; --dx:0.25vw; --r0:-6.5deg; --r1:-1.5deg; } html body.home .cdx-mem-vial.n14{ width:14.45vw; height:14.45vw; left:87.907vw; animation-duration:33s; animation-delay:-21.4s; --op:0.7; --dx:-0.25vw; --r0:16.5deg; --r1:11.5deg; } html body.home .cdx-mem-vial.n15, html body.home .cdx-mem-vial.n16, html body.home .cdx-mem-vial.n17, html body.home .cdx-mem-vial.n18, html body.home .cdx-mem-vial.n19, html body.home .cdx-mem-vial.n20{ display:none; } } /* Codex - membership page vials on tablet + phone (under 1025px). The page CSS only shows .cdx-mbv at 1025px and up; this re-creates the desktop layer below that, with the vial widths scaled up so they read the same on a narrower screen. */ @media (min-width:761px) and (max-width:1024px){ html body .cdx-mbv{ display:block; position:fixed; top:0px; right:0px; bottom:0px; left:0px; z-index:0; pointer-events:none; overflow-x:hidden; overflow-y:hidden; } html body .cdx-mbv-v{ position:absolute; bottom:-380px; background-repeat:no-repeat; background-size:contain; background-position-x:center; background-position-y:center; opacity:0; will-change:transform, opacity; animation-name:cdxRiseMb; animation-timing-function:linear; animation-iteration-count:infinite; } html body .cdx-mbv-v.n1{ width:15.01vw; height:15.01vw; left:1.946vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-3-rt__2_-removebg-std.webp"); animation-duration:34s; animation-delay:0s; --op:0.95; --dx:0.25vw; --r0:-15.5deg; --r1:-10.5deg; } html body .cdx-mbv-v.n2{ width:11.75vw; height:11.75vw; left:3.303vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/bpc-157-removebg.webp"); animation-duration:34s; animation-delay:-17s; --op:0.72; --dx:-0.25vw; --r0:-3.5deg; --r1:-8.5deg; } html body .cdx-mbv-v.n3{ width:10.76vw; height:10.76vw; left:16.683vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/tb-500-removebg-1-std.webp"); animation-duration:27s; animation-delay:-0.7s; --op:0.8; --dx:0.25vw; --r0:12.5deg; --r1:17.5deg; } html body .cdx-mbv-v.n4{ width:13.45vw; height:13.45vw; left:26.958vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/ghk-cu-removebg-std.webp"); animation-duration:31s; animation-delay:-1.4s; --op:0.52; --dx:-0.25vw; --r0:2.5deg; --r1:-2.5deg; } html body .cdx-mbv-v.n5{ width:9.91vw; height:9.91vw; left:28.433vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/melanotan-ii__1_-removebg-std.webp"); animation-duration:31s; animation-delay:-16.9s; --op:0.44; --dx:0.25vw; --r0:6.5deg; --r1:11.5deg; } html body .cdx-mbv-v.n6{ width:11.47vw; height:11.47vw; left:39.189vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-2-tz__1_-removebg-std.webp"); animation-duration:25s; animation-delay:-2.1s; --op:0.58; --dx:-0.25vw; --r0:-6.5deg; --r1:-11.5deg; } html body .cdx-mbv-v.n7{ width:9.49vw; height:9.49vw; left:40.015vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-3-rt__2_-removebg-std.webp"); animation-duration:25s; animation-delay:-14.6s; --op:0.42; --dx:0.25vw; --r0:1.5deg; --r1:6.5deg; } html body .cdx-mbv-v.n8{ width:14.16vw; height:14.16vw; left:50.55vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/tesamorelin__1_-removebg-std.webp"); animation-duration:36s; animation-delay:-2.8s; --op:0.55; --dx:-0.25vw; --r0:13.5deg; --r1:8.5deg; } html body .cdx-mbv-v.n9{ width:10.90vw; height:10.90vw; left:51.907vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/ghk-cu-removebg-std.webp"); animation-duration:36s; animation-delay:-20.8s; --op:0.45; --dx:0.25vw; --r0:-2.5deg; --r1:2.5deg; } html body .cdx-mbv-v.n10{ width:9.77vw; height:9.77vw; left:64.45vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-2-tz__1_-removebg-std.webp"); animation-duration:22s; animation-delay:-3.5s; --op:0.5; --dx:-0.25vw; --r0:-13.5deg; --r1:-18.5deg; } html body .cdx-mbv-v.n11{ width:13.17vw; height:13.17vw; left:74.363vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-3-rt__2_-removebg-std.webp"); animation-duration:29s; animation-delay:-4.2s; --op:0.78; --dx:0.25vw; --r0:3.5deg; --r1:8.5deg; } html body .cdx-mbv-v.n12{ width:10.48vw; height:10.48vw; left:75.484vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/tb-500-removebg-1-std.webp"); animation-duration:29s; animation-delay:-18.7s; --op:0.68; --dx:-0.25vw; --r0:-9.5deg; --r1:-14.5deg; } html body .cdx-mbv-v.n13{ width:14.73vw; height:14.73vw; left:86.432vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/wolverine-removebg.webp"); animation-duration:33s; animation-delay:-4.9s; --op:0.95; --dx:0.25vw; --r0:-6.5deg; --r1:-1.5deg; } html body .cdx-mbv-v.n14{ width:11.19vw; height:11.19vw; left:87.907vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/bpc-157-removebg.webp"); animation-duration:33s; animation-delay:-21.4s; --op:0.7; --dx:-0.25vw; --r0:16.5deg; --r1:11.5deg; } } @media (max-width:760px){ html body .cdx-mbv{ display:block; position:fixed; top:0px; right:0px; bottom:0px; left:0px; z-index:0; pointer-events:none; overflow-x:hidden; overflow-y:hidden; } html body .cdx-mbv-v{ position:absolute; bottom:-380px; background-repeat:no-repeat; background-size:contain; background-position-x:center; background-position-y:center; opacity:0; will-change:transform, opacity; animation-name:cdxRiseMb; animation-timing-function:linear; animation-iteration-count:infinite; } html body .cdx-mbv-v.n1{ width:19.39vw; height:19.39vw; left:1.946vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-3-rt__2_-removebg-std.webp"); animation-duration:34s; animation-delay:0s; --op:0.95; --dx:0.25vw; --r0:-15.5deg; --r1:-10.5deg; } html body .cdx-mbv-v.n2{ width:15.18vw; height:15.18vw; left:3.303vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/bpc-157-removebg.webp"); animation-duration:34s; animation-delay:-17s; --op:0.72; --dx:-0.25vw; --r0:-3.5deg; --r1:-8.5deg; } html body .cdx-mbv-v.n3{ width:13.90vw; height:13.90vw; left:16.683vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/tb-500-removebg-1-std.webp"); animation-duration:27s; animation-delay:-0.7s; --op:0.8; --dx:0.25vw; --r0:12.5deg; --r1:17.5deg; } html body .cdx-mbv-v.n4{ width:17.38vw; height:17.38vw; left:26.958vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/ghk-cu-removebg-std.webp"); animation-duration:31s; animation-delay:-1.4s; --op:0.52; --dx:-0.25vw; --r0:2.5deg; --r1:-2.5deg; } html body .cdx-mbv-v.n5{ width:12.80vw; height:12.80vw; left:28.433vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/melanotan-ii__1_-removebg-std.webp"); animation-duration:31s; animation-delay:-16.9s; --op:0.44; --dx:0.25vw; --r0:6.5deg; --r1:11.5deg; } html body .cdx-mbv-v.n6{ width:14.81vw; height:14.81vw; left:39.189vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-2-tz__1_-removebg-std.webp"); animation-duration:25s; animation-delay:-2.1s; --op:0.58; --dx:-0.25vw; --r0:-6.5deg; --r1:-11.5deg; } html body .cdx-mbv-v.n7{ width:12.25vw; height:12.25vw; left:40.015vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-3-rt__2_-removebg-std.webp"); animation-duration:25s; animation-delay:-14.6s; --op:0.42; --dx:0.25vw; --r0:1.5deg; --r1:6.5deg; } html body .cdx-mbv-v.n8{ width:18.29vw; height:18.29vw; left:50.55vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/tesamorelin__1_-removebg-std.webp"); animation-duration:36s; animation-delay:-2.8s; --op:0.55; --dx:-0.25vw; --r0:13.5deg; --r1:8.5deg; } html body .cdx-mbv-v.n9{ width:14.08vw; height:14.08vw; left:51.907vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/ghk-cu-removebg-std.webp"); animation-duration:36s; animation-delay:-20.8s; --op:0.45; --dx:0.25vw; --r0:-2.5deg; --r1:2.5deg; } html body .cdx-mbv-v.n10{ width:12.62vw; height:12.62vw; left:64.45vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-2-tz__1_-removebg-std.webp"); animation-duration:22s; animation-delay:-3.5s; --op:0.5; --dx:-0.25vw; --r0:-13.5deg; --r1:-18.5deg; } html body .cdx-mbv-v.n11{ width:17.01vw; height:17.01vw; left:74.363vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/glp-3-rt__2_-removebg-std.webp"); animation-duration:29s; animation-delay:-4.2s; --op:0.78; --dx:0.25vw; --r0:3.5deg; --r1:8.5deg; } html body .cdx-mbv-v.n12{ width:13.53vw; height:13.53vw; left:75.484vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/tb-500-removebg-1-std.webp"); animation-duration:29s; animation-delay:-18.7s; --op:0.68; --dx:-0.25vw; --r0:-9.5deg; --r1:-14.5deg; } html body .cdx-mbv-v.n13{ width:19.02vw; height:19.02vw; left:86.432vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/wolverine-removebg.webp"); animation-duration:33s; animation-delay:-4.9s; --op:0.95; --dx:0.25vw; --r0:-6.5deg; --r1:-1.5deg; } html body .cdx-mbv-v.n14{ width:14.45vw; height:14.45vw; left:87.907vw; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/bpc-157-removebg.webp"); animation-duration:33s; animation-delay:-21.4s; --op:0.7; --dx:-0.25vw; --r0:16.5deg; --r1:11.5deg; } } /* Codex - membership floating vials */ /* 1. All breakpoints: unique duration + irregular offset + drift + wider tumble (kills the lockstep pairs) */ html body .cdx-mbv-v.n1{ animation-duration:23.3s; animation-delay:-1.2s; --dx:2.5vw; --r0:-15.5deg; --r1:-2deg; } html body .cdx-mbv-v.n2{ animation-duration:32.3s; animation-delay:-20.0s; --dx:-3vw; --r0:-3.5deg; --r1:-14deg; } html body .cdx-mbv-v.n3{ animation-duration:38.3s; animation-delay:-11.9s; --dx:6vw; --r0:12.5deg; --r1:26deg; } html body .cdx-mbv-v.n4{ animation-duration:28.9s; animation-delay:-25.4s; --dx:-5vw; --r0:2.5deg; --r1:-9deg; } html body .cdx-mbv-v.n5{ animation-duration:41.1s; animation-delay:-7.0s; --dx:7vw; --r0:6.5deg; --r1:19deg; } html body .cdx-mbv-v.n6{ animation-duration:33.9s; animation-delay:-25.1s; --dx:-4vw; --r0:-6.5deg; --r1:-20deg; } html body .cdx-mbv-v.n7{ animation-duration:44.3s; animation-delay:-19.0s; --dx:5.5vw; --r0:1.5deg; --r1:13deg; } html body .cdx-mbv-v.n8{ animation-duration:27.1s; animation-delay:-26.0s; --dx:-6.5vw; --r0:13.5deg; --r1:3deg; } html body .cdx-mbv-v.n9{ animation-duration:36.7s; animation-delay:-10.3s; --dx:4.5vw; --r0:-2.5deg; --r1:9deg; } html body .cdx-mbv-v.n10{ animation-duration:42.9s; animation-delay:-23.6s; --dx:-7vw; --r0:-13.5deg; --r1:-25deg; } html body .cdx-mbv-v.n11{ animation-duration:30.7s; animation-delay:-2.8s; --dx:3.5vw; --r0:3.5deg; --r1:16deg; } html body .cdx-mbv-v.n12{ animation-duration:39.7s; animation-delay:-32.2s; --dx:-5.5vw; --r0:-9.5deg; --r1:-21deg; } html body .cdx-mbv-v.n13{ animation-duration:25.7s; animation-delay:-9.5s; --dx:3vw; --r0:-6.5deg; --r1:5deg; } html body .cdx-mbv-v.n14{ animation-duration:35.1s; animation-delay:-23.9s; --dx:-2.5vw; --r0:16.5deg; --r1:6deg; } /* 2. Phones: desktop-proportioned sizes, higher opacity, faster rise, and 5 vials parked in each side gutter (4 stay centred to cross the hero) so both edges stay populated */ @media (max-width:760px){ html body .cdx-mbv-v.n1{ width:14.384vw; height:14.384vw; --op:1; left:-6vw; animation-duration:16.3s; animation-delay:-0.8s; --dx:-1.5vw; } html body .cdx-mbv-v.n2{ width:11.263vw; height:11.263vw; --op:0.9; left:90vw; animation-duration:22.7s; animation-delay:-14.1s; --dx:1.5vw; } html body .cdx-mbv-v.n3{ width:10.313vw; height:10.313vw; --op:1; left:-4vw; animation-duration:27.7s; animation-delay:-8.6s; --dx:2vw; } html body .cdx-mbv-v.n4{ width:12.892vw; height:12.892vw; --op:0.8; left:92vw; animation-duration:20.1s; animation-delay:-17.7s; --dx:-2vw; } html body .cdx-mbv-v.n5{ width:9.499vw; height:9.499vw; --op:0.58; left:28.433vw; animation-duration:30.1s; animation-delay:-5.1s; --dx:3vw; } html body .cdx-mbv-v.n6{ width:10.992vw; height:10.992vw; --op:0.75; left:39.189vw; animation-duration:23.9s; animation-delay:-17.7s; --dx:-3vw; } html body .cdx-mbv-v.n7{ width:9.092vw; height:9.092vw; --op:0.55; left:40.015vw; animation-duration:32.7s; animation-delay:-14.1s; --dx:2.5vw; } html body .cdx-mbv-v.n8{ width:13.57vw; height:13.57vw; --op:0.85; left:89.5vw; animation-duration:18.9s; animation-delay:-18.1s; --dx:2vw; } html body .cdx-mbv-v.n9{ width:10.449vw; height:10.449vw; --op:0.8; left:-3vw; animation-duration:26.3s; animation-delay:-7.4s; --dx:-2.5vw; } html body .cdx-mbv-v.n10{ width:9.363vw; height:9.363vw; --op:0.65; left:64.45vw; animation-duration:31.3s; animation-delay:-17.2s; --dx:-2vw; } html body .cdx-mbv-v.n11{ width:12.62vw; height:12.62vw; --op:0.97; left:-5.5vw; animation-duration:21.3s; animation-delay:-1.9s; --dx:1vw; } html body .cdx-mbv-v.n12{ width:10.042vw; height:10.042vw; --op:0.88; left:92.5vw; animation-duration:28.9s; animation-delay:-23.4s; --dx:-1.5vw; } html body .cdx-mbv-v.n13{ width:14.113vw; height:14.113vw; --op:1; left:-7vw; animation-duration:17.7s; animation-delay:-6.5s; --dx:2.5vw; } html body .cdx-mbv-v.n14{ width:10.72vw; height:10.72vw; --op:0.9; left:90.5vw; animation-duration:25.1s; animation-delay:-17.1s; --dx:-2vw; } } /* Codex audit fix - mobile: let the process-step copy and detail boxes use the full width instead of two ~148px columns that wrap one word per line */ @media (max-width: 760px){ html body section.vfo-section .vfo-step.vfo-step{ grid-template-columns: 1fr !important; } html body section.vfo-section .vfo-step .vfo-desc, html body section.vfo-section .vfo-step .vfo-badges{ grid-column: 1 / -1 !important; } } /* Codex audit fix - stop the LIVE pill being sliced off the Test Results cards */ .qb-chart .qb-chart-head .qb-chart-label{ white-space: normal !important; min-width: 0 !important; overflow-wrap: anywhere !important; } .qb-chart .qb-chart-head .qb-live{ flex: 0 0 auto !important; } /* Codex audit fix - the trailing line of each process-step badge was landing in the 28px icon column, so it wrapped one word per line on mobile */ html body section.vfo-section .vfo-badge .vfo-badge-more{ grid-column: 2 / -1 !important; } /* Codex audit fix - kit price line was overflowing its column on mobile (price + struck-through "separately" total + stock pill on one nowrap row) */ body.single-product .cx3-pd .cx3-priceline{ flex-wrap: wrap !important; row-gap: 4px !important; align-items: baseline !important; } /* Codex - register panel. The card itself now comes from .cdx-acct-card, the same rule the sign-in card uses (the "Codex - Register card class" snippet adds the class), so the two boxes are identical and stay identical. Only typography, field rhythm, order and the submit button are set here. */ /* Register first, Sign in second */ #customer_login > .col-2{ order:1 !important; } #customer_login > .col-1{ order:2 !important; } /* heading block mirrors .cdx-acct-head so the first field lines up with the login one */ .account-register-inner > h2{ text-align:center; font-family:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif; font-size:26px; font-weight:900; line-height:30px; letter-spacing:-.26px; color:#0D0D0D; text-transform:none; margin:0 0 26px; } .account-register-inner > h2::before{ content:"Codex Research"; display:block; font-family:"DM Mono",monospace; font-size:9px; font-weight:400; letter-spacing:1.98px; text-transform:uppercase; color:#8A8A80; line-height:14px; margin-bottom:11px; } .account-register-inner > h2::after{ content:"Create your Codex Research account."; display:block; font-family:Lato,sans-serif; font-size:13.5px; font-weight:400; letter-spacing:normal; text-transform:none; color:#6F6F66; line-height:22px; margin-top:9px; } /* labels + row rhythm copied from the login form so both password fields line up */ .woocommerce-form-register label{ display:block; font-family:"DM Mono",monospace; font-size:9.5px; font-weight:400; letter-spacing:1.045px; text-transform:uppercase; color:#8A8A80; line-height:15px; margin:0 0 7px; } .woocommerce-form-register .form-row{ margin-bottom:18px; } .woocommerce-form-register input[type="email"], .woocommerce-form-register input[type="password"], .woocommerce-form-register input[type="text"], .woocommerce-form-login input[type="text"], .woocommerce-form-login input[type="password"]{ border-radius:10px !important; height:48px !important; margin-bottom:0 !important; color:#0A0A0A !important; -webkit-text-fill-color:#0A0A0A !important; } /* the submit button defaulted to white text on a white background */ .woocommerce-form-register .woocommerce-form-register__submit{ background:#0A0A0A !important; border-color:#0A0A0A !important; color:#fff !important; -webkit-text-fill-color:#fff !important; width:100% !important; border-radius:999px !important; padding:16px 18px !important; font-family:"DM Mono",monospace !important; font-size:11px !important; font-weight:800 !important; letter-spacing:1.54px !important; text-transform:uppercase !important; } .woocommerce-form-register .woocommerce-form-register__submit:hover, .woocommerce-form-register .woocommerce-form-register__submit:focus{ background:#1F1F1F !important; border-color:#1F1F1F !important; color:#fff !important; } /* Codex - Sign in / Register swipe track on mobile. Same pattern as the Top Picks carousel: one card fills the view, the next peeks in and snaps on swipe. */ @media (max-width:849px){ #customer_login{ flex-wrap:nowrap !important; align-items:stretch !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; margin:0 !important; padding:0 0 14px !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch; } #customer_login::-webkit-scrollbar{ display:none !important; } #customer_login::after{ content:""; flex:0 0 15px; order:3; } #customer_login > .col{ display:flex !important; flex-direction:column !important; flex:0 0 88% !important; max-width:88% !important; width:88% !important; padding:0 0 0 15px !important; scroll-snap-align:start !important; } #customer_login > .col > .account-login-inner, #customer_login > .col > .account-register-inner{ margin:0 !important; max-width:none !important; width:100% !important; flex:1 1 auto !important; } } /* Codex - both forms sit side by side, so the "Create account" jump link under Sign in is redundant. (The link is still generated by the account snippet.) */ .cdx-reg-link{ display:none !important; } /* Codex - Sign in / Register swipe track on mobile. Same pattern as the Top Picks carousel: one card fills the view, the next peeks in and snaps on swipe. */ @media (max-width:849px){ #customer_login{ flex-wrap:nowrap !important; align-items:stretch !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; margin:0 !important; padding:0 0 14px !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch; } #customer_login::-webkit-scrollbar{ display:none !important; } #customer_login::after{ content:""; flex:0 0 15px; } #customer_login > .col{ display:flex !important; flex-direction:column !important; flex:0 0 88% !important; max-width:88% !important; width:88% !important; padding:0 0 0 15px !important; scroll-snap-align:start !important; } #customer_login > .col > .account-login-inner, #customer_login > .col > .account-register-inner{ margin-left:0 !important; margin-right:0 !important; margin-bottom:0 !important; max-width:none !important; width:100% !important; flex:1 1 auto !important; } } /* Codex - membership tiers: center tier name + price on mobile */ @media (max-width:549px){ .cdx-mem-card .cdx-mem-tier, .cdx-mem-card .cdx-mem-price, .cdx-mem-card .cdx-mem-yearly, .cdx-mem-card .cdx-mem-note{ width:100% !important; align-self:stretch !important; text-align:center !important; justify-content:center !important; } } /* Codex - bestsellers: keep the Add to Cart button after adding (repeat clicks allowed) */ .tp-card .add_to_cart_button.added{ display:flex !important; } .tp-card a.added_to_cart{ display:none !important; } /* Codex - desktop: mini cart panel stays fully on screen */ @media (min-width:850px){ .off-canvas-right .mfp-content, .off-canvas-cart.mfp-content{ transform:none !important; transition:none !important; } } /* Codex - desktop: mini cart dropdown opens inward, not off the right edge */ .nav-right li.cart-item.current-dropdown > .nav-dropdown, .nav-right li.cart-item.has-dropdown:hover > .nav-dropdown{ left:auto !important; right:-15px !important; } /* ===== Account popup: notice banner ===== */ #login-form-popup .woocommerce-notices-wrapper{ margin:0 0 24px !important; } #login-form-popup .woocommerce-error, #login-form-popup .woocommerce-info, #login-form-popup .woocommerce-message{ list-style:none !important; margin:0 !important; padding:13px 20px !important; border-radius:14px !important; background:#FDF4F2 !important; border:1px solid #F0D8D3 !important; color:#9A3B2E !important; font-family:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif !important; font-size:13.5px !important; font-weight:500 !important; line-height:20px !important; text-align:center !important; } #login-form-popup .woocommerce-error > li, #login-form-popup .woocommerce-info > li, #login-form-popup .woocommerce-message > li{ list-style:none !important; margin:0 !important; padding:0 !important; } #login-form-popup .woocommerce-error::before, #login-form-popup .woocommerce-error > li::before, #login-form-popup .woocommerce-info::before, #login-form-popup .woocommerce-message::before{ content:none !important; display:none !important; } #login-form-popup .woocommerce-info, #login-form-popup .woocommerce-message{ background:#F0FAF5 !important; border-color:#CDEBDC !important; color:#1B6B4B !important; } /* ===== Account popup: Welcome back matches Register ===== */ @media (min-width:850px){ #login-form-popup #customer_login > .col{ display:flex !important; } #login-form-popup .account-login-inner, #login-form-popup .account-register-inner{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; } #login-form-popup .account-register-inner > h2, #login-form-popup .cdx-acct-head{ height:86px !important; margin:0 0 26px !important; } #login-form-popup .woocommerce-form-login, #login-form-popup .woocommerce-form-register{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; margin-bottom:0 !important; padding-bottom:0 !important; } #login-form-popup .woocommerce-privacy-policy-text{ height:44px !important; min-height:0 !important; overflow:hidden !important; margin:auto 0 16px !important; } #login-form-popup .woocommerce-form-login > p.form-row:not(.woocommerce-form-row){ display:flex !important; flex-direction:column !important; margin:auto 0 0 !important; } #login-form-popup .woocommerce-form-login__rememberme{ height:44px !important; min-height:0 !important; margin:0 0 16px !important; display:flex !important; align-items:flex-end !important; } #login-form-popup .woocommerce-form-register > p.form-row:last-of-type{ margin:0 !important; padding:0 !important; } #login-form-popup .woocommerce-form-register::after{ content:"" !important; display:block !important; height:66px !important; flex:0 0 auto !important; } #login-form-popup .lost_password{ height:66px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; } #login-form-popup .woocommerce-form-register button:not(.show-password-input), #login-form-popup .woocommerce-form-login button:not(.show-password-input){ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:60px !important; min-height:60px !important; padding:0 18px !important; line-height:1 !important; margin:0 !important; background:#0A0A0A !important; background-image:none !important; } #login-form-popup .woocommerce-form-register button:not(.show-password-input):hover, #login-form-popup .woocommerce-form-login button:not(.show-password-input):hover{ background:#1F1F1F !important; } } /* ===== Account popup: Welcome back gets the same card as Register ===== */ @media (min-width:850px){ #login-form-popup .account-login-inner, #login-form-popup .account-register-inner{ background:#fff !important; border:1px solid rgba(10,10,10,.1) !important; border-radius:16px !important; padding:34px 32px 28px !important; box-shadow:0 1px 2px rgba(10,10,10,.03), 0 14px 38px -24px rgba(10,10,10,.32) !important; margin:0 !important; max-width:none !important; width:100% !important; } #login-form-popup .woocommerce-form-login > p.woocommerce-form-row{ margin-bottom:18px !important; } } #login-form-popup .woocommerce-error a, #login-form-popup .woocommerce-info a, #login-form-popup .woocommerce-message a{ color:#0A0A0A !important; font-weight:700 !important; text-decoration:underline !important; text-underline-offset:2px !important; } /* ===== Account popup: password reveal stays a small eye ===== */ #login-form-popup .show-password-input{ position:absolute !important; right:13px !important; top:50% !important; transform:translateY(-50%) !important; display:inline !important; width:auto !important; height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; line-height:1.35 !important; color:#9A9A90 !important; visibility:visible !important; } /* --------------------------------------------------------------- About Us hero: lift the composition 80px on desktop. Content, background art and the chevron peak all rise together. --------------------------------------------------------------- */ @media (min-width: 1024px) { .codex-about section.cxl { padding-top: 0; } .codex-about section.cxl .cxl-bg { top: -55px; } .codex-about section.cdx-proof { margin-top: -136px; clip-path: polygon(50% 0, 100% 72px, 100% calc(100% - 72px), 50% 100%, 0 calc(100% - 72px), 0 72px); } } /* --------------------------------------------------------------- Homepage hero vials: a little larger on desktop. Everything in the cluster derives from --cdxVial, so the three vials and their offsets scale together. Doubled .hero class to outrank the page block's own !important rule. --------------------------------------------------------------- */ @media (min-width: 901px) { html body.home section.hero.hero { --cdxVial: calc(var(--cdxHeroH) * 1.03) !important; } } /* --------------------------------------------------------------- Membership page: tiers only on desktop. Drops the "Research access, on your terms" headline and its sub-line so the four tier cards lead the page. The grid picks up the spacing the hero used to provide. Mobile keeps the headline. --------------------------------------------------------------- */ @media (min-width: 1024px) { .cdx-mb section.cdx-mb-hero { display: none; } .cdx-mb section.cdx-mb-grid { padding-top: 48px; } } /* --------------------------------------------------------------- Membership page: no floating vials, compact tier cards. The .cdx-mbv layer is 14 spans running a cdxRiseMb animation on a fixed layer behind the page - switched off everywhere. Card height was set by the tallest card (Pro, six bullets), so the compaction targets type and spacing there; the "Not included" block is dropped, and the CTA is pushed to the bottom so all four buttons still line up. --------------------------------------------------------------- */ /* The page block prints its own after this file, so every declaration below needs !important to win the cascade. */ .cdx-mb .cdx-mbv, body .cdx-mbv { display: none !important; } @media (min-width: 1024px) { .cdx-mb-card { padding: 16px 14px 14px !important; } .cdx-mb-card-top { margin-bottom: 6px !important; } .cdx-mb-tier { margin-bottom: 2px !important; } .cdx-mb-price { margin: 2px 0 !important; } .cdx-mb-amt { font-size: 32px !important; line-height: 1.02 !important; } .cdx-mb-yearly { margin: 3px 0 !important; font-size: 11.5px !important; } .cdx-mb-note { margin: 3px 0 0 !important; font-size: 12px !important; } /* "Not included" as a row of small struck-through chips - keeps the tier contrast at roughly 50px instead of the 187px stacked list. */ .cdx-mb-locked { display: block !important; margin: 2px 0 8px !important; padding-top: 8px !important; border-top: 1px dashed rgba(0,0,0,0.10) !important; } .cdx-mb-locked-label { display: block !important; font-size: 9px !important; letter-spacing: 0.9px !important; text-transform: uppercase !important; opacity: 0.5 !important; margin: 0 0 5px !important; } .cdx-mb-list-locked { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .cdx-mb-list-locked li { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 2px 7px !important; border-radius: 999px !important; background: rgba(0,0,0,0.045) !important; font-size: 10.5px !important; line-height: 1.3 !important; color: #8a938d !important; text-decoration: line-through !important; text-decoration-color: rgba(0,0,0,0.35) !important; } .cdx-mb-list-locked .cdx-mb-lock { display: none !important; } .cdx-mb-list { margin-bottom: 6px !important; } .cdx-mb-list li { margin-bottom: 4px !important; line-height: 1.28 !important; font-size: 12.8px !important; } .cdx-mb-yrwrap { display: inline !important; } .cdx-mb-yr { display: inline-block !important; margin-left: 5px !important; font-size: 9.5px !important; vertical-align: middle !important; white-space: nowrap !important; } .cdx-mb-cta { margin-top: auto !important; padding-top: 10px !important; } .cdx-mb-cta a, .cdx-mb-btn { padding-top: 11px !important; padding-bottom: 11px !important; } } /* ===== About hero: stop the background over-zooming on wide monitors ===== */ /* Photo is 1600x900. Above 1900px the cover scale blows it up and crops the vial. Cap the photo layer, anchor right, fade the left edge into --base. */ @media (min-width: 1900px) { .codex-about section.cxl .cxl-bg { left: auto; right: 0; width: 1900px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); } } /* ===== About hero: drop the chevron below the vial on wide screens ===== */ /* The proof section is pulled up 136px so its chevron apex overlaps the hero. Past ~1520px the photo starts scaling and the vial base descends, so the chevron ends up cutting through it. Ease the overlap from 136px down to 72px between 1520px and 1900px, then hold. 72px is the floor: it equals the chevron’s own clip inset, so the top corners stay covered by the hero. */ @media (min-width: 1521px) { .codex-about section.cdx-proof { margin-top: clamp(-136px, calc(-136px + (100vw - 1520px) * 0.1684), -72px); } } /* ===== About: close the black wedges between the chevron sections ===== */ /* The proof band is clipped 72px in at its corners. Nothing sat behind those cuts, so the page background showed through as black triangles - under the hero at the top, and above the process band at the bottom. */ @media (min-width: 761px) { .codex-about section.cdx-process { margin-top: -72px; /* tuck up under the proof chevron */ padding-top: 192px; /* 120 + 72, so the content does not shift */ } } /* Codex - hero copy contrast over the lightened background (desktop) */ @media (min-width:901px){ html body.home section.hero p{ color:#fff !important; font-weight:500 !important; text-shadow:0 1px 3px rgba(0,0,0,.45) !important; } html body.home section.hero .mini-stat{ color:rgb(203,224,212) !important; text-shadow:0 1px 2px rgba(0,0,0,.4) !important; } html body.home section.hero .mini-stat b{ text-shadow:0 1px 3px rgba(0,0,0,.5) !important; } } /* ===== CDX MEMBERSHIP GREEN: white-ground override now applies below 1025px only, so desktop keeps the original green ground. ===== */ @media (max-width:1024px){ /* Membership page: white ground, site-gray #F6F6F2 tier/note cards. Overrides the page block's own (prints after this file, so !important). Build a Bundle keeps the #1A5238 green + vials and is untouched by any of this. */ html body.page-id-3855 #content.page-wrapper{ background:#FFFFFF !important; } html body.page-id-3855 #content.page-wrapper::before{ background:none !important; } /* surfaces */ html body.page-id-3855 .cdx-mb-card{ background:#FAFAF5 !important; } html body.page-id-3855 .cdx-mb-card:not(.is-featured):not(.is-gold){ border-color:#E6E6E0 !important; } html body.page-id-3855 .cdx-mb-why-col{ background:#FAFAF5 !important; border-color:#E6E6E0 !important; } html body.page-id-3855 .cdx-mb-fr-row{ background:#FAFAF5 !important; } html body.page-id-3855 .cdx-mb-fr-cell{ background:#EFEFE9 !important; } html body.page-id-3855 .cdx-mb-fr-cell.is-featured{ background:rgba(31,168,118,.12) !important; } html body.page-id-3855 .cdx-mb-fr-cell.is-gold{ background:#FBF3DE !important; } /* type that used to be white on the green ground */ html body.page-id-3855 .cdx-mb-h1{ color:#0A0A0A !important; } html body.page-id-3855 .cdx-mb-sub{ color:rgba(10,10,10,.66) !important; } html body.page-id-3855 .cdx-mb-compare .cdx-mb-h2{ color:#0A0A0A !important; } html body.page-id-3855 .cdx-mb-fr-head span{ color:rgba(10,10,10,.62) !important; } html body.page-id-3855 .cdx-mb-fr-head span.is-featured{ color:#1FA876 !important; } html body.page-id-3855 .cdx-mb-fr-head span.is-gold{ color:#A07C1E !important; } html body.page-id-3855 .cdx-mb-cancel{ color:rgba(10,10,10,.62) !important; } } /* ===== end CDX MEMBERSHIP GREEN ===== */ /* ===== CDX PANEL TITLES + ARROWS — desktop only (1025px+). Mobile untouched. ===== */ @media (min-width:1025px){ html body section.qb-standalone .qb-checklist .qb-tile:nth-child(n) .qb-tile-title{font-size:17px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.02em !important;color:#0A0A0A !important;display:flex !important;align-items:baseline !important;gap:10px !important;} html body section.qb-standalone .qb-checklist .qb-tile:nth-child(n) .qb-tile-title:before{color:#1FA876 !important;font-weight:800 !important;font-size:17px !important;} html body section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-title:before{content:"01" !important;} html body section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-title:before{content:"02" !important;} html body section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-title:before{content:"03" !important;} html body section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-title:before{content:"04" !important;} html body section.qb-standalone .qb-checklist .qb-tile.qb-tile.qb-tile:nth-child(n){position:relative !important;} html body section.qb-standalone .qb-acc-row{padding-right:44px !important;} html body section.qb-standalone .qb-acc-toggle{position:absolute !important;right:16px !important;top:26px !important;width:auto !important;margin:0 !important;padding:0 !important;} html body section.qb-standalone .qb-acc-line{display:none !important;} html body section.qb-standalone .qb-acc-plus{font-size:0 !important;color:transparent !important;background:transparent !important;border:0 !important;width:auto !important;height:auto !important;} html body section.qb-standalone .qb-acc-plus:before{content:"\2192" !important;font-size:20px !important;line-height:1 !important;color:#1FA876 !important;}} /* ===== CDX PANEL: even card spacing + button alignment + Independent Testing header — desktop only (1025px+). Mobile untouched. ===== */ @media (min-width:1025px){html body section.qb-standalone .qb-info{align-items:stretch !important;} html body section.qb-standalone .qb-info-text{display:flex !important;flex-direction:column !important;height:100% !important;} html body section.qb-standalone .qb-checklist{flex:1 1 auto !important;justify-content:space-between !important;gap:26px !important;} html body section.qb-standalone a.qb-cta-about{margin-top:24px !important;min-height:54px !important;display:flex !important;align-items:center !important;justify-content:center !important;} html body section.qb-standalone .qb-avg-header{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:7px !important;text-align:center !important;} html body section.qb-standalone .qb-avg-line{display:none !important;} html body section.qb-standalone .qb-avg-live{order:-1 !important;color:#1FA876 !important;font-size:12px !important;font-weight:800 !important;letter-spacing:.14em !important;text-transform:uppercase !important;background:transparent !important;border:0 !important;padding:0 !important;margin:0 !important;display:inline-flex !important;align-items:center !important;gap:7px !important;} html body section.qb-standalone .qb-avg-live:after{content:" Results" !important;} html body section.qb-standalone .qb-avg-title{font-size:0 !important;margin:0 !important;line-height:1 !important;} html body section.qb-standalone .qb-avg-title:after{content:"Independent Testing" !important;display:block !important;font-size:27px !important;font-weight:800 !important;letter-spacing:-.01em !important;color:#0A0A0A !important;text-transform:uppercase !important;line-height:1.1 !important;} html body section.qb-standalone .qb-avg-header:after{content:"Third-party laboratory verified" !important;font-size:14px !important;font-weight:500 !important;color:#6B6960 !important;line-height:1.4 !important;}}@media (min-width:1025px){html body section.qb-standalone .qb-panel .qb-avg-header h4.qb-avg-title.qb-avg-title.qb-avg-title{font-size:0 !important;color:transparent !important;margin:0 !important;line-height:1 !important;} html body section.qb-standalone .qb-panel .qb-avg-header h4.qb-avg-title.qb-avg-title.qb-avg-title:after{content:"Independent Testing" !important;display:block !important;font-size:27px !important;font-weight:800 !important;letter-spacing:-.01em !important;color:#0A0A0A !important;text-transform:uppercase !important;line-height:1.12 !important;} html body section.qb-standalone .qb-panel .qb-avg-header span.qb-avg-live.qb-avg-live.qb-avg-live{position:static !important;order:-1 !important;right:auto !important;top:auto !important;transform:none !important;}} /* ===== CDX PANEL: larger COA + chunkier cards, tighter gaps - desktop only (1025px+). Mobile untouched. ===== */ @media (min-width:1025px){html body section.qb-standalone .qb-coa-stage{height:650px !important;}html body section.qb-standalone .qb-checklist .qb-tile.qb-tile.qb-tile:nth-child(n){padding:56px 24px !important;}}@media (min-width:1025px){html body section.qb-standalone .qb-acc-toggle{top:56px !important;height:56px !important;display:flex !important;align-items:center !important;justify-content:flex-end !important;}} /* ===== CDX PANEL: larger card wording - desktop only (1025px+). Mobile untouched. ===== */ @media (min-width:1025px){html body section.qb-standalone .qb-checklist .qb-tile:nth-child(n) .qb-tile-title{font-size:20px !important;}html body section.qb-standalone .qb-checklist .qb-tile:nth-child(n) .qb-tile-title:before{font-size:20px !important;}html body section.qb-standalone .qb-checklist .qb-tile:nth-child(n) .qb-tile-desc{font-size:15.5px !important;line-height:1.55 !important;margin-top:9px !important;}} /* ===== CDX PANEL: smaller cards, centered group, COA 600 - desktop only (1025px+). Mobile untouched. ===== */ @media (min-width:1025px){html body section.qb-standalone .qb-checklist .qb-tile.qb-tile.qb-tile:nth-child(n){padding:44px 24px !important;}html body section.qb-standalone .qb-checklist{justify-content:center !important;gap:24px !important;}html body section.qb-standalone .qb-acc-toggle{top:44px !important;}html body section.qb-standalone .qb-coa-stage{height:600px !important;}} /* ===== CDX SECTION BACKGROUND: VFO art behind the Codex Standard / Independent Testing panel only. Content sits on top (opaque tiles + lift). Top Picks untouched. Desktop only (1025px+). Mobile untouched. ===== */ @media (min-width:1025px){ html body section.qb-standalone{background-image:url('https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-5-2026-08_48_57-PM.webp') !important;background-size:100% auto !important;background-position:50% 100% !important;background-repeat:repeat-y !important;background-repeat:no-repeat !important;background-position:50% 50% !important;background-attachment:scroll !important;background-color:#F2F9F7 !important;} html body section.qb-standalone .qb-checklist .qb-tile.qb-tile.qb-tile:nth-child(n){background-color:#FFFFFF !important;box-shadow:0 1px 2px rgba(10,10,10,.05),0 10px 26px rgba(10,10,10,.07) !important;} } /* ===== CDX: equal-height tiles (buttons stay aligned) + VFO art behind Top Picks, content on top. Desktop only (1025px+). Mobile untouched. ===== */ @media (min-width:1025px){html body section.qb-standalone .qb-checklist{justify-content:stretch !important;}html body section.qb-standalone .qb-checklist .qb-tile.qb-tile.qb-tile:nth-child(n){flex:1 1 0 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;justify-content:center !important;}} /* ===== CDX VFO: Instant Confirmation badge matches the other badges (was display:block, now grid like HPLC Verified / COA Available). Desktop only. Mobile untouched. ===== */ @media (min-width:1025px){html body section.vfo-section .vfo-step .vfo-badge.vfo-badge.vfo-badge-mobileonly{display:grid !important;}} /* ===== CDX Top Picks: rounder product cards (card 16>24, image 10>16, buttons 8>12). Desktop only. Mobile untouched. ===== */ @media (min-width:1025px){html body section.tp-section .tp-card.tp-card{border-radius:24px !important;}html body section.tp-section .tp-card .tp-imgwrap{border-radius:16px !important;}html body section.tp-section .tp-card .tp-actions a,html body section.tp-section .tp-card .tp-actions button{border-radius:12px !important;}} /* ===== CDX CHECKOUT: cap the order item list so it scrolls, keeping Proceed to Pay level with Order Notes. Desktop only (1025px+). Mobile untouched. ===== */ @media (min-width:1025px){ body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody{display:block !important;max-height:368px !important;overflow-y:auto !important;width:100% !important;} body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr{display:table !important;width:100% !important;} } /* ===== CDX CHECKOUT: returning-customer prompt at the top, styled like Onyx. Desktop + mobile. ===== */ body.woocommerce-checkout .woocommerce-form-login-toggle{margin:0 0 14px !important;} body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info{ max-width:640px !important;margin:0 auto 12px !important; background:#F6F6F7 !important;border:1px solid #E7E7EA !important; border-radius:10px !important;padding:13px 16px !important; font-size:13.5px !important;line-height:1.4 !important;color:#0B0B0D !important; text-align:center !important;display:block !important; } body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before{display:none !important;} body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a{color:#0B0B0D !important;font-weight:600 !important;text-decoration:underline !important;text-underline-offset:2px !important;} body.woocommerce-checkout .woocommerce-form-login{max-width:640px !important;margin:0 auto 18px !important;} /* cdx-checkout-line-bigger — desktop Your Order rows: larger thumb / name / qty, same row height */ @media (min-width:850px){ html.cdx-ck-on body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td.product-name{line-height:0 !important;} html.cdx-ck-on body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item .cdx-line{gap:13px !important;align-items:center !important;} html.cdx-ck-on body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item .cdx-thumb{width:72px !important;height:72px !important;border-radius:12px !important;} html.cdx-ck-on body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item .cdx-copy{gap:5px !important;} html.cdx-ck-on body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item .cdx-name{font-size:17px !important;line-height:1.2 !important;} html.cdx-ck-on body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item .cdx-qty{font-size:12px !important;gap:7px !important;line-height:1 !important;} html.cdx-ck-on body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item button.cdx-step{width:22px !important;height:22px !important;font-size:13px !important;border-radius:4px !important;} html.cdx-ck-on body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item .cdx-qty-n{min-width:16px !important;font-size:13px !important;} } /* cdx-header-hover-neutral - header links/icons keep their cream colour on hover instead of flashing green, and the account icon has no hover menu. */ html body #header#header .header-main a:hover, html body #header#header .header-main a:focus, html body #header#header .header-main a:hover span, html body #header#header .header-main a:hover i, html body #header#header .header-nav-main li a:hover, html body #header#header .header-nav-main li a:hover span, html body #header#header .header-nav-main li a:hover i, html body #header#header .header-contact a:hover, html body #header#header .header-contact a:hover span{ color:#FAFAF5 !important; -webkit-text-fill-color:#FAFAF5 !important; } /* account icon: no hover dropdown, same as the cart icon */ html body #header#header li.account-item .nav-dropdown, html body #header#header li.account-item ul.nav-dropdown{ display:none !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important; } /* ---- Cart drawer: bigger grand total ---- */ #cdxd .d-tot{padding-top:14px !important;margin-top:11px !important;} #cdxd .d-tot-l > span{font-size:16px !important;font-weight:700 !important;letter-spacing:.2px !important;} #cdxd .d-pts{font-size:10.5px !important;} #cdxd .d-tot > b{font-size:27px !important;letter-spacing:-.6px !important;line-height:1.05 !important;} #cdxd .d-tot > b s{font-size:16.5px !important;margin-right:8px !important;} /* ---- Cart drawer: green glow line under the header ---- */ #cdxd .d-hd{position:relative !important;} #cdxd .d-hd::after{content:'' !important;position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;height:2px !important;pointer-events:none !important; background:linear-gradient(90deg,rgba(46,249,107,0) 0%,rgba(46,249,107,.15) 18%,#2EF96B 50%,rgba(46,249,107,.15) 82%,rgba(46,249,107,0) 100%) !important; box-shadow:0 0 12px 1px rgba(46,249,107,.55) !important;} /* ---- Cart drawer: glowing footer buttons ---- */ #cdxd .d-express{background:linear-gradient(180deg,#FBA43A 0%,#F7931A 55%,#ED8408 100%) !important;} #cdxd .d-co{min-height:54px !important;} /* ---- Cart drawer: points line flush-left under Subtotal (star trails the text) ---- */ #cdxd .d-pts{gap:5px !important;} #cdxd .d-pts .star{order:2 !important;} /* ---- Checkout delivery: "Free upgrade" badge on the 2-Day row ---- */ html body.woocommerce-checkout .cdx-dm__badge{ display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase; color:#17805C;background:rgba(46,232,155,.16);border:1px solid rgba(46,232,155,.45); border-radius:999px;padding:2px 8px;line-height:1.55;white-space:nowrap; } /* ---- Checkout: Bitcoin place-order pill (matches the cart drawer) ---- */ html body.woocommerce-checkout #place_order.cdx-btc-pay{ display:flex !important;align-items:center !important;justify-content:center !important; width:100% !important;min-height:54px !important;padding:14px 18px !important; border:1px solid #DE8410 !important;border-radius:999px !important; background:linear-gradient(180deg,#FBA43A 0%,#F7931A 55%,#ED8408 100%) !important; box-shadow:0 0 20px 2px rgba(247,147,26,.45),0 6px 16px rgba(247,147,26,.26) !important; font-size:0 !important;color:transparent !important;line-height:1.2 !important; transition:filter .12s ease !important;position:relative !important; } html body.woocommerce-checkout #place_order.cdx-btc-pay:hover{filter:brightness(1.07) !important;} /* Label carries the Bitcoin mark as its own background so ::after is free for the discount badge - a button only has the two pseudo-elements. */ html body.woocommerce-checkout #place_order.cdx-btc-pay::before{ content:"Pay with Bitcoin" !important; padding-left:31px !important; background:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%23fff%22%3E%3C%2Fcircle%3E%3Cpath%20fill%3D%22%23F7931A%22%20d%3D%22M23.189%2014.02c.314-2.096-1.283-3.223-3.465-3.975l.708-2.84-1.728-.43-.69%202.765c-.454-.114-.92-.22-1.385-.326l.695-2.783L15.596%206l-.708%202.839c-.376-.086-.746-.17-1.104-.26l.002-.009-2.384-.595-.46%201.846s1.283.294%201.256.312c.7.175.826.638.805%201.006l-.806%203.235c.048.012.11.03.18.057l-.183-.045-1.13%204.532c-.086.212-.303.531-.793.41.018.025-1.256-.313-1.256-.313l-.858%201.978%202.25.561c.418.105.828.215%201.231.318l-.715%202.872%201.727.43.708-2.84c.472.127.93.245%201.378.357l-.706%202.828%201.728.43.715-2.866c2.948.558%205.164.333%206.097-2.333.752-2.147-.037-3.386-1.588-4.194%201.13-.26%201.98-1.003%202.207-2.538zm-3.95%205.538c-.533%202.147-4.148.986-5.32.695l.95-3.805c1.172.293%204.929.872%204.37%203.11zm.535-5.569c-.487%201.953-3.495.96-4.47.717l.86-3.45c.975.243%204.118.696%203.61%202.733z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") left center/22px 22px no-repeat !important; font-size:15px !important;font-weight:700 !important;letter-spacing:.01em !important; color:#fff !important;line-height:22px !important;white-space:nowrap !important; text-transform:none !important; } html body.woocommerce-checkout #place_order.cdx-btc-pay.has-crypto-disc::after{ content:"EXTRA 5% OFF" !important; position:absolute !important;right:16px !important;top:50% !important; transform:translateY(-50%) !important; margin-left:0 !important;padding:3px 9px 4px !important; background:#0A0A0A !important;color:#fff !important;border-radius:999px !important; font-size:10.5px !important;font-weight:800 !important;letter-spacing:.6px !important; line-height:1.25 !important;white-space:nowrap !important; } /* ===== CODEX — large-screen scale-up (homepage) ===== Homepage sections each capped at their own fixed width (1100-1280px), so on a big monitor everything sat in a narrow column with dead margins and the section edges jogged. One shared column width, stepping up with the viewport. Nothing below 1500px is affected. Tune --cdxWide only. */ html body.home{ --cdxWide:1280px; } @media (min-width:1500px){ html body.home{ --cdxWide:1400px; } } @media (min-width:1800px){ html body.home{ --cdxWide:1520px; } } @media (min-width:2200px){ html body.home{ --cdxWide:1680px; } } @media (min-width:2600px){ html body.home{ --cdxWide:1800px; } } @media (min-width:1500px){ html body.home .tp-head, html body.home .tp-track, html body.home .section-head, html body.home .cdx-mem-inner{ max-width:var(--cdxWide) !important; } /* long-form copy stays readable - capped tighter than the rest */ html body.home .vfo-inner{ max-width:min(var(--cdxWide),1400px) !important; } /* FAQ deliberately stays at its 900px measure - narrow column reads better */ } /* The hero is deliberately EXCLUDED from this block — JD wants it exactly as it shipped, so nothing here touches .hero, .hero-grid, --cdxHeroH, --cdxVial or the h1. It keeps its own 1200px grid cap and its own clamp()-driven sizing. Only the sections below the hero scale up on large screens. */ /* ===== end large-screen scale-up ===== */ /* ===== CODEX — Codex Standard accordion fix (qb-standalone) ===== The four tiles are pinned to equal heights on desktop by .qb-checklist .qb-tile.qb-tile.qb-tile{flex:1 1 0 !important}, which caps each tile at its share of a fixed-height column. An opened .qb-acc-panel therefore had nowhere to expand: overflow:hidden zeroes its automatic minimum size, so flex-shrink crushed it back to 0 no matter what max-height said. The arrows toggled the checkbox fine - nothing appeared. Fix: stop the panel being shrunk, and let a tile that contains a CHECKED box size to its content. Closed state is byte-identical to before. */ html body section.qb-standalone .qb-acc-panel{ flex-shrink:0 !important; } @media (min-width:1025px){ html body section.qb-standalone .qb-checklist .qb-tile.qb-tile.qb-tile:has(input.qb-acc-checkbox:checked){ flex:0 0 auto !important; } } /* ...and the closed tiles keep their height instead of collapsing to their own content once the column is no longer stretched to a fixed height. 172px = (760px checklist - 3x24px gap) / 4, i.e. exactly what they measure in the all-closed state. Scoped to :has(:checked) so the resting layout stays purely flex-driven and untouched. min-height is a floor, never a cap, so a tile whose text wraps taller still grows past it. */ @media (min-width:1025px){ html body section.qb-standalone .qb-checklist:has(input.qb-acc-checkbox:checked) .qb-tile.qb-tile-acc{ min-height:172px !important; } } /* ...and the background artwork stays a fixed size instead of zooming. The section paints a 817x1925 PNG at background-size:auto 100%, i.e. the artwork's height IS the section's height - so the moment a box expanded the section grew from ~1079px to ~1812px and the molecules scaled up ~68% with it. Pinning the height to a constant decouples it: the artwork now renders identically whether a box is open or shut. It still repeat-x's across the width, and the section's own #FBFCFB fills below it. */ html body section.qb-standalone{ background-size:100% auto !important;background-position:50% 100% !important;background-repeat:repeat-y !important; } /* ===== end accordion fix ===== */ /* ===== CODEX — Top Picks "View Product" legibility ===== .tp-btn carries a hardcoded font-size:7.3px on desktop (10px under 700px), so "View Product" rendered nearly unreadable beside the 13px Add to Cart. Only the secondary button is bumped — Add to Cart keeps its own 13px via .tp-btn-cart, so the primary/secondary hierarchy is preserved. Verified: both buttons still measure 33px tall and the label does not overflow the 161px pill at any card width. */ html body .tp-track .tp-btn.tp-btn-buy{ font-size:12px !important; letter-spacing:.3px !important; padding:9px 10px !important; } /* ===== end View Product legibility ===== */ /* ===== CODEX — Top Picks vial render size ===== Bumped the card image from a 216px well / 192px render to 246 / 224 so the 3D vials read larger in the row. object-fit stays contain, so the renders scale rather than crop, and every card still measures the same height. */ html body .tp-track .tp-card .tp-imgwrap{ height:246px !important; } html body .tp-track .tp-card .tp-imgwrap img{ height:224px !important; width:224px !important; max-height:224px !important; } /* ===== end Top Picks vial render size ===== */ /* ===== CODEX — Top Picks cards on mobile ===== Below 1024px the row was showing only image, name and the three test pills: a rule hid .tp-blurb and .tp-coa outright, so mobile lost the description and the COA link entirely. Both are restored here. Restoring them alone made a very tall card, so three things pay for the height: the blurb is clamped to two lines, the COA row is forced back to inline-flex with a 13px icon (unhidden it rendered as a 132px block because its SVG had no size), and the image well is trimmed to 178/162 — the 246/224 desktop size is too big on a phone. The card also widens from a hard max-width:290px cap to 84vw/330px. Net effect at 368px viewport: 325x557 instead of 279x554, i.e. the aspect goes from 1.99 to 1.71 while GAINING the blurb and COA. ~43px of the next card still peeks so the row still reads as scrollable. */ @media (max-width:1024px){ html body .tp-track .tp-card .tp-blurb{ display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden !important; } html body .tp-track .tp-card a.tp-coa{ display:inline-flex !important; align-items:center !important; gap:6px !important; height:auto !important; line-height:1.2 !important; } html body .tp-track .tp-card a.tp-coa svg{ width:13px !important; height:13px !important; flex:0 0 13px !important; } html body .tp-track .tp-card .tp-imgwrap{ height:165px !important; } html body .tp-track .tp-card .tp-imgwrap img{ height:150px !important; width:150px !important; max-height:150px !important; } /* Card width left at its original 72vw/290px - JD wants it narrow so it sits comfortably on a phone. The height that the restored blurb and COA cost is paid back by the smaller image well and by keeping the three test pills on one row instead of letting them wrap to two. */ html body .tp-track .tp-card.tp-card{ width:72vw !important; max-width:290px !important; } html body .tp-track .tp-card .tp-badges{ flex-wrap:nowrap !important; gap:4px !important; } html body .tp-track .tp-card .tp-badges .tp-badge{ font-size:8px !important; padding:3px 5px !important; white-space:nowrap !important; } html body .tp-track .tp-card .tp-badges .tp-break{ display:none !important; } } /* ===== end Top Picks cards on mobile ===== */ /* CODEX - Terms page desktop: tighter hero + two-column sections */ @media (min-width:1025px){ .codex-acc .cx-mhero{padding-top:132px !important;padding-bottom:32px !important;min-height:0 !important;} .codex-acc .cx-lede{max-width:none !important;white-space:nowrap;margin-top:20px !important;} .codex-acc .cx-body{max-width:1240px !important;} .codex-acc .cx-body > div:has(> .cx-card){display:grid !important;grid-template-columns:1fr 1fr;gap:20px;} .codex-acc .cx-body > div:has(> .cx-card) > .cx-card{margin:0 !important;} } /* CODEX - Terms page: white ground, grey section cards */ .codex-acc{background:#FFFFFF !important;} .codex-acc .cx-card{background:#ECEEEC !important;border-color:rgba(10,10,10,0.06) !important;} /* CODEX - Terms page: scroll fade-in (class added by JS, so no-JS still shows everything) */ .codex-acc.cx-anim .cx-card{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;} .codex-acc.cx-anim .cx-card.cx-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.codex-acc.cx-anim .cx-card{opacity:1 !important;transform:none !important;transition:none !important;}} /* CODEX - COA modal (Top Picks) */ .cdx-coam{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,5,5,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;} .cdx-coam.is-open{opacity:1;visibility:visible;} .cdx-coam-card{width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:#fff;border-radius:22px;padding:30px 28px 26px;box-shadow:0 30px 70px rgba(0,0,0,.34);transform:translateY(14px) scale(.985);transition:transform .26s cubic-bezier(.22,1,.36,1);position:relative;} .cdx-coam.is-open .cdx-coam-card{transform:none;} .cdx-coam-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border:0;background:transparent;font-size:22px;line-height:1;color:#6b6b6b;cursor:pointer;border-radius:50%;} .cdx-coam-x:hover{background:#F2F4F3;color:#0A0A0A;} .cdx-coam-nm{font-family:Fraunces,Georgia,serif;font-size:22px;font-weight:600;color:#0A0A0A;margin:0 34px 4px 0;} .cdx-coam-ty{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8a;margin-bottom:18px;} .cdx-coam-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:#F6F6F2;border-radius:16px;padding:18px 20px;margin-bottom:14px;} .cdx-coam-pct{font-family:Fraunces,Georgia,serif;font-size:38px;font-weight:600;line-height:1;color:#0A0A0A;} .cdx-coam-plabel{font-size:12px;color:#7a7a7a;margin-top:6px;} .cdx-coam-meta{text-align:right;font-size:12px;color:#7a7a7a;line-height:1.6;} .cdx-coam-meta b{display:block;color:#0A0A0A;font-size:13px;font-weight:600;} .cdx-coam-verif{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#1FA876;margin:0 0 12px 2px;} .cdx-coam-list{border-top:1px solid #EFEFE9;margin-bottom:18px;} .cdx-coam-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid #EFEFE9;font-size:13.5px;color:#3a3a3a;} .cdx-coam-pill{font-size:10.5px;letter-spacing:.06em;font-weight:700;text-transform:uppercase;color:#1FA876;background:#E8F7EE;border-radius:999px;padding:4px 10px;white-space:nowrap;} .cdx-coam-pill.is-wait{color:#A07C1E;background:#FBF3DF;} .cdx-coam-btns{display:flex;flex-direction:column;gap:10px;} .cdx-coam-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .15s ease,opacity .15s ease;} .cdx-coam-btn:hover{transform:translateY(-1px);} .cdx-coam-btn.is-primary{background:#0A0A0A;color:#fff;} .cdx-coam-btn.is-secondary{background:#fff;color:#0A0A0A;border:1.5px solid #E2E2DC;} .cdx-coam-note{text-align:center;font-size:11.5px;color:#9a9a9a;margin:16px 0 0;} .cdx-coam-pending{font-size:13.5px;color:#7a7a7a;background:#FBF3DF;border-radius:14px;padding:14px 16px;margin-bottom:16px;} .tp-track .tp-coa{cursor:pointer;} @media (prefers-reduced-motion:reduce){.cdx-coam,.cdx-coam-card,.cdx-coam-btn{transition:none !important;transform:none !important;}} @media (max-width:600px){.cdx-coam-card{padding:26px 20px 22px;border-radius:18px;}.cdx-coam-pct{font-size:32px;}} /* CODEX - catalog card View COA link (matches Top Picks .tp-coa) */ .cdx-shop-grid .cdx-card-verify{margin-bottom:2px !important;} .cdx-shop-grid .cdx-card-coa{display:flex;align-items:center;justify-content:center;gap:5px;margin:2px 0 10px;font-size:11px;font-weight:600;letter-spacing:.055px;text-transform:none;color:#9AA09A;text-decoration:none;cursor:pointer;transition:color .15s ease;} .cdx-shop-grid .cdx-card-coa .cdx-coa-arw{font-size:12px;line-height:1;transition:transform .15s ease;} .cdx-shop-grid .cdx-card-coa:hover{color:#0A0A0A;} .cdx-shop-grid .cdx-card-coa:hover .cdx-coa-arw{transform:translateX(2px);} /* CODEX - COA modal value column */ .cdx-coam-val{font-weight:600;color:#0A0A0A;text-align:right;white-space:nowrap;} .cdx-coam-meta b{white-space:nowrap;} /* CODEX - product page trust strip centred (Expected Arrival / HPLC Verified / Third-Party COA) */ @media (min-width:1025px){ .cx3-strip > div{justify-content:center !important;} } /* Codex - Age Gate desktop: vials stay clear of the card + crisp (no glow) */ @media (min-width:1024px){ .age-gate__background::before, .age-gate__wrapper p:nth-of-type(2)::before, .age-gate__background::after, .age-gate__wrapper p:nth-of-type(2)::after, .age-gate__heading::before, .age-gate__wrapper button:first-of-type::before, .age-gate__restricted--standard::before, .age-gate__wrapper button:first-of-type::after, .age-gate__restricted--standard::after, .age-gate__wrapper a::before, .age-gate__wrapper a::after, .age-gate__heading::after, .age-gate__wrapper button:last-of-type::before, .age-gate__wrapper::before, .age-gate__wrapper button:last-of-type::after, .age-gate__wrapper::after, .age-gate__wrapper label::before, .age-gate__wrapper p:first-of-type::before, .age-gate__wrapper label::after, .age-gate__wrapper p:first-of-type::after { filter:none !important; height:auto !important; aspect-ratio:1 / 1 !important; } .age-gate__background::before{--cdxagW:min(260px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(2%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__wrapper p:nth-of-type(2)::before{--cdxagW:min(235px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(5%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__background::after{--cdxagW:min(280px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(8%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__wrapper p:nth-of-type(2)::after{--cdxagW:min(255px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(11%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__heading::before{--cdxagW:min(250px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(14%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__wrapper button:first-of-type::before{--cdxagW:min(225px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(17%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__restricted--standard::before{--cdxagW:min(240px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(20%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__wrapper button:first-of-type::after{--cdxagW:min(260px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(23%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__restricted--standard::after{--cdxagW:min(230px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(26%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__wrapper a::before{--cdxagW:min(245px,calc(50% - 320px));width:var(--cdxagW) !important;left:min(29%,calc(50% - 300px - var(--cdxagW))) !important;} .age-gate__wrapper a::after{--cdxagW:min(255px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(71%,calc(50% + 300px)) !important;} .age-gate__heading::after{--cdxagW:min(260px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(74%,calc(50% + 300px)) !important;} .age-gate__wrapper button:last-of-type::before{--cdxagW:min(240px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(77%,calc(50% + 300px)) !important;} .age-gate__wrapper::before{--cdxagW:min(240px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(80%,calc(50% + 300px)) !important;} .age-gate__wrapper button:last-of-type::after{--cdxagW:min(230px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(83%,calc(50% + 300px)) !important;} .age-gate__wrapper::after{--cdxagW:min(250px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(86%,calc(50% + 300px)) !important;} .age-gate__wrapper label::before{--cdxagW:min(250px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(89%,calc(50% + 300px)) !important;} .age-gate__wrapper p:first-of-type::before{--cdxagW:min(230px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(92%,calc(50% + 300px)) !important;} .age-gate__wrapper label::after{--cdxagW:min(235px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(95%,calc(50% + 300px)) !important;} .age-gate__wrapper p:first-of-type::after{--cdxagW:min(245px,calc(50% - 320px));width:var(--cdxagW) !important;left:max(98%,calc(50% + 300px)) !important;} } /* ===== CATALOG - View COA pill on photo (desktop) ===== */ @media (min-width:1024px){ .cdx-shop-grid .cdx-card-body{position:relative;} .cdx-shop-grid .cdx-card-coa{position:absolute;right:26px;bottom:calc(100% + 26px);z-index:8;width:auto;margin:0;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-family:Archivo,sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2EE89B;background:#0A0A0A;border:1px solid rgba(46,232,155,.9);box-shadow:0 6px 18px -8px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s,color .15s,transform .15s,box-shadow .15s,border-color .15s;} .cdx-shop-grid .cdx-card-coa:hover{color:#2EE89B;border-color:#2EE89B;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(0,0,0,.7),0 4px 14px -4px rgba(46,232,155,.45);} .cdx-shop-grid .cdx-card-coa .cdx-coa-arw{font-size:11px;} } /* ===== TOP PICKS - View COA pill on photo (desktop) ===== */ @media (min-width:1025px){ html body .tp-track .tp-card{position:relative;} html body .tp-track .tp-card .tp-coa{position:absolute !important;right:28px !important;top:256px !important;bottom:auto !important;left:auto !important;transform:translateY(-100%) !important;z-index:5;width:auto !important;margin:0 !important;display:inline-flex !important;align-items:center !important;gap:5px !important;white-space:nowrap;padding:4px 9px !important;border-radius:999px !important;font-family:Archivo,sans-serif !important;font-size:8px !important;font-weight:700 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:#2EE89B !important;background:#0A0A0A !important;border:1px solid rgba(46,232,155,.9) !important;box-shadow:0 5px 14px -7px rgba(0,0,0,.6) !important;transition:border-color .15s,box-shadow .15s,transform .15s !important;} html body .tp-track .tp-card a.tp-coa:hover{background:#0A0A0A !important;color:#2EE89B !important;border-color:#2EE89B !important;transform:translateY(calc(-100% - 1px)) !important;box-shadow:0 7px 16px -7px rgba(0,0,0,.7),0 4px 12px -4px rgba(46,232,155,.45) !important;} html body .tp-track .tp-card .tp-coa svg{width:9px !important;height:9px !important;flex:0 0 auto !important;} html body .tp-track .tp-card .tp-coa::after{font-size:10px !important;line-height:1 !important;} } /* ===== CATALOG - stat icon above the label (all widths) ===== */ .cdx-shop-grid .cdx-card-stats .cdx-stat:not(.cdx-stat-price){display:grid;grid-template-columns:auto auto;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;justify-content:center;align-items:center;column-gap:4px;row-gap:1px;} .cdx-shop-grid .cdx-card-stats .cdx-stat:not(.cdx-stat-price) > svg{grid-area:1 / 1;} .cdx-shop-grid .cdx-card-stats .cdx-stat:not(.cdx-stat-price) .cdx-stat-txt{display:contents;} .cdx-shop-grid .cdx-card-stats .cdx-stat:not(.cdx-stat-price) .cdx-stat-v{grid-area:1 / 2;} .cdx-shop-grid .cdx-card-stats .cdx-stat:not(.cdx-stat-price) .cdx-stat-l{grid-area:2 / 1 / 3 / 3;text-align:center;justify-self:center;} /* phones: keep the purity stat hidden - the grid rule above outranks the original :first-child hide */ @media (max-width:600px){.cdx-shop-grid .cdx-card-stats .cdx-stat:not(.cdx-stat-price):first-child{display:none !important;}} /* ===== CATALOG - page ground to the window edges ===== */ /* .cdx-shop-page paints #F6F6F2 but sits inside Flatsome's white , so wide screens showed white gutters */ html body.page-id-2857 main{background:#F6F6F2 !important;} /* ===== BUNDLE & SAVE - desktop card rows ===== */ @media (min-width:850px){ body.single-product .product-main .cx3-bs-head{margin-bottom:22px !important;} body.single-product .product-main .cx3-bs-t{font-size:0 !important;line-height:1.1 !important;display:block !important;text-align:center !important;} body.single-product .product-main .cx3-bs-t::before{content:"BUNDLE & ";font-size:30px;font-weight:800;letter-spacing:.01em;color:#0A0A0A;} body.single-product .product-main .cx3-bs-t::after{content:"SAVE";font-size:30px;font-weight:800;letter-spacing:.01em;color:#12B877;} body.single-product .product-main .cx3-bs-s{font-size:15px !important;color:#6D716F !important;text-align:center !important;display:block !important;margin-top:6px !important;} body.single-product .product-main .cx3-bs-c{grid-template-columns:242px minmax(120px,1fr) auto auto 92px 128px 128px 26px !important;column-gap:20px !important;padding:22px 24px !important;margin-bottom:14px !important;border:1px solid #E4E6E3 !important;border-radius:14px !important;background:#fff !important;transition:border-color .15s,box-shadow .15s,background .15s !important;} body.single-product .product-main .cx3-bs-c:hover{border-color:#C2CCC6 !important;} body.single-product .product-main .cx3-bs-c.on{border-color:#12B877 !important;background:#F4FCF8 !important;box-shadow:inset 0 0 0 1px #12B877, 0 6px 20px -14px rgba(18,184,119,.9) !important;} /* vials: images sit inside transparent padding, so they overlap. img+img does not work - noscript tags sit between them */ body.single-product .product-main .cx3-bs-c .cx3-vg{width:auto !important;min-width:0 !important;display:flex !important;align-items:center !important;justify-self:start !important;gap:0 !important;} body.single-product .product-main .cx3-bs-c .cx3-vg img{height:88px !important;width:88px !important;object-fit:contain !important;flex:0 0 auto !important;margin-left:-52px !important;} body.single-product .product-main .cx3-bs-c .cx3-vg img:first-of-type{margin-left:0 !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-n{justify-self:start !important;text-align:left !important;display:block !important;font-size:19px !important;font-weight:800 !important;letter-spacing:.02em !important;color:#0A0A0A !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-n::after{display:block;margin-top:4px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:#6D716F;} body.single-product .product-main .cx3-bs .cx3-bs-c:nth-child(2) .cx3-bs-n::after{content:"Perfect for getting started.";} body.single-product .product-main .cx3-bs .cx3-bs-c:nth-child(3) .cx3-bs-n::after{content:"Our most popular option.";} body.single-product .product-main .cx3-bs .cx3-bs-c:nth-child(4) .cx3-bs-n::after{content:"Maximum savings.";} body.single-product .product-main .cx3-bs-c .cx3-bs-was{font-size:16px !important;color:#9BA09C !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-ea{font-size:24px !important;font-weight:800 !important;color:#0A0A0A !important;letter-spacing:-.01em !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-ea em{font-size:13px !important;font-weight:600 !important;font-style:normal !important;color:#8A8F8B !important;margin-left:3px !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-off{font-size:16px !important;font-weight:800 !important;color:#12B877 !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-save{background:#DDF5E9 !important;color:#0E9A63 !important;border-radius:999px !important;padding:7px 14px !important;font-size:12.5px !important;font-weight:800 !important;letter-spacing:.04em !important;display:inline-block !important;white-space:nowrap !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-tot{font-size:15px !important;color:#6D716F !important;} body.single-product .product-main .cx3-bs-c .cx3-radio{width:24px !important;height:24px !important;border:1.5px solid #C7CCC8 !important;background:#fff !important;box-shadow:none !important;} body.single-product .product-main .cx3-bs-c.on .cx3-radio{border-color:#12B877 !important;background:#12B877 !important;box-shadow:inset 0 0 0 4px #fff !important;} body.single-product .product-main .cx3-bs-c .cx3-flag{top:-12px !important;left:20px !important;padding:6px 13px !important;border-radius:999px !important;font-size:10.5px !important;font-weight:800 !important;letter-spacing:.11em !important;background:#12B877 !important;color:#fff !important;border:0 !important;} body.single-product .product-main .cx3-bs-c .cx3-flag::before{content:"\2605";margin-right:6px;font-size:11px;} body.single-product .product-main .cx3-bs-c .cx3-flag.cx3-flag-alt{background:#E7EAE8 !important;color:#4A4E4C !important;} body.single-product .product-main .cx3-bs-c .cx3-flag.cx3-flag-alt::before{content:"\1F3C6";} } /* ===== BUNDLE & SAVE - column dividers ===== */ /* gap goes to 0 and the hairlines ride on cell borders; the SAVE pill cannot carry one, so .cx3-bs-off supplies both of its neighbours */ @media (min-width:850px){ body.single-product .product-main .cx3-bs-c{grid-template-columns:242px minmax(90px,1fr) auto auto auto auto auto 26px !important;column-gap:0 !important;} body.single-product .product-main .cx3-bs .cx3-bs-c:nth-child(2) .cx3-bs-n::after{content:"Perfect for starting" !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-n::after{white-space:nowrap !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-was{align-self:stretch !important;display:flex !important;align-items:center !important;border-left:0 !important;padding-left:24px !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-ea{align-self:stretch !important;display:flex !important;align-items:center !important;padding-left:12px !important;padding-right:24px !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-off{align-self:stretch !important;display:flex !important;align-items:center !important;justify-content:center !important;border-left:1px solid #EAEDEA !important;border-right:1px solid #EAEDEA !important;padding:0 26px !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-save{margin:0 26px !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-tot{align-self:stretch !important;display:flex !important;align-items:center !important;justify-content:center !important;border-left:1px solid #EAEDEA !important;padding-left:26px !important;padding-right:20px !important;} } /* ===== BUNDLE & SAVE - align the dividers across rows ===== */ /* fixed columns + justify-self:stretch, otherwise the older block's justify-self:center shrinks each cell to its own text and the hairlines land a few px apart per row */ @media (min-width:850px){ body.single-product .product-main .cx3-bs-c{grid-template-columns:242px minmax(80px,1fr) 92px 152px 126px 178px 158px 26px !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-was, body.single-product .product-main .cx3-bs-c .cx3-bs-ea, body.single-product .product-main .cx3-bs-c .cx3-bs-off, body.single-product .product-main .cx3-bs-c .cx3-bs-tot{justify-self:stretch !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-was{justify-content:flex-end !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-ea{justify-content:flex-start !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-save{margin:0 !important;justify-self:center !important;} } /* ===== BUNDLE & SAVE - drop the struck-through price ===== */ /* column 3 collapses to 0 rather than being removed - the older block places cells by explicit grid-column number */ @media (min-width:850px){ body.single-product .product-main .cx3-bs-c{grid-template-columns:242px minmax(80px,1fr) 0px 152px 126px 178px 158px 26px !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-was{display:none !important;} body.single-product .product-main .cx3-bs-c .cx3-bs-ea{justify-content:center !important;padding-left:0 !important;padding-right:0 !important;} } /* ===== PRODUCT PAGE - disclaimer + terms cards (desktop) ===== */ /* the .cdx-sec blocks live in .product-footer, not .product-main; their h3 carries inline text-align:center !important, so the title is made inline-block to sit left instead */ @media (min-width:850px){ html body.single-product .cdx-sec-intended, html body.single-product .cdx-sec-terms{position:relative !important;padding:34px 130px 30px 132px !important;margin-bottom:22px !important;border:1px solid #E4E7E3 !important;border-left:5px solid #12B877 !important;border-radius:18px !important;background-color:#FBFDFB !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2312B877' stroke-opacity='.20' stroke-width='2'%3E%3Cpath d='M100 54 46 96M114 48l34 21M158 94l-6 42M136 156l-50 8M64 152 46 110'/%3E%3C/g%3E%3Cg fill='%2312B877' fill-opacity='.10' stroke='%2312B877' stroke-opacity='.22' stroke-width='2'%3E%3Ccircle cx='100' cy='40' r='15'/%3E%3Ccircle cx='160' cy='80' r='15'/%3E%3Ccircle cx='150' cy='150' r='15'/%3E%3Ccircle cx='75' cy='166' r='15'/%3E%3Ccircle cx='40' cy='100' r='15'/%3E%3C/g%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 34px center !important;background-size:auto 84% !important;overflow:hidden !important;} html body.single-product .cdx-sec-intended::before, html body.single-product .cdx-sec-terms::before{content:"" !important;position:absolute !important;left:40px !important;top:34px !important;width:66px !important;height:66px !important;border-radius:17px !important;background-color:#E7F7EF !important;background-repeat:no-repeat !important;background-position:center !important;background-size:30px 30px !important;border:1px solid rgba(18,184,119,.18) !important;} html body.single-product .cdx-sec-intended::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312B877' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6.2L4.6 18.4A2 2 0 0 0 6.3 21h11.4a2 2 0 0 0 1.7-2.6L14 9.2V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E") !important;} html body.single-product .cdx-sec-terms::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312B877' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E") !important;} html body.single-product .cdx-sec-intended > h3, html body.single-product .cdx-sec-terms > h3{display:inline-block !important;width:auto !important;text-align:left !important;font-size:0 !important;line-height:1.15 !important;} html body.single-product .cdx-sec-intended > h3::before{content:"Intended Use & Legal ";font-size:27px;font-weight:800;color:#0D0D0D;} html body.single-product .cdx-sec-intended > h3::after{content:"Disclaimer";font-size:27px;font-weight:800;color:#12B877;} html body.single-product .cdx-sec-terms > h3::before{content:"Terms of ";font-size:27px;font-weight:800;color:#0D0D0D;} html body.single-product .cdx-sec-terms > h3::after{content:"Sale";font-size:27px;font-weight:800;color:#12B877;} html body.single-product .cdx-sec-intended > div, html body.single-product .cdx-sec-terms > div{margin:0 0 16px !important;width:56px !important;height:3px !important;} html body.single-product .cdx-sec-intended > p, html body.single-product .cdx-sec-terms > p{font-size:15px !important;line-height:1.75 !important;color:#3F453F !important;margin:0 0 12px !important;} html body.single-product .cdx-sec-intended > p:last-child, html body.single-product .cdx-sec-terms > p:last-child{margin-bottom:0 !important;} } /* ===== PRODUCT PAGE - molecule artwork on the cards ===== */ /* JD's molecule photo replaces the drawn SVG. It is opaque, so it rides on a ::after that is masked to fade out to the left instead of being a plain background. */ @media (min-width:850px){ html body.single-product .cdx-sec-intended, html body.single-product .cdx-sec-terms{background-image:none !important;padding-right:min(30%,470px) !important;} html body.single-product .cdx-sec-intended::after, html body.single-product .cdx-sec-terms::after{content:"" !important;position:absolute !important;top:0 !important;right:0 !important;bottom:0 !important;width:min(40%,600px) !important;background-image:url("/wp-content/uploads/2026/09/ChatGPT-Image-Sep-4-2026-10_32_17-AM.webp") !important;background-repeat:no-repeat !important;background-position:right center !important;background-size:cover !important;opacity:.62 !important;-webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 58%) !important;mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 58%) !important;pointer-events:none !important;z-index:0 !important;} html body.single-product .cdx-sec-intended > *, html body.single-product .cdx-sec-terms > *{position:relative !important;z-index:1 !important;} } /* ===== PRODUCT PAGE - research overview card (desktop) ===== */ /* same treatment as the disclaimer + terms cards, microscope icon */ @media (min-width:850px){ html body.single-product .cdx-sec-overview{position:relative !important;padding:34px min(30%,470px) 30px 132px !important;margin-bottom:22px !important;border:1px solid #E4E7E3 !important;border-left:5px solid #12B877 !important;border-radius:18px !important;background-color:#FBFDFB !important;background-image:none !important;overflow:hidden !important;} html body.single-product .cdx-sec-overview::before{content:"" !important;position:absolute !important;left:40px !important;top:34px !important;width:66px !important;height:66px !important;border-radius:17px !important;background-color:#E7F7EF !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312B877' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h8'/%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M14 22a7 7 0 1 0 0-14h-1'/%3E%3Cpath d='M9 14h2'/%3E%3Cpath d='M9 12a2 2 0 0 1-2-2V6h4v4a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M12 6V3a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:center !important;background-size:30px 30px !important;border:1px solid rgba(18,184,119,.18) !important;z-index:1 !important;} html body.single-product .cdx-sec-overview::after{content:"" !important;position:absolute !important;top:0 !important;right:0 !important;bottom:0 !important;width:min(40%,600px) !important;background-image:url("/wp-content/uploads/2026/09/ChatGPT-Image-Sep-4-2026-10_32_17-AM.webp") !important;background-repeat:no-repeat !important;background-position:right center !important;background-size:cover !important;opacity:.62 !important;-webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 58%) !important;mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 58%) !important;pointer-events:none !important;z-index:0 !important;} html body.single-product .cdx-sec-overview > *{position:relative !important;z-index:1 !important;} html body.single-product .cdx-sec-overview > h3{display:inline-block !important;width:auto !important;text-align:left !important;font-size:0 !important;line-height:1.15 !important;} html body.single-product .cdx-sec-overview > h3::before{content:"Research ";font-size:27px;font-weight:800;color:#0D0D0D;} html body.single-product .cdx-sec-overview > h3::after{content:"Overview";font-size:27px;font-weight:800;color:#12B877;} html body.single-product .cdx-sec-overview > div{margin:0 0 16px !important;width:56px !important;height:3px !important;} html body.single-product .cdx-sec-overview > p{font-size:15px !important;line-height:1.75 !important;color:#3F453F !important;margin:0 0 12px !important;} html body.single-product .cdx-sec-overview > p:last-child{margin-bottom:0 !important;} } /* ===== PRODUCT PAGE - storage and handling card (desktop) ===== */ /* same shell as the other three, kept in its own blue palette with the blue molecule photo */ @media (min-width:850px){ html body.single-product .cdx-sec-storage{position:relative !important;padding:34px min(30%,470px) 30px 132px !important;margin-bottom:22px !important;border:1px solid rgba(47,127,216,.22) !important;border-left:5px solid #2F7FD8 !important;border-radius:18px !important;overflow:hidden !important;} html body.single-product .cdx-sec-storage::before{content:"" !important;position:absolute !important;left:40px !important;top:34px !important;width:66px !important;height:66px !important;border-radius:17px !important;background-color:#E3EFFC !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7FD8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3Cpath d='M17 6h3'/%3E%3Cpath d='M17 10h3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:center !important;background-size:30px 30px !important;border:1px solid rgba(47,127,216,.20) !important;z-index:1 !important;} html body.single-product .cdx-sec-storage::after{content:"" !important;position:absolute !important;top:0 !important;right:0 !important;bottom:0 !important;width:min(40%,600px) !important;background-image:url("/wp-content/uploads/2026/09/ChatGPT-Image-Sep-4-2026-10_52_53-AM.webp") !important;background-repeat:no-repeat !important;background-position:right center !important;background-size:cover !important;opacity:.62 !important;-webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 58%) !important;mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 58%) !important;pointer-events:none !important;z-index:0 !important;} html body.single-product .cdx-sec-storage > *{position:relative !important;z-index:1 !important;} html body.single-product .cdx-sec-storage > h3{display:inline-block !important;width:auto !important;text-align:left !important;font-size:0 !important;line-height:1.15 !important;} html body.single-product .cdx-sec-storage > h3::before{content:"Storage & ";font-size:27px;font-weight:800;color:#12406F;} html body.single-product .cdx-sec-storage > h3::after{content:"Handling";font-size:27px;font-weight:800;color:#2F7FD8;} html body.single-product .cdx-sec-storage > div{margin:0 0 16px !important;width:56px !important;height:3px !important;} html body.single-product .cdx-sec-storage > p{font-size:15px !important;line-height:1.7 !important;color:#3C5A78 !important;margin:0 0 12px !important;} html body.single-product .cdx-sec-storage > p:last-child{margin-bottom:0 !important;} } /* ===== CODEX STANDARD - tile restyle (desktop) ===== */ /* prefix has to include section.qb-standalone + .qb-checklist: an existing block uses that exact shape with !important, and a shorter prefix loses on specificity */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-info-text .qb-heading{font-size:0 !important;line-height:1.05 !important;} html body.home section.qb-standalone .qb-info-text .qb-heading::before{content:"THE CODEX " !important;font-size:46px !important;font-weight:900 !important;letter-spacing:-.01em !important;color:#0A0A0A !important;} html body.home section.qb-standalone .qb-info-text .qb-heading::after{content:"STANDARD" !important;font-size:46px !important;font-weight:900 !important;letter-spacing:-.01em !important;color:#12B877 !important;} html body.home section.qb-standalone .qb-info-text .qb-desc{font-size:16px !important;line-height:1.6 !important;color:#5A605B !important;} html body.home section.qb-standalone .qb-checklist .qb-tile{padding:24px 92px 24px 24px !important;border-radius:16px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-acc-row{gap:18px !important;align-items:flex-start !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-icon{width:58px !important;height:58px !important;min-width:58px !important;border-radius:15px !important;display:flex !important;align-items:center !important;justify-content:center !important;background-image:none !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-icon svg{width:26px !important;height:26px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-title{font-size:19px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.02em !important;margin-bottom:6px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-title::before{font-weight:900 !important;margin-right:11px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-desc{font-size:14.5px !important;line-height:1.6 !important;color:#4A5049 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-desc::after{display:block !important;margin-top:10px !important;font-size:10px !important;font-weight:700 !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:#8C928D !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-acc-toggle{width:48px !important;height:48px !important;right:24px !important;top:50% !important;transform:translateY(-50%) !important;border-radius:50% !important;align-items:center !important;justify-content:center !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-acc-line{display:none !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-acc-plus{font-size:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-acc-plus::before{content:"\2192" !important;font-size:19px !important;line-height:1 !important;display:block !important;transition:transform .2s ease !important;} html body.home section.qb-standalone .qb-checklist .qb-tile input.qb-acc-checkbox:checked ~ .qb-acc-toggle .qb-acc-plus::before{transform:rotate(90deg) !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1){border:1px solid #12B87726 !important;border-left:4px solid #12B877 !important;background:linear-gradient(102deg, #12B8770F 0%, #fff 58%) !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-icon{background-color:#12B8771F !important;color:#12B877 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-icon svg{color:#12B877 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-title::before{content:"01" !important;color:#12B877 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-desc::after{content:"Batch verified · ≥99% purity" !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-acc-toggle{background:#12B87714 !important;border:1px solid #12B8773D !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-acc-plus::before{color:#12B877 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2){border:1px solid #2F7FD826 !important;border-left:4px solid #2F7FD8 !important;background:linear-gradient(102deg, #2F7FD80F 0%, #fff 58%) !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-icon{background-color:#2F7FD81F !important;color:#2F7FD8 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-icon svg{color:#2F7FD8 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-title::before{content:"02" !important;color:#2F7FD8 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-desc::after{content:"Fast fulfillment · Fully tracked" !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-acc-toggle{background:#2F7FD814 !important;border:1px solid #2F7FD83D !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-acc-plus::before{color:#2F7FD8 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3){border:1px solid #7C5CD626 !important;border-left:4px solid #7C5CD6 !important;background:linear-gradient(102deg, #7C5CD60F 0%, #fff 58%) !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-icon{background-color:#7C5CD61F !important;color:#7C5CD6 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-icon svg{color:#7C5CD6 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-title::before{content:"03" !important;color:#7C5CD6 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-desc::after{content:"HPLC verified · Endotoxin tested" !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-acc-toggle{background:#7C5CD614 !important;border:1px solid #7C5CD63D !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-acc-plus::before{color:#7C5CD6 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4){border:1px solid #C98A1626 !important;border-left:4px solid #C98A16 !important;background:linear-gradient(102deg, #C98A160F 0%, #fff 58%) !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-icon{background-color:#C98A161F !important;color:#C98A16 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-icon svg{color:#C98A16 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-title::before{content:"04" !important;color:#C98A16 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-desc::after{content:"QR on every vial · Instant lookup" !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-acc-toggle{background:#C98A1614 !important;border:1px solid #C98A163D !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-acc-plus::before{color:#C98A16 !important;} } /* ===== CODEX STANDARD - stronger copy, bigger icons, shield after STANDARD ===== */ /* the h3 keeps a real shield between the two pseudo halves, so the h3 becomes a flex row and order: puts it last */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-info-text .qb-heading{display:flex !important;align-items:center !important;flex-wrap:nowrap !important;} html body.home section.qb-standalone .qb-info-text .qb-heading::before{order:1 !important;content:"THE CODEX" !important;font-size:43px !important;margin-right:.26em !important;} html body.home section.qb-standalone .qb-info-text .qb-heading::after{order:2 !important;font-size:43px !important;} html body.home section.qb-standalone .qb-info-text .qb-heading svg{order:3 !important;margin-left:10px !important;flex:0 0 auto !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-title{color:#0A0A0A !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-desc{font-size:15px !important;font-weight:500 !important;color:#2E332F !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-desc::after{font-size:10.5px !important;font-weight:800 !important;color:#6E756F !important;letter-spacing:.14em !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-icon{width:62px !important;height:62px !important;min-width:62px !important;border-radius:16px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-icon svg{width:31px !important;height:31px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-icon{background-color:#12B8772E !important;border:1px solid #12B87759 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-icon{background-color:#2F7FD82E !important;border:1px solid #2F7FD859 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-icon{background-color:#7C5CD62E !important;border:1px solid #7C5CD659 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-icon{background-color:#C98A162E !important;border:1px solid #C98A1659 !important;} } /* ===== CODEX STANDARD - Archivo type + solid shield ===== */ /* the tiles were falling back to Arial; the icons already ship multi-colour detail, so nothing may repaint their fills */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-info-text .qb-heading::before,html body.home section.qb-standalone .qb-info-text .qb-heading::after{font-family:Archivo, "DM Sans", Arial, sans-serif !important;font-weight:900 !important;} html body.home section.qb-standalone .qb-info-text .qb-desc{font-family:Archivo, "DM Sans", Arial, sans-serif !important;font-weight:600 !important;color:#3A403B !important;} html body.home section.qb-standalone .qb-info-text .qb-heading svg{width:27px !important;height:27px !important;} html body.home section.qb-standalone .qb-info-text .qb-heading svg path:nth-of-type(1){fill:#12B877 !important;stroke:#12B877 !important;stroke-width:1.6 !important;stroke-linejoin:round !important;} html body.home section.qb-standalone .qb-info-text .qb-heading svg path:nth-of-type(2){fill:none !important;stroke:#FFFFFF !important;stroke-width:2.8 !important;stroke-linecap:round !important;stroke-linejoin:round !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-title{font-family:Archivo, "DM Sans", Arial, sans-serif !important;font-weight:900 !important;letter-spacing:.01em !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-desc{font-family:Archivo, "DM Sans", Arial, sans-serif !important;font-weight:700 !important;color:#222623 !important;font-size:15px !important;line-height:1.55 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-desc::after{font-family:Archivo, "DM Sans", Arial, sans-serif !important;font-weight:800 !important;color:#5F6661 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-icon svg path:nth-of-type(2){stroke:#FFFFFF !important;stroke-width:2.8 !important;stroke-linecap:round !important;stroke-linejoin:round !important;} } /* ===== CODEX STANDARD - smaller arrow, pinned to the top ===== */ /* anchored to top instead of top:50%/translateY, so it does not drift down when the panel opens */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile .qb-acc-toggle{width:38px !important;height:38px !important;right:22px !important;top:24px !important;bottom:auto !important;transform:none !important;} html body.home section.qb-standalone .qb-checklist .qb-tile input.qb-acc-checkbox:checked ~ .qb-acc-toggle{transform:none !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-acc-plus::before{font-size:16px !important;} } /* ===== CODEX STANDARD - centre the card copy ===== */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-desc{text-align:center !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-desc::after{text-align:center !important;} } /* ===== CODEX STANDARD - centred titles + fixed line breaks ===== */ /* .qb-tile-title is display:flex, so text-align does nothing - justify-content is what centres the number + title */ /* the two max-widths are measured wrap points, not guesses: wide enough for the wanted first line, too narrow for the next word */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-title{text-align:center !important;justify-content:center !important;align-items:center !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-desc{max-width:370px !important;margin-left:auto !important;margin-right:auto !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-desc{max-width:378px !important;margin-left:auto !important;margin-right:auto !important;} } /* ===== CODEX STANDARD - align the 01-04 numbers ===== */ /* the number is lifted out of flow and pinned at left:20px so all four line up, while the title text stays centred in the card */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-title{position:relative !important;justify-content:center !important;padding-left:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile .qb-tile-title::before{position:absolute !important;left:20px !important;top:50% !important;transform:translateY(-50%) !important;margin-right:0 !important;} } /* ===== TOP PICKS - molecule background ===== */ /* Soft molecule photo behind the Best Sellers row. A white veil sits on top of it as a second background layer so the cards and copy stay readable; raise/lower the two rgba alphas to fade the artwork. Product cards are untouched. */ html body.home section.tp-section{ background-color:#F4FAF7 !important; background-image:linear-gradient(rgba(255,255,255,.52),rgba(255,255,255,.52)),url('https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-4-2026-11_49_01-AM.webp') !important; background-size:auto,cover !important; background-position:center,center !important; background-repeat:no-repeat,no-repeat !important; } @media (max-width:849px){ html body.home section.tp-section{ background-image:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.66)),url('https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-4-2026-11_49_01-AM.webp') !important; background-position:center,center top !important; } } /* ===== TOP PICKS - tighter header + card spacing (desktop) ===== */ /* .tp-card-top is flex:1 inside a flex column, so every card stretches to the tallest one in the row. Any card with a 2-line blurb inherited the slack from the 3-line ones and dumped it as dead space between the test pills and the stat row. Clamping .tp-blurb to a fixed 2 lines makes every card the same height by construction, so the stat row and the buttons sit right under the pills. The rest is small margin trims on the section header. */ @media (min-width:1025px){ html body.home section.tp-section{padding-top:34px !important;padding-bottom:52px !important;} html body.home .tp-section .tp-head{margin-bottom:10px !important;} html body.home .tp-section .tp-eyebrow{margin-bottom:8px !important;} html body.home .tp-section .tp-sub{margin-top:6px !important;} html body.home .tp-track .tp-card .tp-blurb{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; min-height:36px !important; max-height:37px !important; margin-bottom:9px !important; } html body.home .tp-track .tp-card .tp-badges{margin-bottom:8px !important;} html body.home .tp-track .tp-card .tp-stats{ margin-top:6px !important; padding-top:8px !important; margin-bottom:8px !important; } } /* ===== TOP PICKS - cards lift off the background ===== */ /* Two things: (1) .tp-card is a flex item with the default min-width:auto, so its intrinsic content width (the two buttons) held it wider than its 25% basis and pushed the fourth card past the right edge of .tp-track below ~1500px -- min-width:0 lets the basis win so four cards always fit. (2) On the molecule background the old #F4F6F4 card was almost the same value as the ground, so the cards read as flat. Pure white + a hairline + a soft shadow separates them. */ @media (min-width:1025px){ html body.home .tp-track .tp-card{min-width:0 !important;} html body.home .tp-track .tp-card .tp-actions, html body.home .tp-track .tp-card .tp-actions .tp-btn{min-width:0 !important;} html body.home .tp-track .tp-card{ background:#FFFFFF !important; border:1px solid rgba(12,40,28,.07) !important; box-shadow:0 14px 34px rgba(12,40,28,.11), 0 3px 8px rgba(12,40,28,.06) !important; } } /* ===== TOP PICKS - test pill order: HPLC, Endotoxin, Contaminant ===== */ /* The markup order is Contaminant, Endotoxin, .tp-break, HPLC and cannot be changed from CSS, so flex order does the reordering. .tp-break keeps its slot between the second and third visible pill so the mobile 2+1 wrap still works. */ html body .tp-track .tp-card .tp-badges > *:nth-child(4){order:1 !important;} html body .tp-track .tp-card .tp-badges > *:nth-child(2){order:2 !important;} html body .tp-track .tp-card .tp-badges > *:nth-child(3){order:3 !important;} html body .tp-track .tp-card .tp-badges > *:nth-child(1){order:4 !important;} /* ===== PRODUCT PAGE - Certificate of Analysis card v2 ===== */ /* The card markup is rebuilt client-side by the "Codex COA card v2" script in Customizer > Flatsome > html_after_footer, which reads the original .cx3-coa values and re-emits them as the header lockup, the three trust rows, the purity block, a three-column Test/Specification/Result table and the ILS footer. These rules style that output; if the script is removed these selectors match nothing and the original .cx3-coa styling takes over again. */ html body.single-product .cx3-coa.cx3-coa2{background:#fff !important;border:1px solid rgba(12,40,28,.08) !important;border-radius:26px !important;max-width:1180px !important;box-shadow:0 22px 60px rgba(12,40,28,.10),0 4px 12px rgba(12,40,28,.05) !important;padding:26px 34px 22px !important;margin-left:auto;margin-right:auto;text-align:left !important;font-family:Archivo,"DM Sans",Arial,sans-serif;} html body.single-product .cx3-coa2 *{box-sizing:border-box;} html body.single-product .cx3-coa2 .cx2-top{display:flex;align-items:center;justify-content:space-between;gap:16px;} html body.single-product .cx3-coa2 .cx2-brand img{height:44px;width:auto;display:block;} html body.single-product .cx3-coa2 .cx2-kick{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#8A9A92;white-space:nowrap;} html body.single-product .cx3-coa2 .cx2-mid{display:grid;grid-template-columns:250px minmax(0,1fr) 252px;align-items:center;gap:18px;margin-top:2px;} html body.single-product .cx3-coa2 .cx2-feat{display:flex;align-items:center;gap:12px;margin:14px 0;} html body.single-product .cx3-coa2 .cx2-ficon{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#EAF7F1;color:#12B877;display:flex;align-items:center;justify-content:center;} html body.single-product .cx3-coa2 .cx2-ficon svg{width:22px;height:22px;} html body.single-product .cx3-coa2 .cx2-ftxt{display:flex;flex-direction:column;line-height:1.25;} html body.single-product .cx3-coa2 .cx2-ftxt b{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0F1A15;} html body.single-product .cx3-coa2 .cx2-ftxt i{font-style:normal;font-size:12.5px;color:#7C8B84;margin-top:2px;} html body.single-product .cx3-coa2 .cx2-core{text-align:center;} html body.single-product .cx3-coa2 .cx2-title{font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.5px;color:#0F1A15;margin:0 0 6px;text-transform:uppercase;} html body.single-product .cx3-coa2 .cx2-title em{font-style:normal;color:#12B877;} html body.single-product .cx3-coa2 .cx2-sub{font-size:15px;color:#5F6E67;margin-bottom:12px;} html body.single-product .cx3-coa2 .cx2-tag{display:inline-flex;align-items:center;gap:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.06em;color:#0E7A55;background:#F1FAF6;border:1px solid rgba(18,184,119,.28);border-radius:999px;padding:9px 20px;text-transform:uppercase;} html body.single-product .cx3-coa2 .cx2-bar{color:rgba(18,184,119,.45);} html body.single-product .cx3-coa2 .cx2-purity{display:flex;align-items:center;justify-content:center;gap:14px;background:#F7FAF8;border:1px solid rgba(12,40,28,.06);border-radius:18px;padding:18px 26px;margin:16px auto 0;max-width:380px;} html body.single-product .cx3-coa2 .cx2-check{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#12B877;display:flex;align-items:center;justify-content:center;} html body.single-product .cx3-coa2 .cx2-check svg{width:24px;height:24px;} html body.single-product .cx3-coa2 .cx2-pn{font-size:38px;font-weight:800;color:#0F1A15;line-height:1;letter-spacing:-1px;} html body.single-product .cx3-coa2 .cx2-pn em{font-style:normal;color:#12B877;} html body.single-product .cx3-coa2 .cx2-pl{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7C8B84;align-self:flex-end;padding-bottom:5px;} html body.single-product .cx3-coa2 .cx2-vial{display:flex;align-items:center;justify-content:center;min-height:230px;} html body.single-product .cx3-coa2 .cx2-vial img{max-height:262px;width:auto;max-width:100%;object-fit:contain;display:block;} html body.single-product .cx3-coa2 .cx2-tablewrap{margin-top:18px;overflow-x:auto;} html body.single-product .cx3-coa2 .cx2-table{width:100%;border-collapse:collapse;font-size:14px;} html body.single-product .cx3-coa2 .cx2-table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#7C8B84;padding:11px 18px;background:#F2F5F3;border:0;} html body.single-product .cx3-coa2 .cx2-table th:first-child{border-radius:10px 0 0 10px;} html body.single-product .cx3-coa2 .cx2-table th:last-child{border-radius:0 10px 10px 0;} html body.single-product .cx3-coa2 .cx2-table td{padding:12px 18px;color:#2A362F !important;border:0;} html body.single-product .cx3-coa2 .cx2-table tr.alt td{background:#F7F9F8;} html body.single-product .cx3-coa2 .cx2-table td:first-child{font-weight:600;color:#0F1A15 !important;width:34%;} html body.single-product .cx3-coa2 .cx2-table td:nth-child(2){width:33%;color:#5F6E67 !important;} html body.single-product .cx3-coa2 .cx2-table td:last-child{font-weight:700;color:#0F1A15 !important;} html body.single-product .cx3-coa2 .cx2-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;margin-top:20px;padding-top:6px;} html body.single-product .cx3-coa2 .cx2-lab{display:flex;align-items:center;gap:10px;} html body.single-product .cx3-coa2 .cx2-labmark{width:34px;height:34px;color:#1B7FC4;display:flex;align-items:center;justify-content:center;} html body.single-product .cx3-coa2 .cx2-labmark svg{width:30px;height:30px;} html body.single-product .cx3-coa2 .cx2-labtxt{display:flex;flex-direction:column;line-height:1;} html body.single-product .cx3-coa2 .cx2-labtxt b{font-size:20px;font-weight:800;letter-spacing:.02em;color:#1B7FC4;} html body.single-product .cx3-coa2 .cx2-labtxt i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;color:#1B7FC4;} html body.single-product .cx3-coa2 .cx2-note{font-size:12.5px;line-height:1.6;color:#8A9A92;} html body.single-product .cx3-coa2 .cx2-btn{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0E7A55;background:#fff;border:1px solid rgba(18,184,119,.5);border-radius:999px;padding:13px 24px;white-space:nowrap;text-decoration:none;transition:.18s;} html body.single-product .cx3-coa2 .cx2-btn svg{width:17px;height:17px;} html body.single-product .cx3-coa2 .cx2-btn:hover{background:#12B877;border-color:#12B877;color:#fff;} @media (max-width:849px){ html body.single-product .cx3-coa.cx3-coa2{padding:20px 18px !important;border-radius:20px !important;} html body.single-product .cx3-coa2 .cx2-mid{grid-template-columns:1fr;gap:10px;} html body.single-product .cx3-coa2 .cx2-vial{order:-1;min-height:0;} html body.single-product .cx3-coa2 .cx2-vial img{max-height:170px;} html body.single-product .cx3-coa2 .cx2-title{font-size:26px;} html body.single-product .cx3-coa2 .cx2-foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px;} } html body.single-product .cx3-coa2 .cx2-brand{display:flex;align-items:center;gap:11px;} html body.single-product .cx3-coa2 .cx2-brand img{height:42px;width:auto;display:block;} html body.single-product .cx3-coa2 .cx2-word{display:flex;flex-direction:column;line-height:1;} html body.single-product .cx3-coa2 .cx2-word b{font-size:21px;font-weight:800;letter-spacing:.13em;color:#0F1A15;} html body.single-product .cx3-coa2 .cx2-word i{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.42em;color:#0F1A15;margin-top:5px;padding-top:5px;border-top:1px solid rgba(15,26,21,.35);} html body.single-product .cx3-coa2 .cx2-title{border:0 !important;padding:0 !important;} html body.single-product .cx3-coa2 h3{border:0 !important;} /* ===== BUNDLE & SAVE - slimmer card (desktop) ===== */ /* The section used to break out to the full page width while everything around it sits in a narrower column. Capped to 1180px so it lines up with the COA card, with slightly tighter rows and smaller vials. */ @media (min-width:850px){ html body.single-product .cx3-pd .cx3-bs{max-width:1180px !important;margin-left:auto !important;margin-right:auto !important;} html body.single-product .cx3-pd .cx3-bs .cx3-bs-c{padding:17px 22px !important;} html body.single-product .cx3-pd .cx3-bs .cx3-vg img{width:76px !important;height:76px !important;} } /* ===== CODEX STANDARD - tile 01 photo background ===== */ /* JD supplied a wide vials banner for the Research-Grade Purity tile. It is the tile background (two layers: a left-to-right white veil over the photo), and the tile text goes left-aligned so it clears the vials on the right. Tiles 02-04 are unchanged until their own photos exist. */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1){ background-color:#FFFFFF !important; background-image:linear-gradient(to right,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 40%,rgba(255,255,255,.25) 64%,rgba(255,255,255,0) 80%),url("https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-4-2026-04_13_54-PM.webp") !important; background-size:auto,cover !important; background-position:center,center right !important; background-repeat:no-repeat,no-repeat !important; } html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-acc-row > div{max-width:none !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-title{position:static !important;justify-content:flex-start !important;padding-left:0 !important;text-align:left !important;gap:10px !important;white-space:nowrap !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-title::before{position:static !important;transform:none !important;left:auto !important;top:auto !important;margin-right:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-desc{text-align:left !important;margin-left:0 !important;margin-right:auto !important;max-width:330px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-desc::after{text-align:left !important;} } /* ===== CODEX STANDARD - reopen the accordion + centre tile 01 copy ===== */ /* Something with ID-level specificity and !important pins .qb-acc-panel to max-height:0, so NO tile opened - the arrows toggled the checkbox but nothing appeared. The :not(#a):not(#b):not(#c) on the section is only there to out-rank it. Also re-centres tile 01 body copy and its caps line, which had gone left-aligned when the photo background landed. */ @media (min-width:1025px){ html body.home section.qb-standalone:not(#a):not(#b):not(#c) .qb-checklist .qb-tile input.qb-acc-checkbox:checked ~ .qb-acc-panel{max-height:900px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-desc{text-align:center !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) .qb-tile-desc::after{text-align:center !important;} } /* ===== CODEX STANDARD - tile 01 arrow visible on the photo ===== */ /* The toggle circle is an 8%-alpha tint of the tile accent, which vanishes against the vials photo on tile 01. Solid white + a stronger green ring + a shadow, and it fills green on hover. Tiles 02-04 keep the tinted circle. */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) label.qb-acc-toggle{background:#FFFFFF !important;border:1.5px solid rgba(18,184,119,.55) !important;box-shadow:0 4px 14px rgba(12,40,28,.18) !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) label.qb-acc-toggle:hover{background:#12B877 !important;border-color:#12B877 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1) label.qb-acc-toggle:hover .qb-acc-plus::before{color:#fff !important;} } /* ===== CODEX STANDARD - arrow lined up with the title ===== */ /* The toggle sat 20px below the title line. top:24px -> 4px puts its centre on the title centre (40px from the tile top, measured), and right:22px -> 15px nudges it outward. It still holds that spot when a panel opens. All four tiles. */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile label.qb-acc-toggle{top:4px !important;right:15px !important;} } /* ===== CODEX STANDARD - photo backgrounds for tiles 02-04 ===== */ /* Same treatment as tile 01, with the photos JD supplied: 02 the blue Codex boxes, 03 the purple pipette, 04 the gold QR vial cap - matched to each tile accent. Each gets the white veil over the photo, the left-aligned title with the number back in flow, the centred description capped at 330px so it clears the subject on the right, and a solid white toggle circle ringed in the tile accent. */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2){background-color:#FFFFFF !important;background-image:linear-gradient(to right,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 38%,rgba(255,255,255,.25) 62%,rgba(255,255,255,0) 78%),url("https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-4-2026-04_14_52-PM.webp") !important;background-size:auto,cover !important;background-position:center,center right !important;background-repeat:no-repeat,no-repeat !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-acc-row > div{max-width:none !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-title{position:static !important;justify-content:flex-start !important;padding-left:0 !important;text-align:left !important;gap:10px !important;white-space:nowrap !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-title::before{position:static !important;transform:none !important;left:auto !important;top:auto !important;margin-right:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-desc{text-align:center !important;margin-left:0 !important;margin-right:auto !important;max-width:330px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-desc::after{text-align:center !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) label.qb-acc-toggle{background:#FFFFFF !important;border:1.5px solid rgba(47,127,216,.55) !important;box-shadow:0 4px 14px rgba(12,40,28,.18) !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) label.qb-acc-toggle:hover{background:#2F7FD8 !important;border-color:#2F7FD8 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) label.qb-acc-toggle:hover .qb-acc-plus::before{color:#fff !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3){background-color:#FFFFFF !important;background-image:linear-gradient(to right,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 38%,rgba(255,255,255,.25) 62%,rgba(255,255,255,0) 78%),url("https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-4-2026-04_16_27-PM.webp") !important;background-size:auto,cover !important;background-position:center,center right !important;background-repeat:no-repeat,no-repeat !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-acc-row > div{max-width:none !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-title{position:static !important;justify-content:flex-start !important;padding-left:0 !important;text-align:left !important;gap:10px !important;white-space:nowrap !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-title::before{position:static !important;transform:none !important;left:auto !important;top:auto !important;margin-right:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-desc{text-align:center !important;margin-left:0 !important;margin-right:auto !important;max-width:330px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-desc::after{text-align:center !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) label.qb-acc-toggle{background:#FFFFFF !important;border:1.5px solid rgba(124,92,214,.55) !important;box-shadow:0 4px 14px rgba(12,40,28,.18) !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) label.qb-acc-toggle:hover{background:#7C5CD6 !important;border-color:#7C5CD6 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) label.qb-acc-toggle:hover .qb-acc-plus::before{color:#fff !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4){background-color:#FFFFFF !important;background-image:linear-gradient(to right,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 38%,rgba(255,255,255,.25) 62%,rgba(255,255,255,0) 78%),url("https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-4-2026-04_16_57-PM.webp") !important;background-size:auto,cover !important;background-position:center,center right !important;background-repeat:no-repeat,no-repeat !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-acc-row > div{max-width:none !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-title{position:static !important;justify-content:flex-start !important;padding-left:0 !important;text-align:left !important;gap:10px !important;white-space:nowrap !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-title::before{position:static !important;transform:none !important;left:auto !important;top:auto !important;margin-right:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-desc{text-align:center !important;margin-left:0 !important;margin-right:auto !important;max-width:330px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-desc::after{text-align:center !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) label.qb-acc-toggle{background:#FFFFFF !important;border:1.5px solid rgba(201,138,22,.60) !important;box-shadow:0 4px 14px rgba(12,40,28,.18) !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) label.qb-acc-toggle:hover{background:#C98A16 !important;border-color:#C98A16 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) label.qb-acc-toggle:hover .qb-acc-plus::before{color:#fff !important;} } /* ===== CODEX STANDARD - centre the names on tiles 02-04 ===== */ /* Numbers stay exactly where they were: the ::before is lifted out of flow and pinned at left:0 of the title box (108px from the tile edge, where it already sat), while the row itself centres. Name mid and description mid both land at 273px. Tile 01 is deliberately untouched. */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-title{position:relative !important;justify-content:center !important;padding-left:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2) .qb-tile-title::before{position:absolute !important;left:0 !important;top:50% !important;transform:translateY(-50%) !important;margin-right:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-title{position:relative !important;justify-content:center !important;padding-left:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3) .qb-tile-title::before{position:absolute !important;left:0 !important;top:50% !important;transform:translateY(-50%) !important;margin-right:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-title{position:relative !important;justify-content:center !important;padding-left:0 !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4) .qb-tile-title::before{position:absolute !important;left:0 !important;top:50% !important;transform:translateY(-50%) !important;margin-right:0 !important;} } /* ===== CODEX STANDARD - photo stays put when a tile opens ===== */ /* With background-size:cover the photo re-scaled to fill the taller card every time a panel opened. Locking the photo layer to 100% auto fixes it at 576x192 (the images are all 1600x533) anchored right -10px, so it keeps the same crop it has closed and simply becomes a hero band across the top of the open card. */ @media (min-width:1025px){ html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(1){background-size:auto,100% auto !important;background-position:center,right -10px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(2){background-size:auto,100% auto !important;background-position:center,right -10px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(3){background-size:auto,100% auto !important;background-position:center,right -10px !important;} html body.home section.qb-standalone .qb-checklist .qb-tile:nth-child(4){background-size:auto,100% auto !important;background-position:center,right -10px !important;} } /* ===== CODEX STANDARD - dropdown start point + smooth close ===== */ /* Three things. (1) .qb-acc-panel-inner padding-top 14px -> 54px so the panel copy starts at 210px, clear of the 192px photo band instead of straddling its edge. (2) min-height:172px now applies to every tile ALWAYS. It used to come from a rule keyed on :has(:checked), so the instant a box was unchecked it vanished and the row snapped before the panel had finished animating - that was the "pushes up then comes down". (3) max-height was a blanket 900px against panels that are only 391-792px tall, so closing spent up to 60% of the transition doing nothing and then collapsed all at once. Now tuned per tile with ~70px of headroom, on an ease-out curve. Re-tune these if the panel copy grows. */ @media (min-width:1025px){ html body.home section.qb-standalone:not(#a):not(#b):not(#c) .qb-checklist .qb-tile{min-height:172px !important;} html body.home section.qb-standalone:not(#a):not(#b):not(#c) .qb-checklist .qb-tile .qb-acc-panel{transition:max-height .42s cubic-bezier(.25,.8,.35,1) !important;} html body.home section.qb-standalone:not(#a):not(#b):not(#c) .qb-checklist .qb-tile .qb-acc-panel-inner{padding-top:54px !important;} html body.home section.qb-standalone:not(#a):not(#b):not(#c) .qb-checklist .qb-tile:nth-child(1) input.qb-acc-checkbox:checked ~ .qb-acc-panel{max-height:700px !important;} html body.home section.qb-standalone:not(#a):not(#b):not(#c) .qb-checklist .qb-tile:nth-child(2) input.qb-acc-checkbox:checked ~ .qb-acc-panel{max-height:460px !important;} html body.home section.qb-standalone:not(#a):not(#b):not(#c) .qb-checklist .qb-tile:nth-child(3) input.qb-acc-checkbox:checked ~ .qb-acc-panel{max-height:560px !important;} html body.home section.qb-standalone:not(#a):not(#b):not(#c) .qb-checklist .qb-tile:nth-child(4) input.qb-acc-checkbox:checked ~ .qb-acc-panel{max-height:870px !important;} } /* ===== CODEX STANDARD - stop the tile flex flipping on close ===== */ /* THE actual cause of the close judder. Tiles are flex:1 1 0 in the column, which SHRINKS them from a natural 189px to 172px. A :has(:checked) rule then switched the open tile to flex:0 0 auto so it could size to its content. On uncheck that flipped back in one frame - the tile snapped from ~800px straight to 172px while the panel was still easing its max-height, which is the jump up and back down. Fix: every tile is flex:0 0 auto ALWAYS, so nothing flips and the tile height simply tracks the animating panel. Padding drops 44px -> 29px to put the natural height back at exactly the 172px flex used to force, so the closed row is pixel-identical: tiles 172, list 760, title mid and arrow mid both 40. */ @media (min-width:1025px){ html body.home section.qb-standalone:not(#a):not(#b):not(#c) .qb-checklist .qb-tile{flex:0 0 auto !important;padding-top:29px !important;padding-bottom:29px !important;min-height:172px !important;} } /* ===== FAQ - mockup restyle (desktop) ===== */ /* The markup already matched the mockup (section.faq > .section-head, .faq-filters with .faq-filter-btn, .faq-list > .faq-item > .faq-q[.faq-q-icon/.faq-q-text/ .plus-circle] + .faq-a) so this is CSS only. Adds: the "Support & Information" eyebrow and the intro line as ::before/::after on .section-head; squared icon tiles; 16px question type; a green left bar and tint on the open card; the four check chips under the first answer; and the list + filter row widened 900 -> 1040px. The 900px came from an explicit width, not max-width, so both are overridden, and the :not(#a) chain is only there to beat the page-block rule that sets it. */ @media (min-width:1025px){ html body.home section.faq:not(#a):not(#b):not(#c) .section-head::before{content:"\2014 Support & Information \2014" !important;display:block !important;font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:12px !important;font-weight:800 !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:#12B877 !important;margin-bottom:12px !important;} html body.home section.faq:not(#a):not(#b):not(#c) .section-head::after{content:"Everything you need to know about ordering, testing, shipping, and research use." !important;display:block !important;font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:15px !important;font-weight:500 !important;line-height:1.6 !important;color:#5B6B63 !important;margin-top:10px !important;} html body.home section.faq:not(#a):not(#b):not(#c) .faq-q-icon{border-radius:10px !important;} html body.home section.faq:not(#a):not(#b):not(#c) .faq-q-text{font-size:16px !important;font-weight:800 !important;} html body.home section.faq:not(#a):not(#b):not(#c) .faq-item.open{border-left:4px solid #12B877 !important;background:#FBFEFC !important;} html body.home section.faq:not(#a):not(#b):not(#c) .faq-list{width:min(1040px,92vw) !important;max-width:1040px !important;} html body.home section.faq:not(#a):not(#b):not(#c) .faq-filters{width:min(1040px,92vw) !important;max-width:1040px !important;margin-left:auto !important;margin-right:auto !important;} html body.home section.faq:not(#a):not(#b):not(#c) .faq-item.open .faq-a{max-height:320px !important;padding-bottom:6px !important;} html body.home section.faq:not(#a):not(#b):not(#c) .faq-item:nth-child(1) .faq-a::after{content:"\2713 \2265 99% PURITY \2713 HPLC VERIFIED \2713 THIRD-PARTY TESTED \2713 FULL COAs" !important;display:block !important;margin-top:16px !important;font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:10.5px !important;font-weight:800 !important;letter-spacing:.09em !important;color:#12B877 !important;white-space:nowrap !important;} } /* ===== PRODUCT PAGE - centre the wide blocks on any monitor ===== */ /* Bundle & Save, the trust strip and the COA card break out of the narrow right column using hardcoded px margins that were tuned for one viewport width, so on a wide monitor all three drift left of centre. The "Codex wide-block centring" script in html_after_footer measures each one and sets position:relative + left so its centre lands on the viewport centre, re-running on load and on resize. It uses left rather than margin so it never feeds back into layout. This rule caps the trust strip at 1180px so all three stack in one column. */ @media (min-width:850px){ html body.single-product .cx3-pd .cx3-strip{width:1180px !important;max-width:1180px !important;} } /* ===== HOME - Build a Bundle strip (under Top Picks) ===== */ html body.home section.cdx-bb{ position:relative; overflow:hidden; isolation:isolate; margin:0; padding:0; background-color:#075C38; background-image:url("https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-5-2026-06_18_40-PM.webp"); background-size:100% 100%; background-position:center; background-repeat:no-repeat; height:clamp(400px,27vw,510px); } html body.home section.cdx-bb::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(100deg, rgba(3,46,28,.34) 0%, rgba(3,46,28,0) 26%, rgba(3,46,28,0) 74%, rgba(3,46,28,.34) 100%); } html body.home .cdx-bb-inner{ position:absolute; left:0; right:0; top:0; bottom:19%; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 22px 0; text-align:center; } html body.home .cdx-bb-eyebrow{ display:flex; align-items:center; justify-content:center; gap:14px; font-family:"DM Mono",ui-monospace,monospace; font-weight:500; font-size:clamp(9px,.68vw,13px); letter-spacing:.36em; text-transform:uppercase; color:rgba(255,255,255,.82); margin:0 0 .55em; } html body.home .cdx-bb-eyebrow::before, html body.home .cdx-bb-eyebrow::after{ content:""; width:clamp(24px,2.6vw,50px); height:1px; background:rgba(255,255,255,.42); } html body.home .cdx-bb h2.cdx-bb-h{ margin:0 0 .16em; color:#fff; font-weight:800; line-height:1; font-size:clamp(27px,3.3vw,62px); letter-spacing:-.012em; text-transform:uppercase; text-shadow:0 4px 22px rgba(0,0,0,.28); } html body.home .cdx-bb h2.cdx-bb-h em{ font-style:normal; color:#39E884; } html body.home .cdx-bb-sub{ margin:0 0 .42em; color:#fff; font-weight:700; line-height:1.25; font-size:clamp(14px,1.35vw,25px); text-shadow:0 2px 14px rgba(0,0,0,.28); } html body.home .cdx-bb-sub em{ font-style:normal; color:#39E884; } html body.home .cdx-bb-meta{ margin:0 0 1.05em; color:rgba(255,255,255,.82); font-weight:500; font-size:clamp(10.5px,.86vw,16px); text-shadow:0 2px 10px rgba(0,0,0,.3); } html body.home .cdx-bb-meta i{ font-style:normal; opacity:.55; padding:0 .7em; } html body.home .cdx-bb-cards{ display:flex; justify-content:center; align-items:stretch; gap:clamp(8px,.75vw,14px); width:100%; max-width:min(900px,44%); margin:0 0 clamp(11px,1.15vw,21px); } html body.home .cdx-bb-card{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:clamp(7px,.6vw,12px); text-align:left; background:#F8FAF9; border-radius:clamp(7px,.6vw,11px); padding:clamp(8px,.72vw,14px) clamp(10px,.85vw,16px); box-shadow:0 8px 22px -14px rgba(0,0,0,.5); } html body.home .cdx-bb-ico{ flex:0 0 auto; width:clamp(28px,2.3vw,42px); height:clamp(28px,2.3vw,42px); border-radius:50%; background:#5DE9A2; color:#0A3D26; display:grid; place-items:center; } html body.home .cdx-bb-ico svg{ width:52%; height:52%; stroke:#0A3D26; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } html body.home .cdx-bb-card b{ display:block; font-size:clamp(11px,.88vw,16px); font-weight:800; color:#0A0A0A; letter-spacing:-.005em; text-transform:uppercase; line-height:1.18; white-space:nowrap; } html body.home .cdx-bb-card span span{ display:block; font-size:clamp(9.5px,.72vw,13px); color:#5C6A63; line-height:1.45; margin-top:.2em; white-space:nowrap; } /* --- Free BAC water card: liquid effect --- */ html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3){ position:relative; overflow:visible; isolation:isolate; background-color:#E2FAF6; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22150%22%3E%3Cfilter%20id%3D%22a%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.006%200.05%22%20numOctaves%3D%224%22%20seed%3D%2211%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.3%200%200%200%200%200.99%200%200%200%200%200.95%201.15%201.15%201.15%200%20-2.02%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22320%22%20height%3D%22150%22%20filter%3D%22url(%23a)%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22a%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.004%200.028%22%20numOctaves%3D%224%22%20seed%3D%223%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%201.05%201.05%201.05%200%20-1.98%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22480%22%20height%3D%22220%22%20filter%3D%22url(%23a)%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(36% 62% at 18% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 62%), radial-gradient(34% 58% at 76% 74%, rgba(94,234,212,.85) 0%, rgba(94,234,212,0) 66%), radial-gradient(46% 66% at 94% 16%, rgba(34,211,238,.7) 0%, rgba(34,211,238,0) 62%), linear-gradient(180deg,#F7FEFD 0%,#E6FBF7 46%,#CBF1EC 100%); background-size:320px 150px, 480px 220px, auto, auto, auto, auto; background-repeat:repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; animation:cdxRipple 16s linear infinite; box-shadow:0 0 0 1px rgba(34,211,238,.5), 0 0 18px -1px rgba(45,212,191,.65), 0 0 52px -12px rgba(34,211,238,.75), inset 0 1px 0 rgba(255,255,255,1), inset 0 -14px 26px -16px rgba(6,148,162,.5), 0 8px 22px -14px rgba(0,0,0,.5); } html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3)::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; background:linear-gradient(104deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.5) 48%, rgba(255,255,255,0) 64%); background-size:220% 100%; mix-blend-mode:screen; opacity:.6; animation:cdxSheen 8s ease-in-out infinite; } html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3)::after{ content:""; position:absolute; left:-9%; right:-9%; top:-41%; bottom:-32%; z-index:0; pointer-events:none; background:url("https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT_Image_Sep_5__2026__07_34_01_PM-removebg.webp") center center / 100% 100% no-repeat; filter:hue-rotate(-24deg) saturate(1.12) drop-shadow(0 0 9px rgba(34,211,238,.5)); opacity:.95; } html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3) > *{ position:relative; z-index:1; } html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3) b{ color:#04211A; text-shadow:0 1px 0 rgba(255,255,255,.85), 0 0 8px rgba(255,255,255,.65); } html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3) span span{ color:#0C4A3F; text-shadow:0 1px 0 rgba(255,255,255,.8), 0 0 7px rgba(255,255,255,.6); } html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3) .cdx-bb-ico{ background:#5DE9A2; box-shadow:0 0 0 3px rgba(255,255,255,.7), 0 0 18px -2px rgba(45,212,191,.95); } @keyframes cdxRipple{ from{ background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to{ background-position:320px -75px, -480px 110px, 0 0, 0 0, 0 0, 0 0; } } @keyframes cdxSheen{ 0%{ background-position:125% 0; } 55%,100%{ background-position:-45% 0; } } @media (prefers-reduced-motion:reduce){ html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3), html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3)::before{ animation:none; } } } @media (prefers-reduced-motion:reduce){ html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3)::before, html body.home .cdx-bb-cards .cdx-bb-card:nth-child(3)::after{ animation:none; } } html body.home a.cdx-bb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.65em; background:#08150F; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.13em; text-transform:uppercase; font-size:clamp(10.5px,.82vw,15px); padding:clamp(10px,.78vw,15px) clamp(24px,2.3vw,44px); border-radius:999px; border:1px solid rgba(255,255,255,.24); box-shadow:0 10px 24px -14px rgba(0,0,0,.6); transition:background .18s ease, border-color .18s ease; } html body.home a.cdx-bb-btn:hover{ background:#0E241A; border-color:rgba(120,245,180,.55); } html body.home .cdx-bb-trust{ position:absolute; left:0; right:0; bottom:0; height:19%; z-index:3; background:linear-gradient(180deg, rgba(3,44,27,.30) 0%, rgba(3,44,27,.46) 100%); border-top:1px solid rgba(255,255,255,.13); display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:0; padding:0 22px; } html body.home .cdx-bb-t{ display:flex; align-items:center; gap:clamp(6px,.6vw,12px); text-align:left; } html body.home .cdx-bb-t + .cdx-bb-t{ margin-left:clamp(16px,2.5vw,50px); padding-left:clamp(16px,2.5vw,50px); border-left:1px solid rgba(255,255,255,.2); } html body.home .cdx-bb-t svg{ width:clamp(16px,1.32vw,25px); height:clamp(16px,1.32vw,25px); stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; opacity:.92; } html body.home .cdx-bb-t b{ display:block; color:#fff; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:clamp(9.5px,.78vw,14px); line-height:1.2; } html body.home .cdx-bb-t span span{ display:block; color:rgba(255,255,255,.7); font-size:clamp(9px,.7vw,12.5px); margin-top:.2em; } html body.home .cdx-bb-vials{ position:absolute; inset:0; z-index:2; pointer-events:none; user-select:none; } html body.home .cdx-bb-vials img{ position:absolute; display:block; width:auto; max-width:none; transform-origin:50% 100%; filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)); } html body.home .cdx-bb-vials.vl img:nth-child(1){ left:-1.58%; bottom:30.02%; height:clamp(150px,15.4vw,340px); transform:none; } html body.home .cdx-bb-vials.vl img:nth-child(2){ left:5.51%; bottom:38.2%; height:clamp(142px,14.5vw,320px); transform:none; } html body.home .cdx-bb-vials.vr img:nth-child(1){ right:5.51%; bottom:38.2%; height:clamp(142px,14.5vw,320px); transform:none; } html body.home .cdx-bb-vials.vr img:nth-child(2){ right:-1.58%; bottom:30.02%; height:clamp(150px,15.4vw,340px); transform:none; } html body.home .cdx-bb-vials.vl img:nth-child(3){ left:12.08%; bottom:38.2%; height:clamp(142px,14.5vw,320px); transform:none; } html body.home .cdx-bb-vials.vr img:nth-child(3){ right:12.08%; bottom:38.2%; height:clamp(142px,14.5vw,320px); transform:none; } @media (max-width:1180px){ html body.home section.cdx-bb{ height:auto; background-image:none; background:linear-gradient(150deg,#0B6B3E 0%,#128F53 48%,#0C7443 100%); } html body.home .cdx-bb-vials{ display:none; } html body.home .cdx-bb-inner{ position:static; padding:38px 20px 22px; } html body.home .cdx-bb-cards{ max-width:820px; } html body.home .cdx-bb-trust{ position:static; height:auto; padding:16px 20px 20px; flex-wrap:wrap; gap:12px 0; } } @media (max-width:860px){ html body.home .cdx-bb-cards{ flex-wrap:wrap; } html body.home .cdx-bb-card{ flex:1 1 100%; max-width:400px; margin:0 auto; } html body.home .cdx-bb-card b, html body.home .cdx-bb-card span span{ white-space:normal; } html body.home .cdx-bb-t{ flex:1 1 100%; justify-content:center; } html body.home .cdx-bb-t + .cdx-bb-t{ margin-left:0; padding-left:0; border-left:0; } } @media (max-width:560px){ html body.home .cdx-bb-eyebrow{ letter-spacing:.26em; } html body.home a.cdx-bb-btn{ width:100%; } } /* ===== HOME - Find Your Research Area / 3D vial vault ===== */ html body.home section.cdx-vault{ --vg:#1FA876; --vink:#0F1A15; position:relative; overflow:hidden; padding:56px 0 39px; background-color:#F2F7F5; background-image: linear-gradient(90deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.17) 32%, rgba(255,255,255,0) 60%), url(/wp-content/uploads/2026/09/ChatGPT-Image-Sep-5-2026-09_46_58-AM.webp); background-size:auto, cover; background-position:center center, center 46%; background-repeat:no-repeat, no-repeat; font-family:Archivo,"DM Sans",Arial,sans-serif; } html body.home section.cdx-vault *{box-sizing:border-box;} html body.home .cdx-vault-inner{ width:calc(100% - 48px); max-width:var(--cdxWide,1240px); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; } /* ---------- left column ---------- */ html body.home .cdx-vault-eyebrow{ display:flex;align-items:center;gap:14px; margin:0 0 10px; font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--vg); } html body.home .cdx-vault-eyebrow::after{ content:"";flex:0 0 78px;height:1px;background:rgba(31,168,118,.42); } html body.home h2.cdx-vault-title{ margin:0 0 11px; font-family:inherit; font-size:clamp(28px,2.55vw,48px); line-height:1.1; font-weight:900; letter-spacing:-.018em; color:var(--vink); } html body.home h2.cdx-vault-title span{display:inline;color:var(--vg);} html body.home h2.cdx-vault-title span::before{content:" ";} html body.home .cdx-vault-left{align-self:start;margin-top:-8px;} html body.home .cdx-vault-sub{ margin:0 0 18px; max-width:560px; font-size:15.5px;line-height:1.55;font-weight:500;color:#4A5551; } /* tabs */ html body.home .cdx-vault-tabs{ display:flex;flex-wrap:wrap;gap:9px; max-width:560px; margin:0 0 20px; } html body.home button.cdx-vault-tab{ display:inline-flex;align-items:center;gap:8px; padding:9px 14px; border:1px solid rgba(15,26,21,.10); border-radius:999px; background:#fff; color:#26312C; font:800 12.5px/1 Archivo,"DM Sans",Arial,sans-serif; letter-spacing:.055em;text-transform:uppercase; box-shadow:0 2px 10px rgba(15,60,40,.05); cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease; } html body.home button.cdx-vault-tab:hover{transform:translateY(-1px);border-color:rgba(31,168,118,.45);box-shadow:0 6px 16px rgba(15,60,40,.09);} html body.home .cdx-vault-tab-ic{display:flex;width:16px;height:16px;color:var(--vg);} html body.home .cdx-vault-tab-ic svg{width:100%;height:100%;} html body.home .cdx-vault-tab-n{ min-width:19px;height:19px;padding:0 5px; display:inline-flex;align-items:center;justify-content:center; border-radius:999px;background:rgba(15,26,21,.07);color:#3B4641; font-size:11px;font-weight:800;letter-spacing:0; } html body.home button.cdx-vault-tab.is-on{ background:var(--vg);border-color:var(--vg);color:#fff; box-shadow:0 8px 20px rgba(31,168,118,.28); } html body.home button.cdx-vault-tab.is-on .cdx-vault-tab-ic{color:#fff;} html body.home button.cdx-vault-tab.is-on .cdx-vault-tab-n{background:rgba(255,255,255,.24);color:#fff;} /* detail card */ html body.home .cdx-vault-card{ position:relative; max-width:680px; padding:20px 24px; border:1px solid rgba(15,26,21,.075); border-radius:20px; background-color:#fff; background-image: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 44%, rgba(255,255,255,.9) 62%, rgba(255,255,255,.66) 84%, rgba(255,255,255,.58) 100%), url(/wp-content/uploads/2026/09/ChatGPT-Image-Sep-5-2026-11_33_40-AM.webp); background-size:auto, cover; background-position:center center, right 45%; background-repeat:no-repeat, no-repeat; box-shadow:0 20px 46px rgba(16,60,42,.09); } html body.home .cdx-vault-c-eyebrow{ margin:0 0 6px; font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--vg); } html body.home .cdx-vault-c-eyebrow i{font-style:normal;opacity:.55;} html body.home h3.cdx-vault-c-name{ margin:0 0 3px; font-family:inherit;font-size:27px;line-height:1.15;font-weight:900;letter-spacing:-.015em;color:var(--vink); } html body.home .cdx-vault-c-role{margin:0 0 9px;font-size:14px;font-weight:700;color:#66716C;} html body.home .cdx-vault-c-desc{margin:0 0 13px;font-size:14.5px;line-height:1.58;font-weight:500;color:#414B46;} html body.home ul.cdx-vault-chips{ list-style:none;margin:0 0 15px;padding:0; display:flex;flex-wrap:wrap;gap:8px; } html body.home ul.cdx-vault-chips li{ display:inline-flex;align-items:center;gap:9px; padding:8px 13px; border:1px solid rgba(15,26,21,.09); border-radius:13px;background:#fff; box-shadow:0 1px 2px rgba(16,60,42,.04); } html body.home .cdx-vault-chip-t{display:flex;flex-direction:column;line-height:1.25;} html body.home .cdx-vault-chip-t b{font-size:12.5px;font-weight:800;color:#25302B;} html body.home .cdx-vault-chip-t i{font-style:normal;font-size:10.5px;font-weight:600;color:#8A948F;letter-spacing:.005em;} html body.home .cdx-vault-c-badge{ position:absolute;top:16px;right:16px; width:62px;height:62px;display:block;pointer-events:none;opacity:1; filter:drop-shadow(0 0 10px rgba(255,255,255,.95)); } html body.home .cdx-vault-c-badge svg{width:100%;height:100%;display:block;} html body.home .cdx-vault-chip-ic{display:flex;width:17px;height:17px;flex:0 0 17px;color:var(--vg);} html body.home .cdx-vault-chip-ic svg{width:100%;height:100%;} html body.home .cdx-vault-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;} html body.home a.cdx-vault-cta{ display:inline-flex;align-items:center;gap:10px; padding:14px 24px;border-radius:999px; background:var(--vg);color:#fff !important; font-size:14.5px;font-weight:800;letter-spacing:.01em;text-decoration:none !important; box-shadow:0 12px 26px rgba(31,168,118,.30); transition:transform .2s ease,box-shadow .2s ease,background .2s ease; } html body.home a.cdx-vault-cta:hover{transform:translateY(-2px);background:#1a9468;box-shadow:0 16px 32px rgba(31,168,118,.36);} html body.home a.cdx-vault-cta svg{width:17px;height:17px;flex:0 0 17px;} html body.home a.cdx-vault-coa{ display:inline-flex;align-items:center;gap:8px; padding:12px 18px;border-radius:999px; border:1px solid rgba(31,168,118,.32); background:rgba(31,168,118,.08); color:#1A8A60 !important; font-size:13.5px;font-weight:800;letter-spacing:.01em; text-decoration:none !important; transition:background .2s ease,border-color .2s ease,transform .2s ease; } html body.home a.cdx-vault-coa:hover{background:rgba(31,168,118,.15);border-color:rgba(31,168,118,.55);transform:translateY(-1px);} html body.home a.cdx-vault-coa svg{width:15px;height:15px;flex:0 0 15px;} html body.home .cdx-vault-hook{display:none !important;} html body.home a.cdx-vault-coa.is-pending{border-color:rgba(15,26,21,.14);background:rgba(15,26,21,.04);color:#7E8883 !important;} html body.home a.cdx-vault-coa.is-pending:hover{background:rgba(15,26,21,.07);border-color:rgba(15,26,21,.2);} /* ---------- right column ---------- */ html body.home .cdx-vault-right{position:relative;} html body.home ul.cdx-vault-specs{ position:absolute;top:6px;right:0;z-index:4; list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:14px; } html body.home ul.cdx-vault-specs li{ display:flex;align-items:center;gap:10px; font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#233029; text-shadow:0 1px 2px rgba(255,255,255,.8); } html body.home .cdx-vault-spec-ic{display:flex;width:19px;height:19px;flex:0 0 19px;color:var(--vg);} html body.home .cdx-vault-spec-ic svg{width:100%;height:100%;} html body.home .cdx-vault-stage{ --px:0;--py:0; position:relative; height:566px; --vh:430px; --rh:62px; perspective:1100px; perspective-origin:50% 60%; outline:none; touch-action:pan-y; cursor:grab; } html body.home .cdx-vault-stage:active{cursor:grabbing;} html body.home .cdx-vault-floor{ position:absolute;left:50%;bottom:38px; width:880px;height:250px; transform:translate(calc(-50% + (var(--px) * 26px)),0); background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%); filter:blur(28px); pointer-events:none; } /* glass podium */ html body.home .cdx-vault-podium{ position:absolute;left:50%;bottom:30px; width:min(700px,100%);height:120px; transform:translateX(-50%); border-radius:50%; background: radial-gradient(62% 74% at 50% 34%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.26) 58%, rgba(233,247,241,.14) 100%); border:1.5px solid rgba(255,255,255,.92); box-shadow: inset 0 3px 0 rgba(255,255,255,.98), inset 0 -18px 34px rgba(176,216,200,.42), 0 26px 44px rgba(24,74,54,.20); -webkit-backdrop-filter:blur(2px) saturate(1.06); backdrop-filter:blur(2px) saturate(1.06); pointer-events:none; } html body.home .cdx-vault-podium::after{ content:"";position:absolute;left:6%;right:6%;top:56%;height:32px; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); filter:blur(7px); } html body.home .cdx-vault-rack{ position:absolute;left:50%;bottom:-4px; width:0;height:0; transform-style:preserve-3d; transform:rotateX(calc(var(--py) * -5deg)) rotateY(calc(var(--px) * 9deg)) scale(var(--rs,1)); transition:transform .35s ease; } html body.home button.cdx-vault-slot{ position:absolute;left:0;bottom:0; width:150px;margin-left:-75px;max-width:none; padding:0;border:0;background:none; transform-style:preserve-3d; transform-origin:50% calc(100% - var(--rh)); transform:translate3d(var(--x),var(--y,0px),var(--z)) rotateY(var(--ry)) scale(var(--s)); transition:transform .55s cubic-bezier(.2,.8,.3,1), opacity .45s ease, filter .45s ease; opacity:.9; cursor:pointer; } html body.home button.cdx-vault-slot.is-on{opacity:1;} html body.home img.cdx-vault-vial{ --h:calc(var(--vh) * var(--vs,1)); display:block;width:var(--h);height:var(--h);max-width:none; margin-left:calc(50% - var(--h) / 2); position:relative;top:var(--dy,0px); filter:drop-shadow(0 10px 14px rgba(16,60,42,.22)); } /* cropped reflection sitting on the podium */ html body.home .cdx-vault-reflect{ --h:calc(var(--vh) * var(--vs,1)); display:block;width:var(--h);height:var(--rh);overflow:hidden; margin-left:calc(50% - var(--h) / 2); opacity:.22; -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0) 88%); mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0) 88%); pointer-events:none; } html body.home .cdx-vault-reflect img{display:block;width:var(--h);height:var(--h);max-width:none;transform:scaleY(-1);} @keyframes cdxVaultIn{ from{opacity:0;transform:translate3d(var(--x),calc(var(--y,0px) + 26px),var(--z)) rotateY(var(--ry)) scale(calc(var(--s) * .92));} } @keyframes cdxVaultSway{ from{transform:rotate(-1.2deg);} to{transform:rotate(1.2deg);} } html body.home .cdx-vault-nav{ position:absolute;left:50%;top:2px;z-index:6; transform:translateX(-50%); display:flex;align-items:center;gap:10px; } html body.home button.cdx-vault-arrow{ width:30px;height:30px;min-height:0;min-width:0;padding:0;line-height:1;margin:0; display:inline-flex;align-items:center;justify-content:center; border:1px solid rgba(15,26,21,.13);border-radius:50%; background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); color:#78837E;cursor:pointer; box-shadow:0 1px 3px rgba(16,60,42,.06); transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; } html body.home button.cdx-vault-arrow svg{width:15px;height:15px;} html body.home button.cdx-vault-arrow:hover{ background:#fff;border-color:rgba(31,168,118,.5);color:var(--vg);transform:translateY(-1px); } html body.home button.cdx-vault-arrow:focus-visible{outline:2px solid rgba(31,168,118,.55);outline-offset:2px;} @media (max-width:999px){ html body.home .cdx-vault-nav{display:none;} } html body.home .cdx-vault-dots{display:none;justify-content:center;gap:8px;margin-top:6px;} html body.home button.cdx-vault-dot{ width:8px;height:8px;padding:0;border:0;border-radius:999px; background:rgba(15,26,21,.18);cursor:pointer;transition:background .2s ease,width .2s ease; } html body.home button.cdx-vault-dot.is-on{background:var(--vg);width:22px;} html body.home .cdx-vault-hint{ display:flex;align-items:center;justify-content:center;gap:9px; margin:2px 0 0; font-size:13px;font-weight:600;color:#69736E; } html body.home .cdx-vault-hint svg{width:17px;height:17px;flex:0 0 17px;color:#8A948F;} html body.home .cdx-vault-hint .cdx-hint-m{display:none;} /* ---------- responsive ---------- */ @media (max-width:1180px){ html body.home .cdx-vault-inner{gap:26px;} html body.home .cdx-vault-stage{height:470px;} html body.home .cdx-vault-rack{--rs:.84;bottom:5px;} html body.home .cdx-vault-podium{width:min(600px,100%);height:100px;bottom:26px;} html body.home .cdx-vault-floor{width:740px;bottom:32px;} } @media (max-width:999px){ html body.home section.cdx-vault{padding:58px 0 62px;} html body.home .cdx-vault-inner{grid-template-columns:minmax(0,1fr);gap:30px;} html body.home .cdx-vault-left{order:1;} html body.home .cdx-vault-right{order:2;} html body.home .cdx-vault-sub, html body.home .cdx-vault-tabs, html body.home .cdx-vault-card{max-width:none;} html body.home ul.cdx-vault-specs{ position:static;flex-direction:row;flex-wrap:wrap;justify-content:center; gap:16px;margin:0 0 14px; } html body.home .cdx-vault-tabs{ flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;padding-bottom:4px; } html body.home .cdx-vault-tabs::-webkit-scrollbar{display:none;} html body.home button.cdx-vault-tab{flex:0 0 auto;scroll-snap-align:start;} html body.home .cdx-vault-stage{height:320px;} html body.home .cdx-vault-rack{--rs:.55;bottom:2px;} html body.home .cdx-vault-podium{width:min(450px,96%);height:70px;bottom:14px;} html body.home .cdx-vault-floor{bottom:20px;width:460px;height:170px;} html body.home .cdx-vault-dots{display:flex;} html body.home .cdx-vault-hint .cdx-hint-d{display:none;} html body.home .cdx-vault-hint .cdx-hint-m{display:inline;} html body.home a.cdx-vault-cta{width:100%;justify-content:center;} html body.home .cdx-vault-actions{gap:14px;} html body.home a.cdx-vault-coa{width:100%;justify-content:center;} } @media (max-width:519px){ html body.home .cdx-vault-stage{height:262px;} html body.home .cdx-vault-rack{--rs:.44;bottom:2px;} html body.home .cdx-vault-podium{width:min(370px,96%);height:58px;bottom:10px;} html body.home .cdx-vault-floor{bottom:16px;width:380px;height:150px;} html body.home .cdx-vault-card{padding:20px 18px;} } @media (prefers-reduced-motion:reduce){ html body.home button.cdx-vault-slot, html body.home img.cdx-vault-vial, html body.home .cdx-vault-rack{animation:none !important;transition:none !important;} } /* ===== /HOME - Find Your Research Area / 3D vial vault ===== */ /* == QB standalone: wide-monitor left column == */ @media (min-width:1700px){ html body section.qb-standalone .qb-panel .qb-info .qb-info-text.qb-info-text.qb-info-text{ max-width:min(96%, 820px) !important; } html body section.qb-standalone .qb-panel .qb-info .qb-desc.qb-desc.qb-desc{ max-width:min(82%, 660px) !important; } } /* == VFO step card v2 (desktop) == */ @media (min-width:1025px){ html body section.vfo-section .vfo-step.vfo-v2 .vfo-text{ display:flex !important; flex-direction:column; gap:18px; align-items:stretch; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-badges{ display:none !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-hd{ display:grid; grid-template-columns:auto 1fr auto; column-gap:22px; align-items:center; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-hd-txt{ min-width:0; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-hd .vfo-num{ grid-column:1; margin:0 !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-ssl{ display:flex !important; align-items:center; gap:13px; padding-left:22px; border-left:1px solid rgba(10,10,10,.13); margin:0 !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-ssl .vfo-flow-dot{ width:38px !important; height:38px !important; min-width:38px; border-radius:11px !important; display:grid !important; place-items:center; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-ssl .vfo-flow-dot svg{ width:20px; height:20px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-ssl .vfo-flow-txt b{ display:block; font-size:12px; font-weight:800; letter-spacing:.085em; text-transform:uppercase; color:#0A0A0A; white-space:nowrap; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-ssl .vfo-flow-txt i{ display:block; font-style:normal; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#7A8A84; margin-top:2px; white-space:nowrap; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card{ display:grid !important; grid-template-columns:54px 1fr 34px; column-gap:14px; row-gap:1px; align-items:center; padding:15px 15px !important; margin:0 !important; border-radius:16px !important; background:#fff !important; border:1px solid rgba(10,10,10,.08) !important; box-shadow:0 8px 20px -16px rgba(0,0,0,.45) !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-badge-ico, html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-dot{ display:grid !important; place-items:center; grid-column:1; grid-row:1 / span 3; width:54px !important; height:54px !important; min-width:54px !important; border-radius:14px !important; margin:0 !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-badge-ico svg, html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-dot svg{ width:25px !important; height:25px !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > b{ grid-column:2; grid-row:1; font-size:15px; font-weight:800; color:#0A0A0A; line-height:1.3; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > span:not(.vfo-card-go){ grid-column:2; grid-row:2; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > em{ grid-column:2; grid-row:3; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > span:not(.vfo-card-go), html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > em{ font-size:13px; font-style:normal; color:#6B6960; line-height:1.4; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-txt{ grid-column:2; grid-row:1 / span 3; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-txt b{ display:block; font-size:15px; font-weight:800; color:#0A0A0A; line-height:1.3; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-txt i{ display:block; font-style:normal; font-size:13px; color:#6B6960; line-height:1.4; margin-top:3px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card-go{ grid-column:3; grid-row:1 / span 3; justify-self:end; width:34px; height:34px; border-radius:50%; background:#F3F6F5; border:1px solid rgba(10,10,10,.07); display:grid; place-items:center; color:#7F8D88; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card-go svg{ width:16px; height:16px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track{ display:flex; align-items:flex-start; justify-content:space-between; padding:4px 2px 0; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-node{ display:grid; justify-items:center; gap:9px; flex:0 0 auto; width:104px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-ico{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1.6px solid rgba(10,10,10,.14); color:#93A09B; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-ico svg{ width:21px; height:21px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-lbl{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#7F8D88; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-line{ flex:1 1 auto; height:1.6px; border-radius:2px; background:rgba(10,10,10,.13); margin-top:22px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-node.is-on .vfo-track-ico{ border-color:#17A97A; color:#12A26F; box-shadow:0 0 0 4px rgba(23,169,122,.10); } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-node.is-on .vfo-track-lbl{ color:#12A26F; } } /* == VFO step 01 visual + v2 visual stretch == */ html body section.vfo-section .vfo-step.c-green .vfo-visual{ background:url('https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-5-2026-09_09_50-PM.webp') center/cover no-repeat !important; } @media (min-width:1025px){ html body section.vfo-section .vfo-step.vfo-v2 .vfo-visual{ height:auto !important; min-height:320px; align-self:stretch !important; } } /* == VFO v2 odd-card span == */ @media (min-width:1025px){ html body section.vfo-section .vfo-step.vfo-v2 .vfo-cards-odd .vfo-card:last-child{ grid-column:1 / -1; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-hd.vfo-hd-nossl{ grid-template-columns:auto 1fr; } } /* == VFO v2 grid placement fix == */ @media (min-width:1025px){ html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-badge-ico, html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-dot{ grid-column:1 !important; grid-row:1 / span 3 !important; align-self:center !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > b{ grid-column:2 !important; grid-row:1 !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > span:not(.vfo-card-go){ grid-column:2 !important; grid-row:2 !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > em{ grid-column:2 !important; grid-row:3 !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-txt{ grid-column:2 !important; grid-row:1 / span 3 !important; align-self:center !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card-go{ grid-column:3 !important; grid-row:1 / span 3 !important; align-self:center !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-dot::before, html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-dot::after{ display:none !important; } } /* == VFO v2 tracker labels == */ @media (min-width:1025px){ html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-node{ width:124px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-lbl{ font-size:10.5px; letter-spacing:.085em; text-align:center; line-height:1.25; } } /* == VFO v2 live chip == */ @media (min-width:1025px){ html body section.vfo-section .vfo-step.vfo-v2 .vfo-hd.vfo-hd-live{ grid-template-columns:auto 1fr auto auto; column-gap:18px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-hd.vfo-hd-live.vfo-hd-nossl{ grid-template-columns:auto 1fr auto; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-hd .vfo-live{ margin:0 !important; align-self:center; } } /* == VFO v2 tracker animation == */ @media (min-width:1025px){ html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-line{ position:relative; overflow:hidden; background:rgba(10,10,10,.13) !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-fill{ position:absolute; left:0; top:0; right:0; bottom:0; display:block; transform:scaleX(0); transform-origin:left center; transition:transform 1.6s cubic-bezier(.33,.02,.28,1); border-radius:2px; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-node{ cursor:default; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-ico{ transition:border-color .55s ease, color .55s ease, box-shadow .55s ease, transform .45s ease; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-lbl{ transition:color .55s ease; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-node:hover .vfo-track-ico{ box-shadow:0 0 0 5px rgba(var(--tc),.14), 0 10px 26px -6px rgba(var(--tc),.55) !important; border-color:rgb(var(--tc)) !important; color:rgb(var(--tc)) !important; transform:translateY(-2px); } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-node:hover .vfo-track-lbl{ color:rgb(var(--tc)) !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-node.is-on .vfo-track-ico{ box-shadow:0 0 0 5px rgba(var(--tc),.14), 0 10px 26px -6px rgba(var(--tc),.55) !important; border-color:rgb(var(--tc)) !important; color:rgb(var(--tc)) !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-node.is-on .vfo-track-lbl{ color:rgb(var(--tc)) !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card:hover{ transform:translateY(-2px); border-color:rgba(var(--sc),.42) !important; box-shadow:0 14px 30px -14px rgba(var(--sc),.55) !important; } @media (prefers-reduced-motion:reduce){ html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-fill{ transition:none; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-ico, html body section.vfo-section .vfo-step.vfo-v2 .vfo-track-lbl, html body section.vfo-section .vfo-step.vfo-v2 .vfo-card{ transition:none; } } } /* == VFO v2 per-step icon tint == */ @media (min-width:1025px){ html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-badge-ico, html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-dot, html body section.vfo-section .vfo-step.vfo-v2 .vfo-ssl .vfo-flow-dot{ background:rgba(var(--sc),.12) !important; color:rgb(var(--sc)) !important; border-color:rgba(var(--sc),.18) !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-badge-ico svg, html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-dot svg, html body section.vfo-section .vfo-step.vfo-v2 .vfo-ssl .vfo-flow-dot svg{ color:inherit !important; stroke:currentColor !important; } html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-badge-ico svg *, html body section.vfo-section .vfo-step.vfo-v2 .vfo-card > .vfo-flow-dot svg *, html body section.vfo-section .vfo-step.vfo-v2 .vfo-ssl .vfo-flow-dot svg *{ stroke:currentColor !important; } } /* == VFO step 01 visual size == */ @media (min-width:1025px){ html body section.vfo-section .vfo-step.vfo-v2.c-green{ grid-template-columns:1fr 404px !important; } html body section.vfo-section .vfo-step.c-green .vfo-visual{ background-position:55% 50% !important; } } /* == QB standalone: wide-monitor heading + tile framing == */ @media (min-width:1700px){ html body section.qb-standalone .qb-panel .qb-info .qb-heading{ display:flex !important; justify-content:center !important; align-items:center; text-align:center !important; width:100%; } html body section.qb-standalone .qb-panel .qb-info .qb-heading h2{ text-align:center !important; } html body section.qb-standalone .qb-panel .qb-info .qb-checklist .qb-tile{ background-position:50% 50%, 100% -2.9vw !important; } } /* ===== VFO - Codex Standard background art: swap the Our Process / Verified From Order to Shipment art for the same PNG the Codex Standard panel uses. Page-block style sets it, so this needs the html body.home prefix. ===== */ html body.home section.vfo-section{ background-image:url('https://codexresearch.shop/wp-content/uploads/2026/09/ChatGPT-Image-Sep-5-2026-08_48_57-PM.webp') !important; background-size:100% auto !important; background-position:50% 0% !important; background-repeat:repeat-y !important; background-attachment:scroll !important; background-color:#F2F9F7 !important; } /* ===== VFO - Codex Standard typography (desktop 1025px+): port the Codex Standard panel's type system onto Our Process — Archivo 900 uppercase headline with the shield mark, Archivo 900 step titles, Archivo 700 #222623 body, solid accent step numbers. Page-block style owns these, so every rule needs the html body.home prefix. Mobile untouched. ===== */ @media (min-width:1025px){ html body.home section.vfo-section h2.vfo-title{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:43px !important;font-weight:900 !important;line-height:1.05 !important;letter-spacing:-.43px !important;text-transform:uppercase !important;color:#0A0A0A !important;} html body.home section.vfo-section h2.vfo-title span{font-weight:900 !important;color:#1FA876 !important;} html body.home section.vfo-section h2.vfo-title::after{content:"";display:inline-block;width:30px;height:30px;margin-left:12px;vertical-align:-5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z' fill='%231FA876'/%3E%3Cpath d='m9 12 2 2 4-4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;} html body.home section.vfo-section p.vfo-sub{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:15.5px !important;font-weight:700 !important;line-height:1.55 !important;color:#3A403C !important;} html body.home section.vfo-section .vfo-eyebrow{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:11px !important;font-weight:800 !important;letter-spacing:.16em !important;} html body.home section.vfo-section .vfo-step h3{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-weight:900 !important;font-size:30px !important;letter-spacing:-.3px !important;text-transform:uppercase !important;color:#0A0A0A !important;} html body.home section.vfo-section .vfo-step h3 span,html body.home section.vfo-section .vfo-step h3 span.vfo-hl2{font-weight:900 !important;} html body.home section.vfo-section .vfo-step .vfo-desc{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:15px !important;font-weight:700 !important;line-height:1.55 !important;color:#222623 !important;} html body.home section.vfo-section .vfo-step .vfo-pill{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:10.5px !important;font-weight:800 !important;letter-spacing:.14em !important;text-transform:uppercase !important;} html body.home section.vfo-section .vfo-step .vfo-num{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-weight:900 !important;letter-spacing:-.03em !important;} html body.home section.vfo-section .vfo-step.c-green .vfo-num{color:#1FA876 !important;} html body.home section.vfo-section .vfo-step.c-blue .vfo-num{color:#2F6FED !important;} html body.home section.vfo-section .vfo-step.c-orange .vfo-num{color:#D98200 !important;} html body.home section.vfo-section .vfo-step.c-purple .vfo-num{color:#6F42D9 !important;} html body.home section.vfo-section h4{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;letter-spacing:-.22px !important;color:#0A0A0A !important;} html body.home section.vfo-section .vfo-card,html body.home section.vfo-section .vfo-badge,html body.home section.vfo-section .vfo-trust{font-family:Archivo,"DM Sans",Arial,sans-serif !important;} } /* ===== VFO - trust panel restyle (desktop 1025px+): "Built on trust. Backed by science." panel gets the Codex Standard tile language — soft panel, four white cards with a 4px accent left bar and an accent wash, Archivo 900 uppercase labels. Page-block style owns it, hence the html body.home prefix. Mobile untouched. ===== */ @media (min-width:1025px){ html body.home section.vfo-section .vfo-trust{background:linear-gradient(180deg,#F7FBF9 0%,#FFFFFF 70%) !important;border:1px solid rgba(10,10,10,.08) !important;border-radius:20px !important;padding:34px 26px 30px !important;box-shadow:0 1px 2px rgba(10,10,10,.05),0 14px 34px rgba(10,10,10,.07) !important;} html body.home section.vfo-section .vfo-trust h4{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:26px !important;font-weight:900 !important;text-transform:uppercase !important;letter-spacing:-.26px !important;line-height:1.1 !important;color:#0A0A0A !important;margin-bottom:22px !important;} html body.home section.vfo-section .vfo-trust h4 span{color:#1FA876 !important;font-weight:900 !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-grid{gap:18px !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item{position:relative !important;background-color:#FFFFFF !important;border:1px solid rgba(10,10,10,.07) !important;border-radius:14px !important;padding:20px 16px 18px !important;overflow:hidden !important;box-shadow:0 1px 2px rgba(10,10,10,.05),0 8px 20px rgba(10,10,10,.06) !important;transition:transform .22s cubic-bezier(.25,.8,.35,1),box-shadow .22s,border-color .22s !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item::before{content:"" !important;position:absolute !important;left:0 !important;top:0 !important;bottom:0 !important;width:4px !important;border-radius:14px 0 0 14px !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item:hover{transform:translateY(-3px) !important;box-shadow:0 2px 4px rgba(10,10,10,.06),0 16px 32px rgba(10,10,10,.10) !important;} html body.home section.vfo-section .vfo-trust .vfo-tico{border-radius:13px !important;margin-bottom:11px !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item b{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:14.5px !important;font-weight:900 !important;text-transform:uppercase !important;letter-spacing:.02em !important;color:#0A0A0A !important;display:block !important;margin-bottom:5px !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item b + span{font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-size:12.5px !important;font-weight:700 !important;line-height:1.5 !important;color:#5F6661 !important;display:block !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-green::before{background:#1FA876 !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-green{background-image:linear-gradient(180deg,#1FA8760F 0%,rgba(255,255,255,0) 62%) !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-green:hover{border-color:#1FA87640 !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-blue::before{background:#2F6FED !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-blue{background-image:linear-gradient(180deg,#2F6FED0F 0%,rgba(255,255,255,0) 62%) !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-blue:hover{border-color:#2F6FED40 !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-orange::before{background:#D98200 !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-orange{background-image:linear-gradient(180deg,#D982000F 0%,rgba(255,255,255,0) 62%) !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-orange:hover{border-color:#D9820040 !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-purple::before{background:#6F42D9 !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-purple{background-image:linear-gradient(180deg,#6F42D90F 0%,rgba(255,255,255,0) 62%) !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-purple:hover{border-color:#6F42D940 !important;} } /* ===== VFO - trust panel counters (desktop 1025px+): the four trust cards lead with an animated figure instead of the icon chip. Markup is injected by the "Codex VFO trust counters" script in html_after_footer. Numbers hidden below 1025px so mobile keeps the icons. ===== */ @media (min-width:1025px){ html body.home section.vfo-section .vfo-trust .vfo-trust-item .vfo-tico{display:none !important;} html body.home section.vfo-section .vfo-trust .cdx-tstat{display:block !important;font-family:Archivo,"DM Sans",Arial,sans-serif !important;font-weight:900 !important;font-size:42px !important;line-height:1 !important;letter-spacing:-.02em !important;margin:2px 0 10px !important;font-variant-numeric:tabular-nums;} html body.home section.vfo-section .vfo-trust .cdx-tstat-n{font-style:normal !important;} html body.home section.vfo-section .vfo-trust .cdx-tstat-s{font-style:normal !important;font-size:.5em !important;font-weight:800 !important;vertical-align:.30em !important;margin-left:2px !important;} html body.home section.vfo-section .vfo-trust .cdx-tstat.is-word .cdx-tstat-s{font-size:.30em !important;letter-spacing:.12em !important;text-transform:uppercase !important;vertical-align:.72em !important;margin-left:5px !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-green .cdx-tstat{color:#1FA876 !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-blue .cdx-tstat{color:#2F6FED !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-orange .cdx-tstat{color:#D98200 !important;} html body.home section.vfo-section .vfo-trust .vfo-trust-item.t-purple .cdx-tstat{color:#6F42D9 !important;} } @media (max-width:1024px){html body.home section.vfo-section .vfo-trust .cdx-tstat{display:none !important;}} /* ===== VAULT - strip the section background photo (Sep 7 2026, JD's request): section.cdx-vault drops the lab-bench render and its white veil layers and sits on its base #F2F7F5. Everything else stays — the podium, floor glow, vials, and the detail card's OWN molecular-field photo are untouched. ===== */ html body.home section.cdx-vault{background-image:none !important;} /* ===== TOP PICKS - View Product hover (match Add to Cart) ===== The theme's link-hover rule was repainting the label #111, so the words vanished into the black pill. Pin the label white and give the pill the same lift the green Add to Cart button already has. */ @media (min-width:1025px){ html body .tp-track .tp-card .tp-btn-buy{ color:#FFFFFF !important; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease !important; } html body .tp-track .tp-card .tp-btn-buy:hover, html body .tp-track .tp-card .tp-btn-buy:focus, html body .tp-track .tp-card .tp-btn-buy:focus-visible, html body .tp-track .tp-card .tp-btn-buy:active{ color:#FFFFFF !important; background-color:#0A0A0A !important; transform:translateY(-2px) !important; box-shadow:0 12px 26px -8px rgba(10,10,10,.55) !important; filter:brightness(1.08) !important; } html body .tp-track .tp-card .tp-btn-buy:hover *, html body .tp-track .tp-card .tp-btn-buy:focus *, html body .tp-track .tp-card .tp-btn-buy:active *{ color:#FFFFFF !important; fill:#FFFFFF !important; } } /* ===== BUILD A BUNDLE - close the gap above the account band ===== Flatsome's .large-12.col carries a 30px padding-bottom, which left a strip of page background between the green .cdxbb block and section.cdxacct. Drop that padding and hand the same 30px to .cdxbb, so the green grows instead of the page shrinking. */ html body.page-id-4244 .content-area .row-main > .col{ padding-bottom:0 !important; } html body.page-id-4244 .cdxbb{ padding-bottom:30px !important; } /* ===== PRODUCT PAGE - COA card: raise the title and purity ===== .cx2-title carried a 44px margin-top, which pushed CERTIFICATE OF ANALYSIS and everything under it low against the vial and the left feature list. Dropping it lets .cx2-core shrink below the vial's height, so the grid's align-items:center then recentres the column. */ @media (min-width:850px){ html body .cx3-coa2 .cx2-title{ margin-top:10px !important; } html body .cx3-coa2 .cx2-purity{ margin-top:10px !important; } } /* ===== VAULT - mockup layout (Sep 9 2026, JD's screenshot): full-width head + guarantee row, one-row tab bar with sub-labels, card/stage split, vial labels, progress bar, 4-up trust footer. No section background photo. ===== */ @media (min-width:1000px){ html body.home section.cdx-vault{padding:54px 0 46px !important;} html body.home section.cdx-vault .cdx-vault-inner{display:block !important;max-width:1440px !important;margin:0 auto !important;padding:0 clamp(20px,2.6vw,52px) !important;} html body.home section.cdx-vault .cdx-vault-head{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:40px !important;} html body.home section.cdx-vault .cdx-vault-head-l{max-width:760px !important;} html body.home section.cdx-vault .cdx-vault-eyebrow{display:flex !important;align-items:center !important;gap:16px !important;margin:0 0 10px !important;font:800 11.5px/1 Archivo,"DM Sans",sans-serif !important;letter-spacing:.19em !important;text-transform:uppercase !important;color:#1FA876 !important;} html body.home section.cdx-vault .cdx-vault-eyebrow::after{content:"";display:block;width:150px;height:1px;background:rgba(31,168,118,.42);} html body.home section.cdx-vault h2.cdx-vault-title{font-weight:900 !important;font-family:Archivo,"DM Sans",sans-serif !important;line-height:1.02 !important;font-size:clamp(32px,3.7vw,62px) !important;letter-spacing:-1px !important;color:#0A0A0A !important;margin:0 0 14px !important;text-transform:none !important;} html body.home section.cdx-vault h2.cdx-vault-title span{display:inline !important;color:#1FA876 !important;} html body.home section.cdx-vault h2.cdx-vault-title span::before{content:" ";} html body.home section.cdx-vault .cdx-vault-sub{font:500 15.5px/1.62 Archivo,"DM Sans",sans-serif !important;color:#4A524D !important;max-width:640px !important;margin:0 !important;} html body.home section.cdx-vault .cdx-vault-head-r{display:flex !important;flex-direction:column !important;align-items:flex-end !important;gap:22px !important;flex:0 0 auto !important;} html body.home section.cdx-vault .cdx-vault-tag{margin:0 !important;text-align:right !important;font:800 9.5px/1.65 Archivo,"DM Sans",sans-serif !important;letter-spacing:.24em !important;text-transform:uppercase !important;color:#93A09A !important;} html body.home section.cdx-vault .cdx-vault-tag::after{content:"";display:block;width:52px;height:1px;background:rgba(10,10,10,.14);margin:8px 0 0 auto;} html body.home section.cdx-vault ul.cdx-vault-specs{position:static !important;display:flex !important;flex-direction:row !important;align-items:center !important;gap:0 !important;margin:0 !important;padding:0 !important;list-style:none !important;background:none !important;border:0 !important;box-shadow:none !important;transform:none !important;width:auto !important;max-width:none !important;} html body.home section.cdx-vault ul.cdx-vault-specs li{display:flex !important;align-items:center !important;gap:11px !important;padding:0 24px !important;margin:0 !important;background:none !important;border:0 !important;} html body.home section.cdx-vault ul.cdx-vault-specs li + li{border-left:1px solid rgba(10,10,10,.11) !important;} html body.home section.cdx-vault ul.cdx-vault-specs li:last-child{padding-right:0 !important;} html body.home section.cdx-vault .cdx-vault-spec-ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:#1FA876;flex:0 0 auto;} html body.home section.cdx-vault .cdx-vault-spec-ic svg{width:23px;height:23px;} html body.home section.cdx-vault .cdx-vault-spec-t{display:block;} html body.home section.cdx-vault .cdx-vault-spec-t b{display:block;font:900 11.5px/1.25 Archivo,"DM Sans",sans-serif;letter-spacing:.085em;text-transform:uppercase;color:#0A0A0A;} html body.home section.cdx-vault .cdx-vault-spec-t i{display:block;font:500 12.5px/1.4 Archivo,"DM Sans",sans-serif;font-style:normal;color:#6B736E;margin-top:2px;} } @media (min-width:1000px){ html body.home section.cdx-vault .cdx-vault-tabs{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:4px !important;max-width:none !important;width:100% !important;margin:30px 0 26px !important;padding:7px !important;background:#FFFFFF !important;border:1px solid rgba(10,10,10,.07) !important;border-radius:19px !important;box-shadow:0 10px 26px rgba(16,60,42,.07),0 2px 6px rgba(16,60,42,.05) !important;overflow:visible !important;} html body.home section.cdx-vault button.cdx-vault-tab{display:flex !important;align-items:center !important;gap:11px !important;width:100% !important;min-width:0 !important;min-height:0 !important;padding:11px 13px !important;margin:0 !important;background:transparent !important;border:0 !important;border-radius:13px !important;box-shadow:none !important;line-height:1 !important;text-align:left !important;transition:background .18s ease,color .18s ease !important;} html body.home section.cdx-vault button.cdx-vault-tab:hover{background:#F3F8F5 !important;} html body.home section.cdx-vault button.cdx-vault-tab.is-on{background:linear-gradient(158deg,#1C7A55 0%,#0B3B29 100%) !important;box-shadow:0 8px 18px rgba(12,60,42,.24) !important;} html body.home section.cdx-vault .cdx-vault-tab-ic{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;color:#1FA876;} html body.home section.cdx-vault .cdx-vault-tab-ic svg{width:20px;height:20px;} html body.home section.cdx-vault button.cdx-vault-tab.is-on .cdx-vault-tab-ic{color:#FFFFFF;} html body.home section.cdx-vault .cdx-vault-tab-t{display:block;min-width:0;flex:1 1 auto;} html body.home section.cdx-vault .cdx-vault-tab-t b{display:block;font:900 12.5px/1.2 Archivo,"DM Sans",sans-serif;letter-spacing:.055em;text-transform:uppercase;color:#0A0A0A;white-space:nowrap;} html body.home section.cdx-vault .cdx-vault-tab-t i{display:block;font:600 10.8px/1.3 Archivo,"DM Sans",sans-serif;font-style:normal;color:#75807A;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} html body.home section.cdx-vault button.cdx-vault-tab.is-on .cdx-vault-tab-t b{color:#FFFFFF;} html body.home section.cdx-vault button.cdx-vault-tab.is-on .cdx-vault-tab-t i{color:rgba(255,255,255,.74);} html body.home section.cdx-vault .cdx-vault-tab-n{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:#EAF4EF;color:#1FA876;font:800 11px/1 Archivo,"DM Sans",sans-serif;} html body.home section.cdx-vault button.cdx-vault-tab.is-on .cdx-vault-tab-n{background:rgba(255,255,255,.2);color:#FFFFFF;} html body.home section.cdx-vault .cdx-vault-body{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:clamp(22px,2.6vw,46px) !important;align-items:start !important;} html body.home section.cdx-vault .cdx-vault-left{align-self:start !important;margin-top:0 !important;} html body.home section.cdx-vault .cdx-vault-card{width:100% !important;max-width:none !important;padding:28px 30px 30px !important;border-radius:22px !important;} html body.home section.cdx-vault .cdx-vault-c-eyebrow{font:800 11px/1 Archivo,"DM Sans",sans-serif !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:#1FA876 !important;margin:0 0 12px !important;} html body.home section.cdx-vault h3.cdx-vault-c-name{font:900 clamp(30px,2.4vw,38px)/1.04 Archivo,"DM Sans",sans-serif !important;letter-spacing:-.5px !important;color:#0A0A0A !important;margin:0 0 8px !important;} html body.home section.cdx-vault .cdx-vault-c-role{font:700 16px/1.3 Archivo,"DM Sans",sans-serif !important;color:#4A524D !important;margin:0 0 14px !important;} html body.home section.cdx-vault .cdx-vault-c-desc{font:500 15px/1.62 Archivo,"DM Sans",sans-serif !important;color:#4A524D !important;margin:0 !important;max-width:460px !important;} html body.home section.cdx-vault ul.cdx-vault-chips{display:flex !important;align-items:center !important;gap:0 !important;flex-wrap:nowrap !important;margin:20px 0 0 !important;padding:18px 0 0 !important;border-top:1px solid rgba(10,10,10,.08) !important;list-style:none !important;} html body.home section.cdx-vault ul.cdx-vault-chips li{display:flex !important;align-items:center !important;gap:10px !important;padding:0 18px !important;margin:0 !important;background:none !important;border:0 !important;border-radius:0 !important;} html body.home section.cdx-vault ul.cdx-vault-chips li:first-child{padding-left:0 !important;} html body.home section.cdx-vault ul.cdx-vault-chips li + li{border-left:1px solid rgba(10,10,10,.1) !important;} html body.home section.cdx-vault .cdx-vault-chip-ic{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:#1FA876;flex:0 0 auto;} html body.home section.cdx-vault .cdx-vault-chip-ic svg{width:20px;height:20px;} html body.home section.cdx-vault .cdx-vault-chip-t b{display:block;font:900 11px/1.25 Archivo,"DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#0A0A0A;} html body.home section.cdx-vault .cdx-vault-chip-t i{display:block;font:500 11.5px/1.35 Archivo,"DM Sans",sans-serif;font-style:normal;color:#75807A;margin-top:2px;} } @media (min-width:1000px){ html body.home section.cdx-vault ul.cdx-vault-pills{display:flex !important;flex-wrap:wrap !important;gap:9px !important;margin:18px 0 0 !important;padding:0 !important;list-style:none !important;} html body.home section.cdx-vault ul.cdx-vault-pills li{padding:7px 14px !important;border-radius:999px !important;background:#F0F3F1 !important;color:#5F6661 !important;font:800 10.5px/1 Archivo,"DM Sans",sans-serif !important;letter-spacing:.1em !important;text-transform:uppercase !important;} html body.home section.cdx-vault ul.cdx-vault-pills li.is-mg{background:#E6F5EE !important;color:#1FA876 !important;} html body.home section.cdx-vault .cdx-vault-actions{display:flex !important;align-items:center !important;gap:12px !important;margin-top:22px !important;} html body.home section.cdx-vault a.cdx-vault-cta{padding:15px 26px !important;border-radius:999px !important;font:800 15px/1 Archivo,"DM Sans",sans-serif !important;} html body.home section.cdx-vault a.cdx-vault-coa{padding:14px 22px !important;border-radius:999px !important;background:#FFFFFF !important;border:1px solid rgba(10,10,10,.14) !important;color:#0A0A0A !important;font:800 14px/1 Archivo,"DM Sans",sans-serif !important;} html body.home section.cdx-vault a.cdx-vault-coa svg{color:#1FA876 !important;} html body.home section.cdx-vault .cdx-vault-right{position:relative !important;} html body.home section.cdx-vault .cdx-vault-nav{position:absolute !important;inset:0 !important;top:0 !important;left:0 !important;transform:none !important;display:block !important;pointer-events:none !important;z-index:6 !important;} html body.home section.cdx-vault button.cdx-vault-arrow{position:absolute !important;top:50% !important;transform:translateY(-50%) !important;pointer-events:auto !important;width:48px !important;height:48px !important;min-width:0 !important;min-height:0 !important;line-height:1 !important;margin:0 !important;padding:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:50% !important;background:#FFFFFF !important;border:1px solid rgba(10,10,10,.08) !important;box-shadow:0 8px 20px rgba(16,60,42,.13) !important;color:#4A524D !important;backdrop-filter:none !important;} html body.home section.cdx-vault button.cdx-vault-arrow:hover{color:#1FA876 !important;} html body.home section.cdx-vault button.cdx-vault-arrow svg{width:20px !important;height:20px !important;} html body.home section.cdx-vault .cdx-vault-nav button.cdx-vault-arrow[data-d="-1"]{left:2px !important;right:auto !important;} html body.home section.cdx-vault .cdx-vault-nav button.cdx-vault-arrow[data-d="1"]{right:2px !important;left:auto !important;} html body.home section.cdx-vault .cdx-vault-labels{position:relative !important;height:24px !important;margin:4px 0 0 !important;} html body.home section.cdx-vault .cdx-vault-label{position:absolute;left:50%;top:0;transform:translateX(calc(-50% + var(--lx,0px)));white-space:nowrap;font:700 13px/1.4 Archivo,"DM Sans",sans-serif;color:#7C8781;transition:color .2s ease;} html body.home section.cdx-vault .cdx-vault-label.is-on{color:#0A0A0A;font-weight:900;} html body.home section.cdx-vault .cdx-vault-label.is-on::after{content:"";display:block;width:34px;height:2px;background:#0A0A0A;border-radius:2px;margin:6px auto 0;} html body.home section.cdx-vault .cdx-vault-prog{display:flex !important;align-items:center !important;gap:18px !important;margin:20px 0 0 !important;} html body.home section.cdx-vault .cdx-vault-prog-c{flex:0 0 auto;font:800 12.5px/1 Archivo,"DM Sans",sans-serif;color:#93A09A;letter-spacing:.06em;} html body.home section.cdx-vault .cdx-vault-prog-c b{color:#0A0A0A;font-weight:900;} html body.home section.cdx-vault .cdx-vault-prog-c i{font-style:normal;} html body.home section.cdx-vault .cdx-vault-prog-track{flex:1 1 auto;height:3px;border-radius:3px;background:#DFE7E3;overflow:hidden;} html body.home section.cdx-vault .cdx-vault-prog-fill{display:block;height:100%;width:25%;border-radius:3px;background:#1FA876;transition:width .38s cubic-bezier(.4,0,.2,1);} html body.home section.cdx-vault .cdx-vault-prog-area{flex:0 0 auto;max-width:118px;text-align:right;font:800 10px/1.35 Archivo,"DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#93A09A;} html body.home section.cdx-vault .cdx-vault-nav-s{display:flex;align-items:center;gap:8px;flex:0 0 auto;} html body.home section.cdx-vault button.cdx-vault-arrow.is-sm{position:static !important;transform:none !important;width:32px !important;height:32px !important;box-shadow:0 3px 8px rgba(16,60,42,.1) !important;} html body.home section.cdx-vault button.cdx-vault-arrow.is-sm svg{width:15px !important;height:15px !important;} html body.home section.cdx-vault .cdx-vault-hint,html body.home section.cdx-vault .cdx-vault-dots{display:none !important;} html body.home section.cdx-vault ul.cdx-vault-foot{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:0 !important;margin:44px 0 0 !important;padding:28px 0 0 !important;border-top:1px solid rgba(10,10,10,.09) !important;list-style:none !important;} html body.home section.cdx-vault ul.cdx-vault-foot li{display:flex !important;align-items:center !important;gap:14px !important;padding:0 30px !important;margin:0 !important;} html body.home section.cdx-vault ul.cdx-vault-foot li:first-child{padding-left:0 !important;} html body.home section.cdx-vault ul.cdx-vault-foot li + li{border-left:1px solid rgba(10,10,10,.09) !important;} html body.home section.cdx-vault .cdx-vault-foot-ic{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 auto;color:#1FA876;} html body.home section.cdx-vault .cdx-vault-foot-ic svg{width:26px;height:26px;} html body.home section.cdx-vault .cdx-vault-foot-t b{display:block;font:900 12.5px/1.25 Archivo,"DM Sans",sans-serif;letter-spacing:.085em;text-transform:uppercase;color:#0A0A0A;} html body.home section.cdx-vault .cdx-vault-foot-t i{display:block;font:500 12.5px/1.4 Archivo,"DM Sans",sans-serif;font-style:normal;color:#6B736E;margin-top:3px;} } @media (max-width:999px){ html body.home section.cdx-vault .cdx-vault-inner{display:block !important;} html body.home section.cdx-vault .cdx-vault-head{display:block !important;} html body.home section.cdx-vault .cdx-vault-eyebrow{display:flex !important;align-items:center !important;gap:12px !important;} html body.home section.cdx-vault .cdx-vault-eyebrow::after{content:"";display:block;flex:1 1 auto;max-width:110px;height:1px;background:rgba(31,168,118,.42);} html body.home section.cdx-vault .cdx-vault-tag{display:none !important;} html body.home section.cdx-vault ul.cdx-vault-specs{position:static !important;display:flex !important;flex-wrap:wrap !important;gap:10px 0 !important;margin:16px 0 0 !important;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;transform:none !important;list-style:none !important;} html body.home section.cdx-vault ul.cdx-vault-specs li{display:flex !important;align-items:center !important;gap:9px !important;padding:0 14px 0 0 !important;margin:0 14px 0 0 !important;border:0 !important;background:none !important;} html body.home section.cdx-vault ul.cdx-vault-specs li + li{border-left:1px solid rgba(10,10,10,.11) !important;padding-left:14px !important;} html body.home section.cdx-vault .cdx-vault-spec-ic{width:20px;height:20px;color:#1FA876;} html body.home section.cdx-vault .cdx-vault-spec-ic svg{width:18px;height:18px;} html body.home section.cdx-vault .cdx-vault-spec-t b{display:block;font:900 10.5px/1.2 Archivo,"DM Sans",sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#0A0A0A;} html body.home section.cdx-vault .cdx-vault-spec-t i{display:block;font:500 11px/1.35 Archivo,"DM Sans",sans-serif;font-style:normal;color:#75807A;} html body.home section.cdx-vault .cdx-vault-tabs{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;max-width:none !important;gap:8px !important;padding:4px 0 8px !important;background:none !important;border:0 !important;box-shadow:none !important;scroll-snap-type:x mandatory !important;} html body.home section.cdx-vault button.cdx-vault-tab{flex:0 0 auto !important;scroll-snap-align:start !important;background:#FFFFFF !important;border:1px solid rgba(10,10,10,.08) !important;border-radius:999px !important;padding:9px 14px !important;gap:8px !important;} html body.home section.cdx-vault button.cdx-vault-tab.is-on{background:linear-gradient(158deg,#1C7A55,#0B3B29) !important;border-color:transparent !important;} html body.home section.cdx-vault .cdx-vault-tab-t i{display:none !important;} html body.home section.cdx-vault .cdx-vault-body{display:block !important;} html body.home section.cdx-vault .cdx-vault-labels{display:none !important;} html body.home section.cdx-vault .cdx-vault-nav-s{display:none !important;} html body.home section.cdx-vault .cdx-vault-prog{display:flex !important;align-items:center !important;gap:12px !important;margin:14px 0 0 !important;} html body.home section.cdx-vault ul.cdx-vault-pills{display:flex !important;flex-wrap:wrap !important;gap:8px !important;margin:14px 0 0 !important;padding:0 !important;list-style:none !important;} html body.home section.cdx-vault ul.cdx-vault-pills li{padding:6px 12px !important;border-radius:999px !important;background:#F0F3F1 !important;color:#5F6661 !important;font:800 10px/1 Archivo,"DM Sans",sans-serif !important;letter-spacing:.09em !important;text-transform:uppercase !important;} html body.home section.cdx-vault ul.cdx-vault-pills li.is-mg{background:#E6F5EE !important;color:#1FA876 !important;} html body.home section.cdx-vault ul.cdx-vault-foot{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px 14px !important;margin:30px 0 0 !important;padding:22px 0 0 !important;border-top:1px solid rgba(10,10,10,.09) !important;list-style:none !important;} html body.home section.cdx-vault ul.cdx-vault-foot li{display:flex !important;align-items:flex-start !important;gap:10px !important;padding:0 !important;border:0 !important;} html body.home section.cdx-vault .cdx-vault-foot-ic{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;color:#1FA876;} html body.home section.cdx-vault .cdx-vault-foot-ic svg{width:20px;height:20px;} html body.home section.cdx-vault .cdx-vault-foot-t b{display:block;font:900 11px/1.25 Archivo,"DM Sans",sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#0A0A0A;} html body.home section.cdx-vault .cdx-vault-foot-t i{display:block;font:500 11.5px/1.4 Archivo,"DM Sans",sans-serif;font-style:normal;color:#6B736E;margin-top:2px;} } @media (max-width:520px){ html body.home section.cdx-vault ul.cdx-vault-chips{flex-wrap:wrap !important;} html body.home section.cdx-vault ul.cdx-vault-foot{grid-template-columns:minmax(0,1fr) !important;} } /* ===== /VAULT - mockup layout ===== */ /* --- VAULT mockup layout: head proportions. The specs row is fixed-px wide (~643), so above 1440 it sits beside the headline and the nowrap title still fits; below that it stacks under the copy or the title would overflow its column. --- */ @media (min-width:1000px){ html body.home section.cdx-vault .cdx-vault-inner{max-width:1560px !important;} html body.home section.cdx-vault .cdx-vault-head{gap:32px !important;} html body.home section.cdx-vault .cdx-vault-head-l{flex:1 1 auto !important;min-width:0 !important;max-width:none !important;} html body.home section.cdx-vault .cdx-vault-head-r{flex:0 0 auto !important;} html body.home section.cdx-vault h2.cdx-vault-title{white-space:normal !important;} html body.home section.cdx-vault ul.cdx-vault-specs li{padding:0 14px !important;gap:9px !important;} html body.home section.cdx-vault .cdx-vault-spec-ic{width:21px !important;height:21px !important;} html body.home section.cdx-vault .cdx-vault-spec-ic svg{width:19px !important;height:19px !important;} html body.home section.cdx-vault .cdx-vault-spec-t b{font-size:10.5px !important;letter-spacing:.07em !important;} html body.home section.cdx-vault .cdx-vault-spec-t i{font-size:11.2px !important;} } @media (min-width:1000px) and (max-width:1339px){ html body.home section.cdx-vault .cdx-vault-head{display:block !important;} html body.home section.cdx-vault .cdx-vault-head-r{align-items:flex-start !important;margin-top:18px !important;} html body.home section.cdx-vault .cdx-vault-tag{display:none !important;} html body.home section.cdx-vault ul.cdx-vault-specs li:first-child{padding-left:0 !important;} } /* --- /VAULT head proportions --- */ /* --- VAULT tab bar: fit the sub-labels. Six tabs share the bar width, so the sub only has room above ~1500px; below that it is hidden and the tab falls back to icon + label + count. --- */ @media (min-width:1000px){ html body.home section.cdx-vault button.cdx-vault-tab{padding:11px 9px !important;gap:8px !important;} html body.home section.cdx-vault .cdx-vault-tab-ic{width:20px !important;height:20px !important;} html body.home section.cdx-vault .cdx-vault-tab-ic svg{width:19px !important;height:19px !important;} html body.home section.cdx-vault .cdx-vault-tab-n{width:20px !important;height:20px !important;font-size:10.5px !important;} html body.home section.cdx-vault .cdx-vault-tab-t i{font-size:10.4px !important;} } @media (min-width:1000px) and (max-width:1509px){ html body.home section.cdx-vault .cdx-vault-tab-t i{display:none !important;} html body.home section.cdx-vault button.cdx-vault-tab{gap:10px !important;} } /* --- /VAULT tab bar --- */ /* --- VAULT Sep 9 2026 pass 2: keep the head side-by-side down to 1280 (the guarantee row is tighter so the headline column stays wide), pull the tab bar up, and give each focus icon its own accent. Title size is driven by fitTitle() in JS against .cdx-vault-head-l, so no !important on font-size anywhere. --- */ @media (min-width:1000px){ html body.home section.cdx-vault ul.cdx-vault-specs li{padding:0 11px !important;gap:8px !important;} html body.home section.cdx-vault .cdx-vault-spec-ic{width:19px !important;height:19px !important;} html body.home section.cdx-vault .cdx-vault-spec-ic svg{width:17px !important;height:17px !important;} html body.home section.cdx-vault .cdx-vault-spec-t b{font-size:10px !important;letter-spacing:.06em !important;} html body.home section.cdx-vault .cdx-vault-spec-t i{font-size:10.6px !important;} html body.home section.cdx-vault .cdx-vault-head{gap:26px !important;} html body.home section.cdx-vault .cdx-vault-sub{margin:0 !important;max-width:600px !important;} html body.home section.cdx-vault .cdx-vault-tabs{margin:22px 0 24px !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(1) .cdx-vault-tab-ic{color:#1FA876 !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(2) .cdx-vault-tab-ic{color:#2F6FED !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(3) .cdx-vault-tab-ic{color:#6F42D9 !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(4) .cdx-vault-tab-ic{color:#D98200 !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(5) .cdx-vault-tab-ic{color:#D6336C !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(6) .cdx-vault-tab-ic{color:#0E9E9E !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(1) .cdx-vault-tab-n{background:#E6F5EE !important;color:#1FA876 !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(2) .cdx-vault-tab-n{background:#E7EEFD !important;color:#2F6FED !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(3) .cdx-vault-tab-n{background:#EFEAFB !important;color:#6F42D9 !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(4) .cdx-vault-tab-n{background:#FBF0E0 !important;color:#B86E00 !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(5) .cdx-vault-tab-n{background:#FBE9EF !important;color:#D6336C !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(6) .cdx-vault-tab-n{background:#E2F4F4 !important;color:#0E8E8E !important;} html body.home section.cdx-vault button.cdx-vault-tab.is-on .cdx-vault-tab-ic{color:#FFFFFF !important;} html body.home section.cdx-vault button.cdx-vault-tab.is-on .cdx-vault-tab-n{background:rgba(255,255,255,.2) !important;color:#FFFFFF !important;} } @media (max-width:999px){ html body.home section.cdx-vault .cdx-vault-tab:nth-child(1) .cdx-vault-tab-ic{color:#1FA876 !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(2) .cdx-vault-tab-ic{color:#2F6FED !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(3) .cdx-vault-tab-ic{color:#6F42D9 !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(4) .cdx-vault-tab-ic{color:#D98200 !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(5) .cdx-vault-tab-ic{color:#D6336C !important;} html body.home section.cdx-vault .cdx-vault-tab:nth-child(6) .cdx-vault-tab-ic{color:#0E9E9E !important;} html body.home section.cdx-vault button.cdx-vault-tab.is-on .cdx-vault-tab-ic{color:#FFFFFF !important;} } /* --- /VAULT pass 2 --- */ /* --- VAULT stage lift: the rack, podium, floor glow, vial labels and progress row are all anchored to the stage bottom, so shortening the stage raises the whole group. 566 - 61 = 505 puts the selected vial top edge level with the top of the detail card. Scoped above 1180 so the tablet/mobile stage heights are untouched. --- */ @media (min-width:1181px){ html body.home section.cdx-vault .cdx-vault-stage{height:483px !important;} } /* --- /VAULT stage lift --- */ /* --- VAULT pass 3: headline a notch smaller with a hard break so "Pick a focus." and "Meet the compounds." are always two lines; guarantee row dropped a little; vials raised another 22px (the vial PNG carries ~5% transparent padding at the top, so the img box was level with the card while the glass still sat 22px low). --- */ @media (min-width:1000px){ html body.home section.cdx-vault h2.cdx-vault-title span{display:block !important;} html body.home section.cdx-vault h2.cdx-vault-title span::before{content:none !important;} html body.home section.cdx-vault ul.cdx-vault-specs{margin-top:18px !important;} } /* --- /VAULT pass 3 --- */ /* --- VAULT pass 4: the detail card to JD’s second mockup - hairline rule after the FEATURED IN eyebrow, and the two actions stacked full width so the card runs down to the vial name row on the right. --- */ @media (min-width:1000px){ html body.home section.cdx-vault .cdx-vault-c-eyebrow{display:flex !important;align-items:center !important;gap:14px !important;} html body.home section.cdx-vault .cdx-vault-c-eyebrow::after{content:"";display:block;width:48px;height:1px;background:rgba(31,168,118,.5);flex:0 0 auto;} html body.home section.cdx-vault .cdx-vault-actions{display:block !important;margin-top:26px !important;} html body.home section.cdx-vault a.cdx-vault-cta, html body.home section.cdx-vault a.cdx-vault-coa{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;width:100% !important;box-sizing:border-box !important;padding:17px 22px !important;border-radius:999px !important;} html body.home section.cdx-vault a.cdx-vault-coa{margin-top:13px !important;padding:16px 22px !important;} html body.home section.cdx-vault .cdx-vault-actions .cdx-vault-hook{display:none !important;} } /* --- /VAULT pass 4 --- */ /* --- VAULT pass 4b: the card fills the row height so its bottom edge lands level with the vial-name / progress rows on the right, and the two buttons are pushed to the bottom of the card with margin-top:auto. --- */ @media (min-width:1000px){ html body.home section.cdx-vault .cdx-vault-body{align-items:stretch !important;} html body.home section.cdx-vault .cdx-vault-left{align-self:stretch !important;} html body.home section.cdx-vault .cdx-vault-card{display:flex !important;flex-direction:column !important;height:100% !important;box-sizing:border-box !important;} html body.home section.cdx-vault .cdx-vault-actions{margin-top:auto !important;padding-top:26px !important;} } /* --- /VAULT pass 4b --- */ /* --- VAULT pass 5: the "start a bundle" strip in the detail card, filling the space margin-top:auto opened up between the pills and the buttons. Links to /build-a-bundle/?cdx-pre=, which the "Codex bundle deep-link" script in html_after_footer turns into a click on that compound’s card. --- */ @media (min-width:1000px){ html body.home section.cdx-vault a.cdx-vault-bundle{display:flex !important;align-items:center !important;gap:14px !important;width:100% !important;box-sizing:border-box !important;margin:20px 0 0 !important;padding:14px 16px !important;border-radius:16px !important;background:linear-gradient(120deg,#EDF9F3 0%,#F6FCF9 100%) !important;border:1px solid rgba(31,168,118,.28) !important;text-decoration:none !important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important;} html body.home section.cdx-vault a.cdx-vault-bundle:hover{transform:translateY(-2px) !important;border-color:rgba(31,168,118,.55) !important;box-shadow:0 10px 22px rgba(16,60,42,.13) !important;} html body.home section.cdx-vault .cdx-vault-bundle-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:#FFFFFF;border:1px solid rgba(31,168,118,.22);color:#1FA876;} html body.home section.cdx-vault .cdx-vault-bundle-ic svg{width:21px;height:21px;} html body.home section.cdx-vault .cdx-vault-bundle-t{display:block;min-width:0;flex:1 1 auto;} html body.home section.cdx-vault .cdx-vault-bundle-t b{display:block;font:900 13.5px/1.25 Archivo,"DM Sans",sans-serif;letter-spacing:.02em;color:#0A0A0A;} html body.home section.cdx-vault .cdx-vault-bundle-t i{display:block;font:600 12px/1.35 Archivo,"DM Sans",sans-serif;font-style:normal;color:#3F7D66;margin-top:3px;} html body.home section.cdx-vault .cdx-vault-bundle-go{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:#1FA876;color:#FFFFFF;} html body.home section.cdx-vault .cdx-vault-bundle-go svg{width:14px;height:14px;} } @media (max-width:999px){ html body.home section.cdx-vault a.cdx-vault-bundle{display:flex !important;align-items:center !important;gap:11px !important;width:100% !important;box-sizing:border-box !important;margin:14px 0 0 !important;padding:12px 13px !important;border-radius:14px !important;background:#EDF9F3 !important;border:1px solid rgba(31,168,118,.28) !important;text-decoration:none !important;} html body.home section.cdx-vault .cdx-vault-bundle-ic{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;border-radius:10px;background:#FFFFFF;border:1px solid rgba(31,168,118,.22);color:#1FA876;} html body.home section.cdx-vault .cdx-vault-bundle-ic svg{width:18px;height:18px;} html body.home section.cdx-vault .cdx-vault-bundle-t{display:block;min-width:0;flex:1 1 auto;} html body.home section.cdx-vault .cdx-vault-bundle-t b{display:block;font:900 12.5px/1.25 Archivo,"DM Sans",sans-serif;color:#0A0A0A;} html body.home section.cdx-vault .cdx-vault-bundle-t i{display:block;font:600 11px/1.35 Archivo,"DM Sans",sans-serif;font-style:normal;color:#3F7D66;margin-top:2px;} html body.home section.cdx-vault .cdx-vault-bundle-go{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:#1FA876;color:#FFFFFF;} html body.home section.cdx-vault .cdx-vault-bundle-go svg{width:12px;height:12px;} } /* --- /VAULT pass 5 --- */ /* --- VAULT pass 6: pills moved onto the compound-name row, the three chips spread as equal centred thirds, and the description given the full card width now that it runs two sentences. --- */ @media (min-width:1000px){ html body.home section.cdx-vault .cdx-vault-c-head{display:flex !important;align-items:baseline !important;justify-content:space-between !important;gap:16px !important;flex-wrap:wrap !important;margin:0 0 8px !important;} html body.home section.cdx-vault h3.cdx-vault-c-name{margin:0 !important;flex:0 1 auto !important;} html body.home section.cdx-vault ul.cdx-vault-pills{display:flex !important;flex-wrap:wrap !important;justify-content:flex-end !important;gap:7px !important;margin:0 !important;padding:0 !important;flex:0 1 auto !important;list-style:none !important;} html body.home section.cdx-vault ul.cdx-vault-pills li{padding:6px 11px !important;border-radius:999px !important;background:#F0F3F1 !important;color:#5F6661 !important;font:800 9.5px/1 Archivo,"DM Sans",sans-serif !important;letter-spacing:.09em !important;text-transform:uppercase !important;white-space:nowrap !important;} html body.home section.cdx-vault ul.cdx-vault-pills li.is-mg{background:#E6F5EE !important;color:#1FA876 !important;} html body.home section.cdx-vault .cdx-vault-c-desc{max-width:none !important;font-size:14.5px !important;line-height:1.6 !important;} html body.home section.cdx-vault ul.cdx-vault-chips{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;align-items:center !important;gap:0 !important;margin:22px 0 0 !important;padding:18px 0 0 !important;border-top:1px solid rgba(10,10,10,.08) !important;} html body.home section.cdx-vault ul.cdx-vault-chips li{display:flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;padding:0 10px !important;} html body.home section.cdx-vault ul.cdx-vault-chips li:first-child{padding-left:10px !important;} } @media (max-width:999px){ html body.home section.cdx-vault .cdx-vault-c-head{display:flex !important;align-items:baseline !important;justify-content:space-between !important;gap:12px !important;flex-wrap:wrap !important;} html body.home section.cdx-vault ul.cdx-vault-pills{justify-content:flex-start !important;} } /* --- /VAULT pass 6 --- */ /* --- VAULT pass 6b: the h3 computed an explicit full-column width, which pushed the pills onto their own line, so it needs width:auto to shrink to its text. Spacing trimmed ~22px so even the worst case (CJC-1295 / Ipamorelin, whose long name DOES wrap the pills) stays inside the 563px row height set by the right column. --- */ @media (min-width:1000px){ html body.home section.cdx-vault h3.cdx-vault-c-name{width:auto !important;max-width:100% !important;flex:0 1 auto !important;} html body.home section.cdx-vault ul.cdx-vault-chips{margin-top:16px !important;padding-top:16px !important;} html body.home section.cdx-vault a.cdx-vault-bundle{margin-top:16px !important;} html body.home section.cdx-vault .cdx-vault-actions{padding-top:14px !important;} } /* --- /VAULT pass 6b --- */ /* --- VAULT pass 6c: below 1340 the description wraps to enough extra lines that the card can no longer fit the row height the right column sets, so in that range the card goes back to its natural height and stops chasing the progress row. Above 1340 the bottoms still line up exactly. --- */ @media (min-width:1000px) and (max-width:1339px){ html body.home section.cdx-vault .cdx-vault-body{align-items:start !important;} html body.home section.cdx-vault .cdx-vault-left{align-self:start !important;} html body.home section.cdx-vault .cdx-vault-card{height:auto !important;} html body.home section.cdx-vault .cdx-vault-actions{margin-top:18px !important;padding-top:0 !important;} } /* --- /VAULT pass 6c --- */ /* --- VAULT pass 7: the head-right corner is now an AREA panel (eyebrow, big count, blurb, View all, and a row of that area’s compound names) instead of the RUO tag and the three guarantee badges — the same three badges are already on the detail card. --- */ @media (min-width:1000px){ html body.home section.cdx-vault .cdx-vault-head-r{align-items:stretch !important;gap:0 !important;} html body.home section.cdx-vault .cdx-vault-area{width:clamp(360px,29vw,470px) !important;} html body.home section.cdx-vault .cdx-vault-area-eyebrow{margin:0 0 10px !important;font:800 11px/1 Archivo,"DM Sans",sans-serif !important;letter-spacing:.19em !important;text-transform:uppercase !important;color:#1FA876 !important;} html body.home section.cdx-vault .cdx-vault-area-row{display:flex !important;align-items:center !important;gap:18px !important;} html body.home section.cdx-vault .cdx-vault-area-count{flex:0 0 auto;display:block;padding-right:18px;border-right:1px solid rgba(10,10,10,.12);} html body.home section.cdx-vault .cdx-vault-area-count b{display:block;font:900 46px/1 Archivo,"DM Sans",sans-serif;letter-spacing:-2px;color:#1FA876;} html body.home section.cdx-vault .cdx-vault-area-count i{display:block;margin-top:4px;font:800 10px/1 Archivo,"DM Sans",sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#0A0A0A;} html body.home section.cdx-vault .cdx-vault-area-desc{flex:1 1 auto;min-width:0;font:500 13px/1.5 Archivo,"DM Sans",sans-serif;color:#5F6661;} html body.home section.cdx-vault a.cdx-vault-area-all{flex:0 0 auto;display:inline-flex !important;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;background:#1FA876;color:#FFFFFF !important;text-decoration:none !important;font:800 11px/1 Archivo,"DM Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;transition:background .18s ease,transform .18s ease;} html body.home section.cdx-vault a.cdx-vault-area-all:hover{background:#178B61;transform:translateY(-1px);} html body.home section.cdx-vault a.cdx-vault-area-all svg{width:15px;height:15px;} html body.home section.cdx-vault ul.cdx-vault-area-list{display:flex !important;flex-wrap:wrap !important;align-items:stretch !important;gap:0 !important;margin:20px 0 0 !important;padding:0 !important;list-style:none !important;border-top:1px solid rgba(10,10,10,.1) !important;} html body.home section.cdx-vault ul.cdx-vault-area-list li{flex:1 1 auto;min-width:0;margin:0;padding:0;} html body.home section.cdx-vault button.cdx-vault-area-b{display:block !important;width:100% !important;min-width:0 !important;min-height:0 !important;margin:0 !important;padding:11px 8px 9px !important;background:none !important;border:0 !important;border-bottom:2px solid transparent !important;border-radius:0 !important;line-height:1.2 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;font:700 12px/1.2 Archivo,"DM Sans",sans-serif !important;color:#7C8781 !important;transition:color .18s ease,border-color .18s ease !important;} html body.home section.cdx-vault button.cdx-vault-area-b:hover{color:#0A0A0A !important;} html body.home section.cdx-vault button.cdx-vault-area-b.is-on{color:#0A0A0A !important;font-weight:900 !important;border-bottom-color:#1FA876 !important;} } @media (max-width:999px){ html body.home section.cdx-vault .cdx-vault-area{width:100% !important;margin-top:16px !important;} html body.home section.cdx-vault .cdx-vault-area-eyebrow{margin:0 0 8px !important;font:800 10px/1 Archivo,"DM Sans",sans-serif !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:#1FA876 !important;} html body.home section.cdx-vault .cdx-vault-area-row{display:flex !important;align-items:center !important;gap:12px !important;} html body.home section.cdx-vault .cdx-vault-area-count{flex:0 0 auto;padding-right:12px;border-right:1px solid rgba(10,10,10,.12);} html body.home section.cdx-vault .cdx-vault-area-count b{display:block;font:900 32px/1 Archivo,"DM Sans",sans-serif;color:#1FA876;} html body.home section.cdx-vault .cdx-vault-area-count i{display:block;font:800 9px/1 Archivo,"DM Sans",sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#0A0A0A;margin-top:3px;} html body.home section.cdx-vault .cdx-vault-area-desc{flex:1 1 auto;min-width:0;font:500 11.5px/1.45 Archivo,"DM Sans",sans-serif;color:#5F6661;} html body.home section.cdx-vault a.cdx-vault-area-all{flex:0 0 auto;display:inline-flex !important;align-items:center;gap:7px;padding:10px 15px;border-radius:999px;background:#1FA876;color:#FFFFFF !important;text-decoration:none !important;font:800 10px/1 Archivo,"DM Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;} html body.home section.cdx-vault a.cdx-vault-area-all svg{width:13px;height:13px;} html body.home section.cdx-vault ul.cdx-vault-area-list{display:none !important;} } /* --- /VAULT pass 7 --- */ /* --- VAULT pass 7b: JD wanted the area panel level with the MIDDLE of the headline rather than with the eyebrow, and further left. Down: the panel is ~138px tall and the headline block starts 22px in, so panel-centre meets title-centre at margin-top = titleHeight/2 - 47, and titleHeight/2 is 1.02 * 3.7vw — hence the clamp. Left: widened rather than nudged, so the right edge stays flush with the tab bar and the trust footer. --- */ @media (min-width:1000px){ html body.home section.cdx-vault .cdx-vault-area{width:clamp(360px,32vw,560px) !important;margin-top:clamp(0px,calc(3.77vw - 47px),16px) !important;} } /* --- /VAULT pass 7b --- */ /* --- VAULT pass 8: the margin-top:auto that pins the card’s buttons to the bottom moved from .cdx-vault-actions to the bundle strip. The leftover space now opens ABOVE the strip (so it is no longer welded to the chips row) and the strip -> Explore Compound gap is a fixed 13px, the same as Explore Compound -> View COA. Below 1340 the card is natural height, so auto resolves to 0 and the gap needs a real number. --- */ @media (min-width:1000px){ html body.home section.cdx-vault a.cdx-vault-bundle{margin-top:auto !important;} html body.home section.cdx-vault .cdx-vault-actions{margin-top:13px !important;padding-top:0 !important;} } @media (min-width:1000px) and (max-width:1339px){ html body.home section.cdx-vault a.cdx-vault-bundle{margin-top:24px !important;} } @media (max-width:999px){ html body.home section.cdx-vault a.cdx-vault-bundle{margin-top:18px !important;} html body.home section.cdx-vault .cdx-vault-actions{margin-top:13px !important;padding-top:0 !important;} } /* --- /VAULT pass 8 --- */ /* --- VAULT pass 9: JD picked a PURE WHITE section. On #F2F7F5 the white card, white tab bar and the glass podium all read against a tint; on #FFFFFF they lose their ground, so each gets its edge back — card and tab-bar borders darkened, podium rim swapped from white to a mint hairline and its under-glow strengthened. --- */ html body.home section.cdx-vault{background:#FFFFFF !important;background-image:none !important;} @media (min-width:1000px){ html body.home section.cdx-vault .cdx-vault-tabs{border-color:rgba(10,10,10,.115) !important;box-shadow:0 12px 30px rgba(16,60,42,.09),0 2px 6px rgba(16,60,42,.06) !important;} html body.home section.cdx-vault .cdx-vault-card{border-color:rgba(15,26,21,.115) !important;box-shadow:0 22px 50px rgba(16,60,42,.11) !important;} } html body.home section.cdx-vault .cdx-vault-podium{border-color:rgba(31,168,118,.20) !important;box-shadow:0 3px 0 0 inset rgba(255,255,255,.98),0 -18px 34px rgba(150,205,183,.55) !important;} /* --- /VAULT pass 9 --- */ /* ===== CATALOG - tighten the stat row to its divider. The gap under the line was two things: 16px of padding-top on .cdx-card-stats, and the price carrying a 43px line box on a 27px font (line-height 1.6) — since the row is align-items:center, that leading was what set the row height and pushed the purity / reward blocks down. Font sizes are untouched; only the leading and the padding move, and the buttons and the card bottom follow up on their own. Page-content CSS loads after the Customizer, so these need the page-id prefix plus !important. ===== */ html body.page-id-2857 .cdx-card .cdx-card-stats{padding-top:8px !important;} html body.page-id-2857 .cdx-card .cdx-card-price{line-height:1.12 !important;} html body.page-id-2857 .cdx-card .cdx-card-foot{padding-top:20px !important;} /* ===== /CATALOG - tighten the stat row ===== */ /* ===== RELATED ROW - product-page twins of the body.home Top Picks card rules, generated from this sheet so the cards match by construction rather than by hand-copied values. Section-level rules (background art, head, eyebrow, view-all) were deliberately NOT twinned. ===== */ @media (prefers-reduced-motion: no-preference){html body.single-product .tp-card{transition: transform 0.25s, box-shadow 0.25s;}} @media (prefers-reduced-motion: no-preference){html body.single-product .tp-card:hover{transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.14) 0px 18px 38px;}} @media (min-width: 1025px){html body.single-product .tp-track .tp-card .tp-blurb{display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; min-height: 36px !important; max-height: 37px !important; margin-bottom: 9px !important;}} @media (min-width: 1025px){html body.single-product .tp-track .tp-card .tp-badges{margin-bottom: 8px !important;}} @media (min-width: 1025px){html body.single-product .tp-track .tp-card .tp-stats{margin-top: 6px !important; padding-top: 8px !important; margin-bottom: 8px !important;}} @media (min-width: 1025px){html body.single-product .tp-track .tp-card{min-width: 0px !important;}} @media (min-width: 1025px){html body.single-product .tp-track .tp-card .tp-actions, html body.single-product .tp-track .tp-card .tp-actions .tp-btn{min-width: 0px !important;}} @media (min-width: 1025px){html body.single-product .tp-track .tp-card{background: rgb(255, 255, 255) !important; border: 1px solid rgba(12, 40, 28, 0.07) !important; box-shadow: rgba(12, 40, 28, 0.11) 0px 14px 34px, rgba(12, 40, 28, 0.06) 0px 3px 8px !important;}} /* ===== /RELATED ROW twins ===== */ /* ===== RELATED ROW - the wrapper the rebuilt cards sit in on a product page. The theme row is left in the DOM but display:none so WooCommerce/Flatsome keep working; the .tp-track is inserted before it. Arrows reuse the .tp-arrow styling from the Top Picks base block. ===== */ html body.single-product .cdx-rel-tp{position:relative;max-width:100%;margin:0 auto;padding:0 0 8px;--bg:#f6f9f7;--green:#149954;--text:#12261c;--muted:#5c6f65;} html body.single-product .cdx-rel-tp .tp-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:none;padding:6px 4px 18px;margin:0;-ms-overflow-style:none;scrollbar-width:none;} html body.single-product .cdx-rel-tp .tp-track::-webkit-scrollbar{display:none;} html body.single-product .cdx-rel-tp .tp-track .tp-card{flex:0 0 auto;width:clamp(250px,calc(25% - 17px),300px);min-width:0;} html body.single-product .cdx-rel-nav{display:flex;justify-content:flex-end;gap:10px;margin:2px 4px 0;} html body.single-product .cdx-rel-nav .tp-arrow[disabled]{opacity:.35;pointer-events:none;} @media (max-width:1024px){ html body.single-product .cdx-rel-tp .tp-track .tp-card{width:clamp(240px,72vw,300px);} html body.single-product .cdx-rel-nav{display:none;} } /* ===== /RELATED ROW wrapper ===== */ /* --- RELATED ROW width fix: the base .tp-track caps itself at 1280px and the homepage widens it again with a min-width:1500px rule that was deliberately dropped when the twins were generated. The related track is a carousel inside the product container, so it just takes the full width. --- */ html body.single-product .cdx-rel-tp{width:100% !important;} html body.single-product .cdx-rel-tp .tp-track{max-width:none !important;width:100% !important;margin-left:0 !important;margin-right:0 !important;} /* --- /RELATED ROW width fix --- */ /* --- RELATED ROW card width: the base sets flex-basis:calc(25% - 16.5px), and with flex-basis set a plain width is ignored - which is why the cards ballooned to 462px on a wide monitor instead of matching Top Picks. Pin the BASIS, not the width. 302px is the Top Picks card width. --- */ @media (min-width:1025px){ html body.single-product .cdx-rel-tp .tp-track .tp-card{flex:0 0 302px !important;width:302px !important;max-width:302px !important;min-width:302px !important;} } @media (max-width:1024px){ html body.single-product .cdx-rel-tp .tp-track .tp-card{flex:0 0 auto !important;width:clamp(240px,72vw,300px) !important;max-width:300px !important;min-width:0 !important;} } /* --- /RELATED ROW card width --- */ /* ===== PRODUCT PAGE - Certificate of Analysis card v3 (Sep 9 2026, JD mockup). The block is rebuilt client-side by the "Codex COA card v3" script from the values already in each product page, so this is pure presentation - every number here comes from that page. ===== */ html body.single-product .cx3-coa2.cx3-coa3{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;} html body.single-product .cx3c{background:#FFFFFF;border:1px solid rgba(12,40,28,.07);border-radius:26px;box-shadow:0 26px 60px rgba(12,40,28,.09),0 4px 12px rgba(12,40,28,.05);padding:30px 34px 26px;font-family:Archivo,"DM Sans",sans-serif;color:#12261C;} html body.single-product .cx3c-top{display:flex;align-items:center;gap:22px;padding-bottom:22px;} html body.single-product .cx3c-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;} html body.single-product .cx3c-brand img{width:42px;height:42px;object-fit:contain;} html body.single-product .cx3c-word{display:block;border-left:1px solid rgba(12,40,28,.14);padding-left:12px;} html body.single-product .cx3c-word b{display:block;font:900 21px/1 Archivo,sans-serif;letter-spacing:.16em;color:#0A0A0A;} html body.single-product .cx3c-word i{display:block;font:700 9.5px/1 Archivo,sans-serif;font-style:normal;letter-spacing:.42em;color:#5C6F65;margin-top:5px;} html body.single-product .cx3c-kick{flex:1 1 auto;font:800 11px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#1FA876;} html body.single-product .cx3c-ids{display:flex;align-items:center;gap:0;flex:0 0 auto;background:#F3F8F5;border:1px solid rgba(12,40,28,.08);border-radius:999px;padding:5px;} html body.single-product .cx3c-ver{display:inline-flex;align-items:center;gap:7px;background:#1FA876;color:#FFFFFF;border-radius:999px;padding:8px 15px;font:800 11px/1 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;} html body.single-product .cx3c-ver svg{width:15px;height:15px;} html body.single-product .cx3c-id{padding:0 15px;font:700 11.5px/1 Archivo,sans-serif;letter-spacing:.06em;color:#3F5349;border-left:1px solid rgba(12,40,28,.1);margin-left:5px;} html body.single-product .cx3c-id:first-of-type{border-left:0;margin-left:0;} html body.single-product .cx3c-body{display:grid;grid-template-columns:300px minmax(0,1fr) 330px;gap:30px;align-items:start;} html body.single-product .cx3c-feat{display:flex;align-items:center;gap:13px;margin-bottom:18px;} html body.single-product .cx3c-fi{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;border-radius:13px;background:#EAF5F0;color:#1FA876;} html body.single-product .cx3c-fi svg{width:22px;height:22px;} html body.single-product .cx3c-ft b{display:block;font:900 12.5px/1.2 Archivo,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#0A0A0A;} html body.single-product .cx3c-ft i{display:block;font:500 13px/1.35 Archivo,sans-serif;font-style:normal;color:#5C6F65;margin-top:3px;} html body.single-product a.cx3c-pdf{display:flex;align-items:center;gap:13px;margin-top:22px;padding:16px 18px;border-radius:15px;background:#124F36;color:#FFFFFF !important;text-decoration:none !important;transition:background .18s ease,transform .18s ease;} html body.single-product a.cx3c-pdf:hover{background:#0C3B28;transform:translateY(-1px);} html body.single-product a.cx3c-pdf > svg{width:22px;height:22px;flex:0 0 auto;} html body.single-product a.cx3c-pdf > svg:last-child{width:18px;height:18px;margin-left:auto;} html body.single-product a.cx3c-pdf span{display:block;min-width:0;} html body.single-product a.cx3c-pdf b{display:block;font:900 12.5px/1.2 Archivo,sans-serif;letter-spacing:.07em;text-transform:uppercase;} html body.single-product a.cx3c-pdf i{display:block;font:500 11.5px/1.3 Archivo,sans-serif;font-style:normal;color:rgba(255,255,255,.72);margin-top:3px;} html body.single-product .cx3c-title{font:900 clamp(30px,3vw,46px)/1.05 Archivo,sans-serif !important;letter-spacing:-1px !important;text-transform:uppercase !important;color:#0A0A0A !important;margin:0 0 8px !important;} html body.single-product .cx3c-title em{font-style:normal;color:#1FA876;} html body.single-product .cx3c-sub{font:500 15px/1.4 Archivo,sans-serif !important;color:#5C6F65 !important;margin:0 0 20px !important;} html body.single-product .cx3c-purity{background:#F4FAF7;border:1px solid rgba(31,168,118,.16);border-radius:20px;padding:20px 24px 22px;} html body.single-product .cx3c-plabel{margin:0 0 6px !important;font:700 13px/1 Archivo,sans-serif !important;color:#3F5349 !important;} html body.single-product .cx3c-prow{display:flex;align-items:center;gap:18px;} html body.single-product .cx3c-pcheck{display:flex;align-items:center;justify-content:center;width:58px;height:58px;flex:0 0 auto;border-radius:50%;background:#1FA876;color:#FFFFFF;} html body.single-product .cx3c-pcheck svg{width:28px;height:28px;} html body.single-product .cx3c-pn{font:900 clamp(38px,4vw,58px)/1 Archivo,sans-serif;letter-spacing:-2px;color:#12603F;} html body.single-product .cx3c-meter{display:block;height:7px;border-radius:7px;background:#DCEDE5;margin:16px 0 10px;overflow:hidden;} html body.single-product .cx3c-meter i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#1FA876,#43C892);} html body.single-product .cx3c-pnote{margin:0 !important;font:800 10.5px/1 Archivo,sans-serif !important;letter-spacing:.15em !important;text-transform:uppercase !important;color:#6B7F75 !important;} html body.single-product .cx3c-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;} html body.single-product .cx3c-chip{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid rgba(12,40,28,.1);border-radius:14px;background:#FFFFFF;} html body.single-product .cx3c-ci{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;color:#1FA876;} html body.single-product .cx3c-ci svg{width:20px;height:20px;} html body.single-product .cx3c-ct b{display:block;font:900 14.5px/1.15 Archivo,sans-serif;color:#0A0A0A;} html body.single-product .cx3c-ct i{display:block;font:800 9.5px/1 Archivo,sans-serif;font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:#7C8781;margin-top:5px;} html body.single-product .cx3c-vialwrap{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;} html body.single-product img.cx3c-vial{max-width:100%;max-height:330px;width:auto;height:auto;filter:drop-shadow(0 18px 26px rgba(16,60,42,.18));} html body.single-product .cx3c-hex{position:absolute;top:8px;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:112px;height:126px;color:#1FA876;background:#EAF5F0;border:1px solid rgba(31,168,118,.3);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);text-align:center;} html body.single-product .cx3c-hex svg{width:22px;height:22px;} html body.single-product .cx3c-hex b{font:800 9px/1.35 Archivo,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#12603F;} html body.single-product .cx3c-script{position:absolute;left:0;bottom:34px;font:400 19px/1.25 Georgia,"Times New Roman",serif;font-style:italic;color:#1FA876;} html body.single-product .cx3c-tablewrap{margin-top:26px;border:1px solid rgba(12,40,28,.09);border-radius:18px;overflow:auto;} html body.single-product table.cx3c-table{width:100%;border-collapse:collapse;margin:0 !important;background:#FFFFFF;} html body.single-product table.cx3c-table th{text-align:left;padding:15px 20px;font:800 10.5px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7C8781;background:#FFFFFF;border-bottom:1px solid rgba(12,40,28,.09);} html body.single-product table.cx3c-table td{padding:15px 20px;font:500 14px/1.3 Archivo,sans-serif;color:#3F5349;border-bottom:1px solid rgba(12,40,28,.06);} html body.single-product table.cx3c-table tr:last-child td{border-bottom:0;} html body.single-product table.cx3c-table td.cx3c-t{font-weight:800;color:#0A0A0A;} html body.single-product table.cx3c-table tr.is-hi td{background:#F2FAF6;} html body.single-product table.cx3c-table td.cx3c-r.is-hi{font-weight:900;color:#12603F;} html body.single-product .cx3c-st{display:inline-flex;align-items:center;gap:7px;font:800 11px/1 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase;} html body.single-product .cx3c-st svg{width:16px;height:16px;} html body.single-product .cx3c-st.is-pass{color:#1FA876;} html body.single-product .cx3c-st.is-rep{color:#7C8781;} html body.single-product .cx3c-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;padding-top:24px;margin-top:4px;} html body.single-product .cx3c-lab{display:flex;align-items:center;gap:11px;padding-right:26px;border-right:1px solid rgba(12,40,28,.1);} html body.single-product .cx3c-labmark{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:#2F6FED;} html body.single-product .cx3c-labmark svg{width:30px;height:30px;} html body.single-product .cx3c-labname b{display:block;font:900 17px/1 Archivo,sans-serif;color:#2F6FED;} html body.single-product .cx3c-labname i{display:block;font:700 9.5px/1 Archivo,sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#2F6FED;margin-top:4px;} html body.single-product .cx3c-legal{margin:0 !important;font:500 12.5px/1.5 Archivo,sans-serif !important;color:#7C8781 !important;} html body.single-product .cx3c-bv{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid rgba(12,40,28,.1);border-radius:16px;background:#FFFFFF;} html body.single-product .cx3c-bvi{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:#EAF5F0;color:#1FA876;} html body.single-product .cx3c-bvi svg{width:20px;height:20px;} html body.single-product .cx3c-bvt b{display:block;font:900 12px/1.2 Archivo,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#0A0A0A;} html body.single-product .cx3c-bvt i{display:block;font:500 12.5px/1.3 Archivo,sans-serif;font-style:normal;color:#7C8781;margin-top:3px;} @media (max-width:1100px){ html body.single-product .cx3c{padding:22px 18px 20px;border-radius:20px;} html body.single-product .cx3c-body{grid-template-columns:minmax(0,1fr);gap:22px;} html body.single-product .cx3c-vialwrap{min-height:0;order:-1;} html body.single-product img.cx3c-vial{max-height:230px;} html body.single-product .cx3c-hex{width:88px;height:100px;top:0;} html body.single-product .cx3c-script{position:static;display:block;margin-top:10px;text-align:center;} html body.single-product .cx3c-top{flex-wrap:wrap;gap:12px;} html body.single-product .cx3c-kick{flex:1 1 100%;order:3;} html body.single-product .cx3c-foot{grid-template-columns:minmax(0,1fr);gap:16px;} html body.single-product .cx3c-lab{border-right:0;padding-right:0;} } @media (max-width:600px){ html body.single-product .cx3c-chips{grid-template-columns:minmax(0,1fr);} html body.single-product table.cx3c-table th,html body.single-product table.cx3c-table td{padding:12px 14px;font-size:13px;} } /* ===== /COA card v3 ===== */ /* --- COA card v3 fit pass: the block lives inside the product summary column and is centred out to 1180px, not the ~1540px of the mockup, so the three columns are narrower. Rail and vial trimmed to give the headline room, headline sized to fit that column on one line, and the script line moved out from under the vial (it was overlapping the artwork). --- */ @media (min-width:1101px){ html body.single-product .cx3c-body{grid-template-columns:258px minmax(0,1fr) 286px !important;gap:26px !important;} html body.single-product .cx3c-title{font-size:clamp(24px,2.1vw,33px) !important;letter-spacing:-.6px !important;white-space:nowrap !important;} html body.single-product a.cx3c-pdf b{font-size:11.5px;} html body.single-product a.cx3c-pdf i{font-size:11px;} html body.single-product .cx3c-vialwrap{flex-direction:column;justify-content:flex-start;min-height:0;padding-top:4px;} html body.single-product img.cx3c-vial{max-height:250px;} html body.single-product .cx3c-hex{position:static;margin:14px auto 0;width:104px;height:118px;background:#E4F3EC;border-color:rgba(31,168,118,.42);} html body.single-product .cx3c-script{position:static;display:block;margin:12px 0 0;text-align:center;font-size:17px;} html body.single-product .cx3c-fi{width:42px;height:42px;border-radius:12px;} html body.single-product .cx3c-fi svg{width:20px;height:20px;} html body.single-product .cx3c-feat{margin-bottom:15px;gap:11px;} html body.single-product .cx3c-ft b{font-size:11.5px;} html body.single-product .cx3c-ft i{font-size:12px;} html body.single-product .cx3c-ct b{white-space:nowrap;} html body.single-product .cx3c-chip{padding:12px;gap:8px;} } /* --- /COA card v3 fit pass --- */ /* ===== COA card v4 (Sep 9 2026 mockup): title block moved into the middle column with a small eyebrow pill, the COA id and LOT as compact mint pills under the sub-line, one horizontal purity bar with a PASSED verdict, a big vial on the lab backdrop, spec-before-method table, download / view-original buttons in the footer and a four-item strip under the card. Supersedes the v3 rules above; the v3 classes that no longer exist (chips, hex, rail PDF button, meter) are simply unused. ===== */ html body.single-product .cx3c{padding:26px 30px 22px !important;} html body.single-product .cx3c-top{align-items:flex-start !important;padding-bottom:6px !important;} html body.single-product .cx3c-kick{flex:1 1 auto;text-align:right;font:800 10.5px/1 Archivo,sans-serif !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:#8A968F !important;} html body.single-product .cx3c-body{grid-template-columns:274px minmax(0,1fr) 300px !important;gap:24px !important;align-items:start !important;margin-top:-14px;} html body.single-product .cx3c-feat{border:1px solid rgba(12,40,28,.1);border-radius:14px;padding:11px 13px;margin-bottom:11px !important;background:#FFFFFF;} html body.single-product .cx3c-fi{width:40px !important;height:40px !important;border-radius:11px;} html body.single-product .cx3c-fi svg{width:19px !important;height:19px !important;} html body.single-product .cx3c-eyebrow{display:inline-block;margin-bottom:12px;padding:8px 16px;border-radius:999px;background:#EAF5F0;font:800 10.5px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#3F7D66;} html body.single-product .cx3c-title{font-size:clamp(26px,2.5vw,40px) !important;margin:0 0 10px !important;} html body.single-product .cx3c-sub{font:600 15px/1.4 Archivo,sans-serif !important;color:#5C6F65 !important;margin:0 0 14px !important;} html body.single-product .cx3c-idrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;} html body.single-product .cx3c-id{padding:8px 14px !important;border:0 !important;margin:0 !important;border-radius:999px;background:#EAF5F0;font:800 11px/1 Archivo,sans-serif !important;letter-spacing:.08em !important;color:#2F7A5D !important;} html body.single-product .cx3c-purity{display:flex !important;align-items:center !important;gap:20px !important;background:linear-gradient(110deg,#EFF9F4,#F7FCFA) !important;border:1px solid rgba(31,168,118,.18) !important;border-radius:18px !important;padding:18px 24px !important;} html body.single-product .cx3c-pcheck{width:52px !important;height:52px !important;box-shadow:0 8px 18px rgba(31,168,118,.32);} html body.single-product .cx3c-pcheck svg{width:26px !important;height:26px !important;} html body.single-product .cx3c-pblock{display:block;} html body.single-product .cx3c-pn{display:block;font:900 clamp(30px,3vw,42px)/1 Archivo,sans-serif !important;letter-spacing:-1.5px;color:#0A0A0A !important;} html body.single-product .cx3c-plabel{display:block !important;margin:6px 0 0 !important;font:800 11px/1 Archivo,sans-serif !important;font-style:normal;letter-spacing:.16em !important;text-transform:uppercase;color:#3F7D66 !important;} html body.single-product .cx3c-pdiv{width:1px;align-self:stretch;background:rgba(31,168,118,.28);margin:0 4px;} html body.single-product .cx3c-pverdict{display:block;} html body.single-product .cx3c-pverdict b{display:block;font:900 17px/1 Archivo,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#1FA876;} html body.single-product .cx3c-pverdict i{display:block;margin-top:6px;font:500 13px/1.35 Archivo,sans-serif;font-style:normal;color:#5C6F65;max-width:150px;} html body.single-product .cx3c-vialwrap{position:relative;min-height:0 !important;padding:0 !important;border-radius:18px;overflow:hidden;background:#EEF4F1 url("/wp-content/uploads/2026/07/lab-glassware-background-1.webp") center/cover no-repeat;} html body.single-product img.cx3c-vial{max-height:none !important;width:100% !important;height:auto !important;display:block;filter:drop-shadow(0 16px 24px rgba(16,60,42,.28));} html body.single-product .cx3c-tablewrap{margin-top:16px !important;} html body.single-product table.cx3c-table th{padding:13px 18px !important;} html body.single-product table.cx3c-table td{padding:12px 18px !important;} html body.single-product .cx3c-st.is-none{color:#B4BDB8;} html body.single-product .cx3c-foot{grid-template-columns:auto minmax(0,1fr) auto !important;padding-top:18px !important;} html body.single-product .cx3c-acts{display:flex;align-items:center;gap:12px;} html body.single-product a.cx3c-dl,html body.single-product a.cx3c-vo{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:12px;font:800 12px/1 Archivo,sans-serif;letter-spacing:.09em;text-transform:uppercase;text-decoration:none !important;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;} html body.single-product a.cx3c-dl{background:#1FA876;color:#FFFFFF !important;} html body.single-product a.cx3c-dl:hover{background:#178B61;transform:translateY(-1px);box-shadow:0 10px 20px rgba(31,168,118,.3);} html body.single-product a.cx3c-vo{background:#FFFFFF;color:#12261C !important;border:1px solid rgba(12,40,28,.16);} html body.single-product a.cx3c-vo:hover{border-color:rgba(31,168,118,.5);transform:translateY(-1px);} html body.single-product a.cx3c-dl svg,html body.single-product a.cx3c-vo svg{width:17px;height:17px;} html body.single-product ul.cx3c-strip{display:flex !important;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 !important;margin:18px 0 0 !important;padding:0 !important;list-style:none !important;} html body.single-product ul.cx3c-strip li{display:flex;align-items:center;gap:10px;padding:0 26px;font:700 12.5px/1.2 Archivo,sans-serif;color:#5C6F65;} html body.single-product ul.cx3c-strip li + li{border-left:1px solid rgba(12,40,28,.12);} html body.single-product ul.cx3c-strip svg{width:19px;height:19px;color:#1FA876;flex:0 0 auto;} @media (max-width:1100px){ html body.single-product .cx3c-body{grid-template-columns:minmax(0,1fr) !important;margin-top:0;} html body.single-product .cx3c-vialwrap{order:-1;max-height:260px;} html body.single-product .cx3c-purity{flex-wrap:wrap;gap:14px !important;} html body.single-product .cx3c-pdiv{display:none;} html body.single-product .cx3c-acts{flex-wrap:wrap;} html body.single-product ul.cx3c-strip li{padding:6px 14px;} } /* ===== /COA card v4 ===== */ /* --- COA v4 fit: the headline was overflowing into the vial panel (the v3 fit-pass had pinned it to nowrap at a size the ~498px middle column cannot hold), and the -14px pull on the body was sliding the feature rail up over the CODEX RESEARCH lockup. --- */ @media (min-width:1101px){ html body.single-product .cx3c-title{white-space:normal !important;font-size:clamp(24px,2.15vw,34px) !important;} html body.single-product .cx3c-body{margin-top:0 !important;} html body.single-product .cx3c-top{padding-bottom:14px !important;} } /* --- /COA v4 fit --- */ /* --- COA v5: the headline moved OUT of the middle column and into the top bar, level with the CODEX RESEARCH lockup, on one line (it has the full card width there, so it fits comfortably at 42px); the small pill is gone; the vial sits on the card itself with no photographic panel; and the body closes the gap the headline left behind. --- */ @media (min-width:1101px){ html body.single-product .cx3c-top{align-items:center !important;gap:26px !important;padding-bottom:16px !important;} html body.single-product .cx3c-title{flex:1 1 auto;white-space:nowrap !important;font-size:clamp(24px,2.6vw,42px) !important;margin:0 !important;} html body.single-product .cx3c-kick{flex:0 0 auto;} html body.single-product .cx3c-body{margin-top:0 !important;align-items:center !important;} html body.single-product .cx3c-core{padding-top:2px;} html body.single-product .cx3c-sub{margin:0 0 12px !important;} html body.single-product .cx3c-vialwrap{background:none !important;border-radius:0 !important;overflow:visible !important;display:flex;align-items:center;justify-content:center;} html body.single-product img.cx3c-vial{width:auto !important;max-width:100% !important;max-height:300px !important;filter:drop-shadow(0 18px 26px rgba(16,60,42,.2)) !important;} } @media (max-width:1100px){ html body.single-product .cx3c-vialwrap{background:none !important;max-height:none;} html body.single-product img.cx3c-vial{width:auto !important;max-height:220px !important;margin:0 auto;} html body.single-product .cx3c-title{white-space:normal !important;} } /* --- /COA v5 --- */ /* --- COA v6: kicker gone, vial column much larger, and the whole middle column (headline, sub-line, id pills, purity bar) centred in the gap between the feature rail and the vial. The headline is back INSIDE that column so "centred between the two" is true by construction rather than by eyeballed padding; the column is pulled up so its first line still sits level with the CODEX RESEARCH lockup. --- */ @media (min-width:1101px){ html body.single-product .cx3c-top{padding-bottom:0 !important;} html body.single-product .cx3c-body{grid-template-columns:248px minmax(0,1fr) 384px !important;gap:22px !important;align-items:start !important;margin-top:-46px !important;} html body.single-product .cx3c-rail{margin-top:46px;} html body.single-product .cx3c-vialwrap{margin-top:46px;} html body.single-product .cx3c-core{padding-top:0;text-align:center;} html body.single-product .cx3c-title{white-space:normal !important;font-size:clamp(24px,2.3vw,36px) !important;margin:0 0 12px !important;text-align:center !important;} html body.single-product .cx3c-sub{text-align:center !important;margin:0 0 12px !important;} html body.single-product .cx3c-idrow{justify-content:center !important;} html body.single-product .cx3c-purity{justify-content:center !important;text-align:left;} html body.single-product img.cx3c-vial{max-height:430px !important;} } /* --- /COA v6 --- */ /* --- COA v7: headline forced onto ONE line (the middle column was widened by trimming the rail and the vial column, then the size set so the string fits it — measured 456px of text in 480px), the vial pulled up so its BASE lands on the bottom edge of the SAME BATCH AS SHIPPED box, which also stops the vial from setting the row height and brings the table ~75px up, and the purity / PASSED panel enlarged. --- */ @media (min-width:1101px){ html body.single-product .cx3c-body{grid-template-columns:224px minmax(0,1fr) 372px !important;gap:22px !important;} html body.single-product .cx3c-title{white-space:nowrap !important;font-size:clamp(21px,2.05vw,31px) !important;margin:0 0 14px !important;} html body.single-product .cx3c-vialwrap{margin-top:-29px !important;align-items:flex-end !important;} html body.single-product img.cx3c-vial{max-height:384px !important;} html body.single-product .cx3c-tablewrap{margin-top:10px !important;} html body.single-product .cx3c-purity{padding:24px 30px !important;gap:24px !important;} html body.single-product .cx3c-pcheck{width:62px !important;height:62px !important;} html body.single-product .cx3c-pcheck svg{width:31px !important;height:31px !important;} html body.single-product .cx3c-pn{font-size:clamp(34px,3.4vw,48px) !important;} html body.single-product .cx3c-plabel{font-size:12px !important;margin-top:7px !important;} html body.single-product .cx3c-pverdict b{font-size:20px !important;} html body.single-product .cx3c-pverdict i{font-size:14px !important;max-width:170px !important;margin-top:7px !important;} } /* --- /COA v7 --- */ /* --- COA v7b: the narrower rail wrapped the feature labels (THIRD-PARTY / TESTED), so they are sized to fit 224px on one line. --- */ @media (min-width:1101px){ html body.single-product .cx3c-ft b{font-size:10.5px !important;letter-spacing:.05em !important;white-space:nowrap !important;} html body.single-product .cx3c-ft i{font-size:11.5px !important;} html body.single-product .cx3c-feat{padding:10px 11px !important;gap:10px !important;} html body.single-product .cx3c-fi{width:36px !important;height:36px !important;} html body.single-product .cx3c-fi svg{width:18px !important;height:18px !important;} } /* --- /COA v7b --- */ /* --- COA v8: the middle column is centred between the rail and the VISIBLE vial, not the vial column. The vial PNG is a square canvas whose artwork occupies only 33.5-66% of its width, so the column edge sits 124px left of the glass and the copy read as leaning toward the pills. Measured: rail ends at 255, glass starts at 901, so the true midpoint is 578 and the column centre was 516 - hence the -124px right margin, which reaches into the transparent padding and moves the centre exactly 62px. The purity panel also gained a meter and a lot/date/lab line so it fills down to the rail bottom. --- */ @media (min-width:1101px){ html body.single-product .cx3c-core{margin-right:-124px !important;} html body.single-product .cx3c-purity{display:block !important;padding:22px 26px 20px !important;} html body.single-product .cx3c-prow{display:flex;align-items:center;justify-content:center;gap:24px;} html body.single-product .cx3c-meter{display:block;height:8px;border-radius:8px;background:#DCEDE5;margin:18px 0 0;overflow:hidden;} html body.single-product .cx3c-meter i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#1FA876,#43C892);} html body.single-product .cx3c-pfoot{margin:12px 0 0 !important;font:700 11.5px/1.3 Archivo,sans-serif !important;letter-spacing:.06em !important;color:#5C6F65 !important;text-align:center !important;} } @media (max-width:1100px){ html body.single-product .cx3c-purity{display:block !important;} html body.single-product .cx3c-prow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} html body.single-product .cx3c-meter{display:block;height:7px;border-radius:7px;background:#DCEDE5;margin:14px 0 0;overflow:hidden;} html body.single-product .cx3c-meter i{display:block;height:100%;border-radius:7px;background:#1FA876;} html body.single-product .cx3c-pfoot{margin:10px 0 0 !important;font:700 11px/1.3 Archivo,sans-serif !important;color:#5C6F65 !important;} } /* --- /COA v8 --- */ /* --- COA v9: the 3D vial is centred over the Status column of the table below it, and the middle column is re-centred for the vial's new position. Measured on a 1180px card: the Status header spans 980-1148 (centre 1064) while the visible glass sat at 901-1022 (centre 962), so the art needs +102px - written as 27.4% of the PNG's own 372px box so it tracks the card width. With the glass now starting at 1004 the true midpoint between the rail (ends 255) and the glass is 630, so the core's negative right margin goes from -124px to -227px. Even padding on the purity panel takes its bottom to 346 against the rail's 347. --- */ @media (min-width:1101px){ html body.single-product .cx3c-vialwrap img{transform:translateX(18.25%) !important;} html body.single-product .cx3c-core{margin-right:-148px !important;} html body.single-product .cx3c-purity{padding:37px 26px 37px !important;} } /* --- /COA v9 --- */ /* --- PRODUCT DESC BANNERS (cxrb) - Sep 9 2026 --------------------------------- The four description sections in the product's own post_content are re-rendered client-side by the "Codex product description banners" script into wide banner cards, one per section, over the three lab background images. Nothing is hardcoded per product: the chips are parsed out of the "Label: value" paragraphs that already exist in every product description, plus catline / blurb from the cdx-tp-data feed. The originals stay in the DOM until the script runs, so a JS failure degrades to the old stacked text rather than to nothing. --- */ html body.single-product .cdx-inline-desc{margin:0 0 26px !important;} html body.single-product .cxrb-stack{width:auto !important;max-width:1534px !important;margin:0 auto !important;padding:0 !important;transform:none !important;background:transparent !important;font-family:'DM Sans',-apple-system,Helvetica,Arial,sans-serif !important;} html body.single-product .cxrb{ --cxa:#12A05B; --cxs:#E3F5EB; --cxt:#F2FAF5; --cxpos:right center; position:relative;display:block;width:100%;box-sizing:border-box; border:1px solid rgba(10,10,10,.09);border-left:5px solid var(--cxa); border-radius:20px;overflow:hidden;margin:0 0 18px; background-color:var(--cxt);background-repeat:no-repeat; background-position:var(--cxpos);background-size:cover; } html body.single-product .cxrb-storage{--cxa:#1D6FE0;--cxs:#DEEBFB;--cxt:#EFF5FE;--cxpos:right 68%;} html body.single-product .cxrb-intended{--cxpos:right 62%;} html body.single-product .cxrb-veil{ position:absolute;inset:0;z-index:1;display:block;pointer-events:none; background:linear-gradient(90deg,var(--cxt) 0%,var(--cxt) 30%,rgba(255,255,255,0) 64%); } html body.single-product .cxrb-in{position:relative;z-index:2;padding:30px 34px 30px;max-width:63%;} html body.single-product .cxrb.is-4 .cxrb-in{max-width:66%;} html body.single-product .cxrb.is-slim{background-image:none;border-left-color:#9AA6A0;} html body.single-product .cxrb.is-slim .cxrb-in{max-width:100%;padding:24px 30px 24px;} html body.single-product .cxrb.is-slim .cxrb-veil{display:none;} html body.single-product .cxrb-head{display:flex;align-items:center;gap:18px;margin:0 0 14px;} html body.single-product .cxrb-ico{flex:0 0 62px;width:62px;height:62px;border-radius:17px;display:flex;align-items:center;justify-content:center;background:var(--cxs);color:var(--cxa);} html body.single-product .cxrb-ico svg{width:31px;height:31px;display:block;} html body.single-product .cxrb-ht{min-width:0;} html body.single-product .cxrb-kicker{margin:0 0 6px !important;font:800 11.5px/1 Archivo,sans-serif !important;letter-spacing:.17em !important;text-transform:uppercase !important;color:var(--cxa) !important;} html body.single-product .cxrb-title{margin:0 !important;padding:0 !important;font-family:'DM Sans',sans-serif !important;font-size:clamp(26px,2.4vw,40px) !important;font-weight:900 !important;line-height:1.04 !important;letter-spacing:-.022em !important;color:#0D1512 !important;text-transform:none !important;} html body.single-product .cxrb-title b{color:var(--cxa) !important;font-weight:900 !important;} html body.single-product .cxrb-lede{margin:0 0 22px !important;max-width:820px;font:400 15.5px/1.58 'DM Sans',sans-serif !important;color:#43524C !important;} html body.single-product .cxrb-feats{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;} html body.single-product .cxrb-feat{display:flex;align-items:flex-start;gap:13px;flex:1 1 0;min-width:200px;padding:2px 22px;border-left:1px solid rgba(10,10,10,.11);} html body.single-product .cxrb-feat:first-child{border-left:0;padding-left:0;} html body.single-product .cxrb-fi{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--cxs);color:var(--cxa);} html body.single-product .cxrb-fi svg{width:21px;height:21px;display:block;} html body.single-product .cxrb-ft{display:block;min-width:0;} html body.single-product .cxrb-ft b{display:block;font:800 13.5px/1.3 'DM Sans',sans-serif;color:#0D1512;margin:2px 0 3px;} html body.single-product .cxrb-ft i{display:block;font:400 12.9px/1.45 'DM Sans',sans-serif;font-style:normal;color:#5C6B64;} html body.single-product .cxrb.is-4 .cxrb-feat{flex-direction:column;gap:9px;padding:2px 20px;} html body.single-product .cxrb.is-4 .cxrb-fi{flex:0 0 42px;} html body.single-product .cxrb-more{display:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid rgba(10,10,10,.11);} html body.single-product .cxrb[data-open="1"] .cxrb-more{display:block;animation:cxrbIn .3s ease both;} @keyframes cxrbIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}} html body.single-product .cxrb-more p{margin:0 0 11px !important;font:400 14.6px/1.62 'DM Sans',sans-serif !important;color:#43524C !important;} html body.single-product .cxrb-more p:last-child{margin-bottom:0 !important;} html body.single-product .cxrb-more b{color:#0D1512;font-weight:800;} html body.single-product .cxrb-exp{position:absolute;z-index:4;right:9.6%;top:50%;transform:translateY(-50%);display:block;border:0;background:transparent;padding:0;margin:0;cursor:pointer;text-align:center;box-shadow:none;line-height:1;min-height:0;} html body.single-product .cxrb-plus{display:flex;align-items:center;justify-content:center;width:62px;height:62px;margin:0 auto;border-radius:50%;background:var(--cxa);color:#fff;font:300 34px/1 'DM Sans',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .25s ease;} html body.single-product .cxrb-exp:hover .cxrb-plus{transform:scale(1.07);} html body.single-product .cxrb[data-open="1"] .cxrb-plus{transform:rotate(45deg);} html body.single-product .cxrb[data-open="1"] .cxrb-exp:hover .cxrb-plus{transform:rotate(45deg) scale(1.07);} html body.single-product .cxrb-exp i{display:block;margin-top:10px;font:800 10px/1.4 Archivo,sans-serif;font-style:normal;letter-spacing:.15em;text-transform:uppercase;color:#0D1512;} html body.single-product .cxrb-note{margin:16px 0 0 !important;text-align:center !important;font:400 9.5px/1.4 'DM Mono',monospace !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:#8A8A80 !important;} @media (max-width:1100px){ html body.single-product .cxrb{background-image:none !important;} html body.single-product .cxrb-veil{display:none;} html body.single-product .cxrb-in,html body.single-product .cxrb.is-4 .cxrb-in{max-width:100%;padding:24px 22px;} html body.single-product .cxrb-exp{position:static;transform:none;display:flex;align-items:center;gap:12px;margin:20px 0 0;} html body.single-product .cxrb-exp .cxrb-plus{width:46px;height:46px;font-size:26px;margin:0;} html body.single-product .cxrb-exp i{margin:0;} html body.single-product .cxrb-exp i br{display:none;} html body.single-product .cxrb[data-open="1"] .cxrb-plus{transform:rotate(45deg);} } @media (max-width:720px){ html body.single-product .cxrb-feats{flex-direction:column;gap:16px;} html body.single-product .cxrb-feat{border-left:0 !important;padding:0 !important;flex-direction:row !important;} html body.single-product .cxrb-ico{flex:0 0 50px;width:50px;height:50px;border-radius:14px;} html body.single-product .cxrb-ico svg{width:25px;height:25px;} } /* --- /PRODUCT DESC BANNERS (cxrb) --- */ /* --- cxrb fit pass 1: art placement + the expand label ------------------------- All three PNGs are 1600x684 (aspect 2.34) against cards that are ~1534x330, so "cover" draws them at the card's own width and crops ~50% vertically - which means background-position-x does nothing at all. Storage therefore gets an explicit 118% width so its vial can be moved right off the copy; the other two only need a vertical crop point. Overview's PNG has a green "+" baked into it at 53.7% height, so its crop is set to land that circle exactly under the real button rather than 24px below it. --- */ html body.single-product .cxrb-overview{--cxpos:right 66%;background-size:71% auto !important;} html body.single-product .cxrb-storage{--cxpos:right 71%;background-size:79% auto !important;} html body.single-product .cxrb-intended{--cxpos:right 100%;background-size:70% auto !important;} html body.single-product .cxrb-exp i{text-shadow:0 1px 7px rgba(255,255,255,.95),0 0 14px rgba(255,255,255,.8);} /* --- /cxrb fit pass 1 --- */ html body.single-product .cxrb-exp{right:6.3% !important;} /* cxrb: the theme puts a mint border-left on every h3 - it was showing as a stray accent bar in front of each banner title. */ html body.single-product .cxrb-title{border:0 !important;padding-left:0 !important;} html body.single-product .cxrb.is-slim{min-height:0;} html body.single-product .cxrb.is-slim .cxrb-in{padding:26px 30px 26px;} /* cxrb: the three art placements are tuned for the collapsed card height. Expanded, the card grows past the drawn image height and the right side would show a bare strip, so an open card falls back to a height-driven fill. */ html body.single-product .cxrb[data-open="1"]{background-size:auto 100% !important;background-position:right center !important;} /* cxrb: the replacement overview PNG has no "+" baked in - its handwritten arrow points to 86%/55% of the art, so the overview button sits a touch left of the other two to land under it. */ html body.single-product .cxrb-overview .cxrb-exp{right:7.4% !important;} /* --- cxrb: one height for all four cards -------------------------------------- Collapsed the four ran 322 / 362 / 298 / 226 because each is sized by its own copy. Storage was the tallest, so 362 becomes the floor for all of them and the content is centred in whatever slack that leaves. The overview crop is retuned for the taller card - its art is 466px drawn, so growing the card from 322 to 362 moves the handwritten arrow off the button unless the crop point follows. --- */ @media (min-width:1101px){ html body.single-product .cxrb{min-height:362px;display:flex;align-items:center;} html body.single-product .cxrb-in{flex:1 1 auto;} html body.single-product .cxrb-overview{--cxpos:right 72%;} html body.single-product .cxrb.is-slim{min-height:362px;} html body.single-product .cxrb.is-slim .cxrb-in{padding:30px 34px 30px;} } /* --- /cxrb: one height --- */ /* --- cxrb: Intended Use in the neutral / bronze palette (JD mockup, Sep 9 2026) --- The other two banners are brand green and blue; the legal card is deliberately off-palette - warm off-white, a charcoal edge and a bronze accent - so it reads as a notice rather than a third feature. Its --cxa now drives only the title accent and the button; the edge, kicker and icon glyphs are set separately because the mockup uses charcoal for those and bronze only for emphasis. Art is the lab-bench "Research Responsibly" card; its arrow points at 83%/62% of the PNG, so at 71% width the button moves to right:10.2% to sit under it. --- */ html body.single-product .cxrb-intended{ --cxa:#8A6234;--cxs:#EDEDE8;--cxt:#F7F7F4;--cxpos:right 100%; background-size:71% auto !important; border-left-color:#2C2C2A !important; } html body.single-product .cxrb-intended .cxrb-kicker{color:#4A4A45 !important;} html body.single-product .cxrb-intended .cxrb-ico, html body.single-product .cxrb-intended .cxrb-fi{color:#40403B;} html body.single-product .cxrb-intended .cxrb-veil{background:linear-gradient(90deg,#F7F7F4 0%,#F7F7F4 37%,rgba(255,255,255,0) 70%);} html body.single-product .cxrb-intended .cxrb-exp{right:10.2% !important;} html body.single-product .cxrb-intended .cxrb-plus{background:radial-gradient(circle at 50% 38%,#A8783F,#7A5527) !important;box-shadow:0 0 0 13px rgba(138,98,52,.15),0 8px 24px rgba(60,40,15,.3) !important;} html body.single-product .cxrb-intended .cxrb-exp i{color:#3A3A35;} /* --- /cxrb Intended Use bronze --- */ /* --- cxrb: one button position for all four ----------------------------------- JD wants every CLICK TO EXPAND where Storage & Handling has it (right:6.3%, centre 91.7% of the card). The overview and legal buttons had been moved to sit under their own art's handwritten arrow instead; now the ART moves and the button stays put. Because each image is drawn NARROWER than the card and anchored right, a negative right offset slides it past the card edge (clipped by overflow:hidden, costing only empty glassware at the far right) - the one lever that works here, since scaling the art to line the arrow up would leave vertical gaps. --- */ html body.single-product .cxrb-overview .cxrb-exp, html body.single-product .cxrb-intended .cxrb-exp{right:6.3% !important;} html body.single-product .cxrb-overview{background-position:right 55% !important;} html body.single-product .cxrb-intended{background-position:right bottom !important;} html body.single-product .cxrb-overview .cxrb-veil{background:linear-gradient(90deg,var(--cxt) 0%,var(--cxt) 34%,rgba(255,255,255,0) 66%);} /* --- /cxrb one button position --- */ /* cxrb: the third overview PNG carries no handwriting or arrow at all, so the art no longer has to be nudged sideways to meet the button - it just takes a clean crop and the button stays on the shared 91.5% axis. */ /* --- cxrb: keep Storage & Handling's four chips on one line on laptop widths ---- The chips are flex:1 1 0 with min-width:200px, so four of them need 800px of copy column. On a MacBook the card is ~1150 wide and the column is 66% of that = 756, and "Before handling" dropped to a second row - which also pushed that card to 458px and broke the equal-height rule. Between 1101 and 1700 the chips shrink instead of wrapping: nowrap, no min-width, tighter gutters and a smaller icon. The copy column stays at 66% so nothing moves right into the vial. --- */ @media (min-width:1101px) and (max-width:1700px){ html body.single-product .cxrb.is-4 .cxrb-feats{flex-wrap:nowrap;} html body.single-product .cxrb.is-4 .cxrb-feat{min-width:0;flex:1 1 0;padding:2px 12px;} html body.single-product .cxrb.is-4 .cxrb-feat:first-child{padding-left:0;} html body.single-product .cxrb.is-4 .cxrb-fi{flex:0 0 36px;width:36px;height:36px;border-radius:11px;} html body.single-product .cxrb.is-4 .cxrb-fi svg{width:18px;height:18px;} html body.single-product .cxrb.is-4 .cxrb-ft b{font-size:12.3px;line-height:1.28;} html body.single-product .cxrb.is-4 .cxrb-ft i{font-size:11.6px;line-height:1.4;} html body.single-product .cxrb.is-4 .cxrb-lede{margin-bottom:18px !important;} } /* --- /cxrb four chips on one line --- */ /* --- cxrb: heavier chip type ------------------------------------------------- JD wanted the chip labels and the line under each of them bolder. Labels go 800 -> 900, values 400 -> 600 with a slightly darker grey so the extra weight does not read as muddy. Applies to all four cards' chips. --- */ html body.single-product .cxrb-ft b{font-weight:900 !important;color:#0A1210 !important;} html body.single-product .cxrb-ft i{font-weight:600 !important;color:#4C5C55 !important;} html body.single-product .cxrb-intended .cxrb-ft i{color:#4E4E48 !important;} /* --- /cxrb heavier chip type --- */ /* --- cxrb: Storage & Handling column proportions ------------------------------ The four chips were equal thirds, but their copy is not equal: "Long-term" is 52 characters against 115 for "After reconstitution", so its column ran two short lines and left a visible hole before the divider and before "Before handling". Grow values now follow the copy length, which pulls that divider ~50px left and lets every column's text fill its box. Safe to hardcode by position: the Storage copy is boilerplate and identical on all 20 products. --- */ @media (min-width:1101px){ html body.single-product .cxrb.is-4 .cxrb-feat:nth-child(1){flex-grow:.95 !important;} html body.single-product .cxrb.is-4 .cxrb-feat:nth-child(2){flex-grow:1.2 !important;} html body.single-product .cxrb.is-4 .cxrb-feat:nth-child(3){flex-grow:.68 !important;} html body.single-product .cxrb.is-4 .cxrb-feat:nth-child(4){flex-grow:1.28 !important;} } @media (min-width:1701px){ html body.single-product .cxrb.is-4 .cxrb-feat{min-width:150px !important;} } /* --- /cxrb Storage column proportions --- */ /* --- cxrb: Terms of Sale as the black-and-gold banner (JD mockup, Sep 9 2026) --- The fourth card stops being the plain slim strip and becomes a full banner over the dark lab photo. Its PNG is 1600x903 (1.77:1) - much taller than the other three at 2.34:1 - so it is drawn at 68% of the card width, which puts the vials at about 76% across, where the mockup has them. Everything is inverted here: near-black ground, gold accents, white copy, hairlines in gold at low alpha. --- */ html body.single-product .cxrb-terms{ --cxa:#D8AC63;--cxs:transparent;--cxt:#0D0D0C; background-position:right 62% !important;background-size:68% auto !important; border:1px solid rgba(216,172,99,.28) !important;border-left:5px solid #C4923F !important; } html body.single-product .cxrb-terms .cxrb-veil{ display:block !important; background:linear-gradient(90deg,#0D0D0C 0%,#0D0D0C 26%,rgba(13,13,12,.72) 46%,rgba(13,13,12,0) 68%) !important; } html body.single-product .cxrb-terms .cxrb-kicker{color:#D8AC63 !important;} html body.single-product .cxrb-terms .cxrb-title{color:#FFFFFF !important;} html body.single-product .cxrb-terms .cxrb-title b{color:#E8C078 !important;font-style:italic !important;} html body.single-product .cxrb-terms .cxrb-lede{color:#EDE9E2 !important;max-width:760px;} html body.single-product .cxrb-terms .cxrb-ico{ background:rgba(216,172,99,.08) !important;color:#E2B871 !important; border:1px solid rgba(216,172,99,.55);box-shadow:0 0 22px rgba(216,172,99,.22); } html body.single-product .cxrb-terms .cxrb-fi{ background:transparent !important;color:#E2B871 !important;border-radius:50% !important; border:1.5px solid rgba(216,172,99,.6);box-shadow:0 0 18px rgba(216,172,99,.18); } html body.single-product .cxrb-terms .cxrb-feat{border-left-color:rgba(216,172,99,.24) !important;} html body.single-product .cxrb-terms .cxrb-ft b{color:#FFFFFF !important;text-transform:uppercase;letter-spacing:.055em;} html body.single-product .cxrb-terms .cxrb-ft i{color:#CFC6B6 !important;} html body.single-product .cxrb-terms .cxrb-note{color:#8A8A80 !important;} /* --- /cxrb Terms of Sale black-and-gold --- */ /* --- cxrb: Terms chip columns ------------------------------------------------ The is-4 grow values are tuned to the STORAGE copy, where "Long-term" is much shorter than its neighbours. The Terms chips are all within a few characters of each other, so they go back to equal columns - otherwise "Third-party verified" lands in the narrow .68 slot and wraps to four lines. Text is centred under the icon here, as in the mockup, rather than left-aligned like the other cards. --- */ @media (min-width:1101px){ html body.single-product .cxrb.is-4.cxrb-terms .cxrb-feat:nth-child(1), html body.single-product .cxrb.is-4.cxrb-terms .cxrb-feat:nth-child(2), html body.single-product .cxrb.is-4.cxrb-terms .cxrb-feat:nth-child(3), html body.single-product .cxrb.is-4.cxrb-terms .cxrb-feat:nth-child(4){flex-grow:1 !important;} } html body.single-product .cxrb-terms .cxrb-feat{align-items:center;text-align:center;gap:11px;} html body.single-product .cxrb-terms .cxrb-ft{text-align:center;} html body.single-product .cxrb-terms .cxrb-fi{flex:0 0 46px !important;width:46px !important;height:46px !important;} html body.single-product .cxrb-terms .cxrb-fi svg{width:22px !important;height:22px !important;} html body.single-product .cxrb-terms .cxrb-ft b{font-size:12.6px !important;} html body.single-product .cxrb-terms .cxrb-ft i{font-size:12.2px !important;} /* --- /cxrb Terms chip columns --- */ /* --- cxrb: the art is a fixed hero band, not a stretching background ---------- [stated] JD wants an expanded card to behave like the Codex Standard boxes: the photo stays exactly where it was and the new room underneath fills with the flat card colour. A background on the section itself cannot do that - it re-centres and re-crops as the element grows - so the image moved onto its own absolutely positioned .cxrb-art layer pinned to the top of the card. Its height is --cxh, which level() sets to the COLLAPSED height, so opening a card leaves the band alone and the extra height below is plain var(--cxt). --- */ html body.single-product .cxrb-art{ position:absolute;left:0;right:0;top:0;z-index:0;display:block; height:var(--cxh,100%);background-repeat:no-repeat;background-color:var(--cxt); } html body.single-product .cxrb-overview .cxrb-art{background-size:71% auto;background-position:right 55%;} html body.single-product .cxrb-storage .cxrb-art{background-size:79% auto;background-position:right 71%;} html body.single-product .cxrb-intended .cxrb-art{background-size:71% auto;background-position:right bottom;} html body.single-product .cxrb-terms .cxrb-art{background-size:68% auto;background-position:right 62%;} html body.single-product .cxrb[data-open="1"]{background-size:auto !important;background-position:0 0 !important;} html body.single-product .cxrb-veil{z-index:1;} @media (max-width:1100px){ html body.single-product .cxrb-art{display:none !important;} } /* --- /cxrb fixed hero band --- */ /* cxrb: keep the expand button centred on the ART BAND, not on the grown card, so it does not drift down into the flat area when a card is open. */ @media (min-width:1101px){ html body.single-product .cxrb-exp{top:calc(var(--cxh,100%) / 2 + 26px) !important;} } /* --- cxrb: expanded copy starts BELOW the hero band --------------------------- [stated] JD: the revealed text was starting inside the photo (Storage's first chip sat over the vial). The head/lede/chips are now wrapped in .cxrb-hero with min-height:var(--cxh) - the same collapsed height the art band uses - and centred inside it, so .cxrb-more can only begin where the photo ends. The card itself goes back to display:block; the hero wrapper does the vertical centring that align-items:center used to do, which keeps the collapsed layout identical. --- */ html body.single-product .cxrb{display:block !important;} html body.single-product .cxrb-in{padding:0 !important;flex:none !important;} html body.single-product .cxrb-hero{ display:flex;flex-direction:column;justify-content:center;box-sizing:border-box; min-height:var(--cxh,auto);padding:30px 34px 30px; } html body.single-product .cxrb-more{ margin:0 !important;padding:22px 34px 30px !important;border-top:0 !important; } html body.single-product .cxrb.is-slim .cxrb-hero{padding:26px 30px;} @media (max-width:1100px){ html body.single-product .cxrb-hero{min-height:0;padding:24px 22px 8px;} html body.single-product .cxrb-more{padding:8px 22px 24px !important;} } /* --- /cxrb expanded copy below the band --- */ /* cxrb: the reveal animation was a -6px slide, and the browser holds that transform on the finished element - which pulled the expanded copy 6px up into the photo. Redefining the keyframes later in the sheet replaces the earlier definition; opacity only, no transform, so .cxrb-more sits exactly where layout puts it. */ @keyframes cxrbIn{from{opacity:0;}to{opacity:1;}} /* --- PRODUCT HERO TRUST STRIP - mockup icons (Sep 9 2026) --------------------- [stated] JD wants the four hero icons (>=99% HPLC / Contaminant Screened / Sterility Tested / Lyophilized) to look like his mockup: bare line art, no mint chip. The sub-lines the mockup shows already EXIST in every product's own markup as .cx3-sl ("Lab Tested" / "Per Vial" / "Cold Processed" / "For Research Use") and were simply display:none - so they are switched on rather than replaced with the mockup's invented wording. Hairlines between the four, as in the mockup. --- */ @media (min-width:850px){ html body.single-product .cx3-pd .cx3-specs .cx3-ic{ background:transparent !important;border:0 !important;border-radius:0 !important; width:auto !important;height:auto !important;box-shadow:none !important; display:flex;align-items:center;justify-content:center;margin:0 0 2px; } html body.single-product .cx3-pd .cx3-specs .cx3-ic svg{ width:30px !important;height:30px !important;stroke-width:1.5 !important; } html body.single-product .cx3-pd .cx3-specs .cx3-spec{gap:9px !important;padding:2px 18px !important;} html body.single-product .cx3-pd .cx3-specs .cx3-spec + .cx3-spec{ border-left:1px solid rgba(10,10,10,.11) !important; } html body.single-product .cx3-pd .cx3-specs .cx3-sv{ font-size:15px !important;font-weight:800 !important;color:#101613 !important;line-height:1.2 !important; } html body.single-product .cx3-pd .cx3-specs .cx3-sl{ display:block !important;font-size:13px !important;font-weight:500 !important; color:#7A8A82 !important;line-height:1.3 !important;margin-top:1px !important; } } /* --- /PRODUCT HERO TRUST STRIP --- */ /* --- BUNDLE & SAVE - stronger title, slimmer rows (JD mockup, Sep 9 2026) ------ [stated] JD wants the heading to read as a real section title and the card to be as slim as his mockup. Measured against the mockup scaled to this card's 1180px: its rows are ~67px against our 112, and its heading is ~35px against our 30. The row height is driven ENTIRELY by the vial render (76px image + 17px padding x2 + 2px border = 112), so the image is what has to come down; the overlap margin scales with it. The title is a font-size:0 h-tag with ::before/::after carrying the two colours, so both pseudo-elements have to be resized, not the element. --- */ @media (min-width:850px){ html body.single-product .cx3-pd .cx3-bs-t::before, html body.single-product .cx3-pd .cx3-bs-t::after{ font-size:36px !important;font-weight:900 !important;letter-spacing:-.015em !important; } html body.single-product .cx3-pd .cx3-bs .cx3-bs-head{margin:0 0 16px !important;} html body.single-product .cx3-pd .cx3-bs .cx3-bs-c{padding:12px 22px !important;margin:0 0 10px !important;} html body.single-product .cx3-pd .cx3-bs .cx3-bs-c:last-of-type{margin-bottom:0 !important;} html body.single-product .cx3-pd .cx3-bs .cx3-vg img{width:50px !important;height:50px !important;} html body.single-product .cx3-pd .cx3-bs .cx3-vg img:not(:first-of-type){margin-left:-30px !important;} html body.single-product .cx3-pd .cx3-bs .cx3-vg img:first-of-type{margin-left:0 !important;} html body.single-product .cx3-pd .cx3-bs .cx3-vg{width:auto !important;} } /* --- /BUNDLE & SAVE stronger title, slimmer rows --- */ /* cxrb-adjacent: with the slimmer rows the MOST POPULAR / BEST VALUE pill and the vial group overlapped by 3px (the pill straddles the row edge at y-11..19 and the vials now start at y16). Lifting the pill 4px clears it without changing the row height - a pre-existing 2px collision that the tighter rows made obvious. */ @media (min-width:850px){ html body.single-product .cx3-pd .cx3-bs .cx3-bs-c .cx3-flag{transform:translateY(-4px);} } /* BUNDLE & SAVE - compact tile card in the buy column (desktop) */ .cx4-bs{display:none} @media (min-width:850px){ html body.single-product .cx3-pd.cx4-ready .cx3-bs{display:none !important} html body.single-product .cx3-pd .cx4-bs{display:block;margin:22px 0 18px;padding:16px 16px 16px;background:linear-gradient(180deg,#EDF8F2 0%,#F5FBF8 100%);border:1.5px solid #5CCB9F;border-radius:14px;box-sizing:border-box;font-family:"DM Sans",-apple-system,Helvetica,Arial,sans-serif} html body.single-product .cx3-pd .cx4-bs .cx4-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 2px 14px} html body.single-product .cx3-pd .cx4-bs .cx4-title{display:flex;align-items:center;gap:10px;font-size:25px;line-height:1;font-weight:800;letter-spacing:-.01em;color:#101513;text-transform:uppercase} html body.single-product .cx3-pd .cx4-bs .cx4-ico{width:32px;height:32px;flex:0 0 32px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317A673' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%2317A673' d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='M22 12.2l-9.17 4.16a2 2 0 0 1-1.66 0L2 12.2'/%3E%3Cpath d='M22 17.2l-9.17 4.16a2 2 0 0 1-1.66 0L2 17.2'/%3E%3C/svg%3E") center/contain no-repeat} html body.single-product .cx3-pd .cx4-bs .cx4-note{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:#1D2622;line-height:1.2} html body.single-product .cx3-pd .cx4-bs .cx4-chk{width:17px;height:17px;flex:0 0 17px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2317A673'/%3E%3Cpath d='M7 12.4l3.2 3.1L17.2 8.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} html body.single-product .cx3-pd .cx4-bs .cx4-grid{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));gap:10px} html body.single-product .cx3-pd .cx4-bs button.cx4-t{position:relative;display:flex;align-items:center;gap:9px;min-width:0;min-height:0;height:auto;margin:0;padding:18px 12px 18px 12px;background:#fff;border:1px solid #D9E3DE;border-radius:10px;box-shadow:none;color:#101513;font:inherit;text-transform:none;letter-spacing:0;line-height:1.2;text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s;overflow:visible} html body.single-product .cx3-pd .cx4-bs button.cx4-t:hover{border-color:#9ED9BF} html body.single-product .cx3-pd .cx4-bs button.cx4-t:focus-visible{outline:2px solid #17A673;outline-offset:2px} html body.single-product .cx3-pd .cx4-bs button.cx4-t.on{border:2px solid #17A673;padding:17px 11px;background:#F4FCF8;box-shadow:0 4px 14px rgba(23,166,115,.12)} html body.single-product .cx3-pd .cx4-bs .cx4-radio{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:1.5px solid #A3AEA9;background:#fff;box-sizing:border-box;position:relative} html body.single-product .cx3-pd .cx4-bs .on .cx4-radio{border:2px solid #17A673} html body.single-product .cx3-pd .cx4-bs .on .cx4-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#17A673} html body.single-product .cx3-pd .cx4-bs .cx4-vg{display:flex;align-items:center;flex:0 0 auto} html body.single-product .cx3-pd .cx4-bs .cx4-vg img{display:block;width:20px !important;height:50px !important;max-width:none;object-fit:cover;object-position:center;margin:0 0 0 -3px} html body.single-product .cx3-pd .cx4-bs .cx4-vg img:first-child{margin-left:0} html body.single-product .cx3-pd .cx4-bs .cx4-vg5 img{margin-left:-6px} html body.single-product .cx3-pd .cx4-bs .cx4-vg5 img:first-child{margin-left:0} html body.single-product .cx3-pd .cx4-bs .cx4-tx{display:flex;flex-direction:column;gap:5px;min-width:0} html body.single-product .cx3-pd .cx4-bs .cx4-n{font-size:15px;font-weight:800;letter-spacing:.005em;color:#101513;white-space:nowrap;text-transform:uppercase} html body.single-product .cx3-pd .cx4-bs .cx4-p{display:flex;align-items:center;gap:6px;white-space:nowrap} html body.single-product .cx3-pd .cx4-bs .cx4-ea{font-size:14px;font-weight:800;color:#101513} html body.single-product .cx3-pd .cx4-bs .cx4-ea small{font-size:12px;font-weight:600;color:#3A4540;margin-left:1px} html body.single-product .cx3-pd .cx4-bs .cx4-off{display:inline-block;padding:3px 7px;border-radius:999px;background:#D5F2E4;color:#12905E;font-size:10.5px;font-weight:800;letter-spacing:.01em;line-height:1.15} html body.single-product .cx3-pd .cx4-bs .cx4-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:4px 14px;border-radius:999px;background:#17A673;color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em;line-height:1.2;white-space:nowrap;text-transform:uppercase} html body.single-product .cx3-pd .cx4-bs .cx4-flag-alt{background:#5B6660} html body.single-product .cx3-pd .cx4-bs.m4 .cx4-vg img{width:23px !important;height:58px !important} html body.single-product .cx3-pd .cx4-bs.m4 .cx4-vg5 img{margin-left:-7px} html body.single-product .cx3-pd .cx4-bs.m4 .cx4-vg5 img:first-child{margin-left:0} html body.single-product .cx3-pd .cx4-bs.m4 button.cx4-t{padding:17px 14px;gap:11px} html body.single-product .cx3-pd .cx4-bs.m4 button.cx4-t.on{padding:16px 13px} html body.single-product .cx3-pd .cx4-bs.m4c .cx4-grid{gap:8px} html body.single-product .cx3-pd .cx4-bs.m4c button.cx4-t{gap:7px;padding:16px 9px} html body.single-product .cx3-pd .cx4-bs.m4c button.cx4-t.on{padding:15px 8px} html body.single-product .cx3-pd .cx4-bs.m4c .cx4-radio{flex-basis:20px;width:20px;height:20px} html body.single-product .cx3-pd .cx4-bs.m4c .cx4-vg img{width:18px !important;height:45px !important} html body.single-product .cx3-pd .cx4-bs.m4c .cx4-n{font-size:14px} html body.single-product .cx3-pd .cx4-bs.m4c .cx4-ea{font-size:13px} html body.single-product .cx3-pd .cx4-bs.m4c .cx4-ea small{font-size:11px} html body.single-product .cx3-pd .cx4-bs.m4c .cx4-p{gap:4px} html body.single-product .cx3-pd .cx4-bs.m4c .cx4-off{font-size:9.5px;padding:3px 5px} html body.single-product .cx3-pd .cx4-bs.m3s .cx4-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} html body.single-product .cx3-pd .cx4-bs.m2s .cx4-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;row-gap:18px} html body.single-product .cx3-pd .cx4-bs.m3s button.cx4-t,html body.single-product .cx3-pd .cx4-bs.m2s button.cx4-t{flex-wrap:wrap;gap:7px;row-gap:9px;padding:18px 11px 14px} html body.single-product .cx3-pd .cx4-bs.m3s button.cx4-t.on,html body.single-product .cx3-pd .cx4-bs.m2s button.cx4-t.on{padding:17px 10px 13px} html body.single-product .cx3-pd .cx4-bs.m3s .cx4-radio,html body.single-product .cx3-pd .cx4-bs.m2s .cx4-radio{flex-basis:20px;width:20px;height:20px} html body.single-product .cx3-pd .cx4-bs.m3s .cx4-vg img,html body.single-product .cx3-pd .cx4-bs.m2s .cx4-vg img{width:18px !important;height:45px !important} html body.single-product .cx3-pd .cx4-bs.m3s .cx4-vg5 img,html body.single-product .cx3-pd .cx4-bs.m2s .cx4-vg5 img{margin-left:-6px} html body.single-product .cx3-pd .cx4-bs.m3s .cx4-vg5 img:first-child,html body.single-product .cx3-pd .cx4-bs.m2s .cx4-vg5 img:first-child{margin-left:0} html body.single-product .cx3-pd .cx4-bs.m3s .cx4-tx,html body.single-product .cx3-pd .cx4-bs.m2s .cx4-tx{flex:1 0 100%;gap:4px} html body.single-product .cx3-pd .cx4-bs.m3s .cx4-n,html body.single-product .cx3-pd .cx4-bs.m2s .cx4-n{font-size:14px} html body.single-product .cx3-pd .cx4-bs.m3s .cx4-p,html body.single-product .cx3-pd .cx4-bs.m2s .cx4-p{flex-wrap:wrap;gap:5px} } /* PRODUCT PAGE - buy column: 3 trust items replace the 4 specs, taller/wider image (desktop) */ @media (min-width:850px){ html body.single-product .cx3-pd.cx5-ready .cx3-specs{display:none !important} html body.single-product .cx3-pd .cx5-trust{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0;padding:16px 8px;background:#fff;border:1px solid rgba(8,8,8,.09);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 5px 16px rgba(0,0,0,.04)} html body.single-product .cx3-pd .cx5-trust > div{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center;gap:8px !important;padding:2px 12px !important;text-align:center} html body.single-product .cx3-pd .cx5-trust > div + div{border-left:1px solid #E3E9E6} html body.single-product .cx3-pd .cx5-trust > div > svg{width:28px !important;height:28px !important;stroke-width:1.6} html body.single-product .cx3-pd .cx5-trust > div > div{font-size:13px !important;line-height:1.4 !important;color:#1a1c1b !important} html body.single-product .cx3-pd .cx5-trust > div > div b{display:block;font-size:15px;font-weight:800;color:#101513 !important} html body.single-product .cx3-pd .cx5-trust > div > div span{display:block;margin-top:2px;font-size:13px !important;font-weight:600 !important;color:#17A673 !important} html body.single-product .cx3-pd .cx5-trust > div > div br{display:none} html body.single-product .cx3-strip.cx5-lean{display:none !important} html body.single-product .cx3-pd.cx5-ready .cx3-coa{margin-top:40px !important} html body.single-product .product-main .product-gallery .product-images{max-width:680px !important;width:100% !important;height:auto !important;min-height:0 !important} html body.single-product .product-main .product-gallery .product-images .woocommerce-product-gallery__wrapper,html body.single-product .product-main .product-gallery .product-images .woocommerce-product-gallery__image,html body.single-product .product-main .product-gallery .product-images .woocommerce-product-gallery__image > a,html body.single-product .product-main .product-gallery .product-images .woocommerce-product-gallery__image img{height:var(--cx5-h,689px) !important} html body.single-product .product-main .product-gallery .product-images .woocommerce-product-gallery__image,html body.single-product .product-main .product-gallery .product-images .woocommerce-product-gallery__image > a,html body.single-product .product-main .product-gallery .product-images .woocommerce-product-gallery__image img{width:100% !important} } /* BUNDLE & SAVE - laptop widths: slim horizontal tiles (m3n / m3w) */ @media (min-width:850px){ html body.single-product .cx3-pd .cx4-bs.m3n,html body.single-product .cx3-pd .cx4-bs.m3w{padding:13px 12px 12px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-head,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-head{margin:0 2px 11px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-title,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-title{font-size:20px;gap:8px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-ico,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-ico{width:24px;height:24px;flex-basis:24px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-note,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-note{font-size:12px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-grid,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} html body.single-product .cx3-pd .cx4-bs.m3n button.cx4-t,html body.single-product .cx3-pd .cx4-bs.m3w button.cx4-t{gap:7px;padding:11px 9px} html body.single-product .cx3-pd .cx4-bs.m3n button.cx4-t.on,html body.single-product .cx3-pd .cx4-bs.m3w button.cx4-t.on{padding:10px 8px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-radio,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-radio{flex-basis:18px;width:18px;height:18px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-vg img,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-vg img{width:16px !important;height:40px !important;margin-left:-2px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-vg5 img,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-vg5 img{margin-left:-6px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-vg img:first-child,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-vg img:first-child{margin-left:0} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-tx,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-tx{gap:3px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-n,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-n{font-size:13px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-ea,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-ea{font-size:13px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-ea small,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-ea small{font-size:10.5px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-p,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-p{gap:4px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-off,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-off{font-size:9.5px;padding:2px 5px} html body.single-product .cx3-pd .cx4-bs.m3n .cx4-flag,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-flag{font-size:9.5px;padding:3px 10px;top:-9px} html body.single-product .cx3-pd .cx4-bs.m3w .cx4-p{flex-direction:column;align-items:flex-start;gap:3px} } /* PRODUCT PAGE - slimmer trust card under Add to Cart (icon beside text) */ @media (min-width:850px){ html body.single-product .cx3-pd .cx5-trust{padding:11px 6px !important} html body.single-product .cx3-pd .cx5-trust > div{flex-direction:row !important;justify-content:center !important;gap:10px !important;padding:0 10px !important;text-align:left !important} html body.single-product .cx3-pd .cx5-trust > div > svg{width:24px !important;height:24px !important;flex:0 0 24px} html body.single-product .cx3-pd .cx5-trust > div > div{line-height:1.25 !important} html body.single-product .cx3-pd .cx5-trust > div > div b{font-size:14px !important;white-space:nowrap} html body.single-product .cx3-pd .cx5-trust > div > div span{font-size:12px !important;margin-top:1px !important;white-space:nowrap} } /* BUNDLE & SAVE - smaller % OFF pill, 5 vials not squished */ @media (min-width:850px){ html body.single-product .cx3-pd .cx4-bs .cx4-off{font-size:9px !important;padding:1px 5px !important;letter-spacing:0 !important;line-height:1.35 !important;font-weight:800 !important} html body.single-product .cx3-pd .cx4-bs .cx4-p{gap:5px !important} html body.single-product .cx3-pd .cx4-bs .cx4-vg5 img:not(:first-child){margin-left:-3px !important} } /* BUNDLE & SAVE - more space between vials and text */ @media (min-width:850px){ html body.single-product .cx3-pd .cx4-bs .cx4-tx{margin-left:6px !important} html body.single-product .cx3-pd .cx4-bs.m4c .cx4-tx,html body.single-product .cx3-pd .cx4-bs.m3n .cx4-tx,html body.single-product .cx3-pd .cx4-bs.m3w .cx4-tx{margin-left:5px !important} html body.single-product .cx3-pd .cx4-bs.m3n button.cx4-t,html body.single-product .cx3-pd .cx4-bs.m3w button.cx4-t{padding-left:7px !important;padding-right:7px !important} html body.single-product .cx3-pd .cx4-bs.m3n button.cx4-t.on,html body.single-product .cx3-pd .cx4-bs.m3w button.cx4-t.on{padding-left:6px !important;padding-right:6px !important} } /* HEADER - product pages: same 84px nav bar as the homepage (desktop) */ @media (min-width:850px){ html body.single-product #header.transparent .header-wrapper:not(.stuck) .header-main{height:84px !important} html body.single-product #header.transparent .header-wrapper:not(.stuck) .header-main #logo img{max-height:64px !important} } /* PRODUCT PAGE - raise the product content 16px (desktop). The cdxfda script adds 61 (over 1024) or 96 to this base, so -95 becomes -111 */ @media (min-width:850px){ html body.single-product .product-container > .product-main{margin-top:-111px !important} html body.single-product .product-page-title .next-prev-thumbs{position:relative;top:-16px} } /* PRODUCT DESC - Storage & Handling expanded panel (cxsh, desktop 1101+) */ .cxrb .cxsh{display:none} @media (min-width:1101px){ html body .cxrb.cxrb-storage.cxsh-ok[data-open="1"] .cxrb-more{display:none !important} html body .cxrb.cxrb-storage.cxsh-ok[data-open="1"] .cxsh{display:block;animation:cxshIn .35s ease both} @keyframes cxshIn{from{opacity:0}to{opacity:1}} html body .cxrb.cxrb-storage .cxsh{position:relative;z-index:2;clear:both;container-type:inline-size;padding:4px 34px 30px;font-family:"DM Sans",-apple-system,Helvetica,Arial,sans-serif;color:#0B1A33;text-align:left} html body .cxrb.cxrb-storage .cxsh *{box-sizing:border-box} html body .cxrb.cxrb-storage .cxsh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr) 230px;grid-template-areas:"s1 s2 s3 v" "s4 s5 s5 v";gap:14px} html body .cxrb.cxrb-storage .cxsh-s{position:relative;padding:18px 18px 16px;background:rgba(255,255,255,.82);border:1px solid #D9E5F5;border-radius:14px;box-shadow:0 2px 10px rgba(20,60,120,.05);min-width:0} html body .cxrb.cxrb-storage .cxsh-s1{grid-area:s1} html body .cxrb.cxrb-storage .cxsh-s2{grid-area:s2} html body .cxrb.cxrb-storage .cxsh-s3{grid-area:s3} html body .cxrb.cxrb-storage .cxsh-s4{grid-area:s4} html body .cxrb.cxrb-storage .cxsh-s5{grid-area:s5} html body .cxrb.cxrb-storage .cxsh-h{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px} html body .cxrb.cxrb-storage .cxsh-n{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#1D6FE0;color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(29,111,224,.3)} html body .cxrb.cxrb-storage .cxsh-t{display:block;font-size:17px;line-height:1.2;font-weight:800;color:#0B1A33;letter-spacing:-.01em} html body .cxrb.cxrb-storage .cxsh-st{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;font-weight:500;color:#51617A} html body .cxrb.cxrb-storage .cxsh-ic{display:flex;align-items:center;justify-content:center;border-radius:10px;background:#E8F1FD;color:#1D6FE0} html body .cxrb.cxrb-storage .cxsh-ic svg,html body .cxrb.cxrb-storage .cxsh-note svg,html body .cxrb.cxrb-storage .cxsh-foot svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} html body .cxrb.cxrb-storage .cxsh-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #E6EEF8} html body .cxrb.cxrb-storage .cxsh-row:first-of-type{border-top:0;padding-top:2px} html body .cxrb.cxrb-storage .cxsh-row .cxsh-ic{width:40px;height:40px} html body .cxrb.cxrb-storage .cxsh-row .cxsh-ic svg{width:21px;height:21px} html body .cxrb.cxrb-storage .cxsh-row b{display:block;font-size:13.5px;line-height:1.25;font-weight:800;color:#0B1A33} html body .cxrb.cxrb-storage .cxsh-row em{display:block;margin-top:1px;font-style:normal;font-size:12px;line-height:1.35;font-weight:500;color:#51617A} html body .cxrb.cxrb-storage .cxsh-bdg{min-width:92px;padding:7px 10px;border-radius:10px;background:#E8F1FD;text-align:center;line-height:1.1} html body .cxrb.cxrb-storage .cxsh-bdg strong{display:block;font-size:13.5px;font-weight:800;color:#1D6FE0;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em} html body .cxrb.cxrb-storage .cxsh-bdg small{display:block;margin-top:3px;font-size:8.5px;font-weight:800;letter-spacing:.12em;color:#5A7AB0;text-transform:uppercase} html body .cxrb.cxrb-storage .cxsh-flow{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;margin-top:4px} html body .cxrb.cxrb-storage .cxsh-step{flex:1 1 0;min-width:0;text-align:center} html body .cxrb.cxrb-storage .cxsh-step .cxsh-ic{width:58px;height:58px;margin:0 auto 10px;border-radius:14px} html body .cxrb.cxrb-storage .cxsh-step .cxsh-ic svg{width:27px;height:27px} html body .cxrb.cxrb-storage .cxsh-step b{display:block;font-size:13px;line-height:1.25;font-weight:800;color:#0B1A33} html body .cxrb.cxrb-storage .cxsh-step em{display:block;margin-top:7px;font-style:normal;font-size:11px;line-height:1.4;font-weight:500;color:#51617A} html body .cxrb.cxrb-storage .cxsh-arr{flex:0 0 14px;margin-top:21px;color:#1D6FE0;font-size:16px;font-weight:700;text-align:center} html body .cxrb.cxrb-storage .cxsh-chk{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid #E6EEF8;font-size:13px;line-height:1.3;font-weight:600;color:#1B2A42} html body .cxrb.cxrb-storage .cxsh-chk:first-of-type{border-top:0} html body .cxrb.cxrb-storage .cxsh-chk i{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#1E9E62 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat} html body .cxrb.cxrb-storage .cxsh-alert{display:flex;align-items:center;gap:11px;margin-top:10px;padding:10px 12px;border-radius:10px;background:#FDECEF;color:#C8102E;font-size:12.5px;line-height:1.35;font-weight:700} html body .cxrb.cxrb-storage .cxsh-alert i{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#E0344B;color:#fff;font-style:normal;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center} html body .cxrb.cxrb-storage .cxsh-cl{display:flex;align-items:center;gap:11px;padding:5px 0;font-size:13px;line-height:1.3;font-weight:500;color:#26354D;cursor:pointer;user-select:none;position:relative;z-index:1} html body .cxrb.cxrb-storage .cxsh-cl i{flex:0 0 16px;width:16px;height:16px;border:1.8px solid #1B2A42;border-radius:3px;background:#fff;transition:background-color .15s,border-color .15s} html body .cxrb.cxrb-storage .cxsh-cl.on i{border-color:#1D6FE0;background:#1D6FE0 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} html body .cxrb.cxrb-storage .cxsh-cl.on{color:#51617A} html body .cxrb.cxrb-storage .cxsh-clip{position:absolute;right:22px;bottom:16px;width:86px;height:86px;color:#C9D8EC;opacity:.7;pointer-events:none} html body .cxrb.cxrb-storage .cxsh-clip svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} html body .cxrb.cxrb-storage .cxsh-note{display:grid;grid-template-columns:36px minmax(150px,.8fr) minmax(0,1.6fr);align-items:center;gap:10px;padding:7px 10px;border-top:1px solid #E6EEF8;background:linear-gradient(90deg,#F3F7FD,rgba(243,247,253,0))} html body .cxrb.cxrb-storage .cxsh-note:first-of-type{border-top:0} html body .cxrb.cxrb-storage .cxsh-note svg{width:21px;height:21px;color:#1D6FE0;margin:0 auto;display:block} html body .cxrb.cxrb-storage .cxsh-note b{font-size:13px;line-height:1.25;font-weight:700;color:#0B1A33} html body .cxrb.cxrb-storage .cxsh-note em{font-style:normal;font-size:12.5px;line-height:1.4;font-weight:500;color:#3F4E66} html body .cxrb.cxrb-storage .cxsh-v{grid-area:v;position:relative;min-height:420px;border-radius:14px;overflow:hidden;background-color:#BCD3EF;background-repeat:no-repeat;background-size:auto 112%;background-position:70% 90%;box-shadow:0 2px 10px rgba(20,60,120,.08)} html body .cxrb.cxrb-storage .cxsh-v::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,32,74,.92) 0%,rgba(16,48,102,.62) 26%,rgba(20,60,120,.0) 48%)} html body .cxrb.cxrb-storage .cxsh-v span{position:absolute;right:22px;top:26px;text-align:left;font-size:11.5px;line-height:1.75;font-weight:700;letter-spacing:.2em;color:#fff;text-transform:uppercase} html body .cxrb.cxrb-storage .cxsh-v span::after{content:"";display:block;width:30px;height:2px;margin-top:10px;background:rgba(255,255,255,.8)} html body .cxrb.cxrb-storage .cxsh-foot{display:flex;align-items:center;gap:18px;margin-top:14px;padding:13px 22px;border-radius:12px;background:#E6EFFC;border:1px solid #D6E3F6} html body .cxrb.cxrb-storage .cxsh-foot > svg{width:24px;height:24px;color:#1D6FE0;flex:0 0 24px} html body .cxrb.cxrb-storage .cxsh-foot > i{width:1.5px;height:26px;background:#1D6FE0;opacity:.55;flex:0 0 1.5px} html body .cxrb.cxrb-storage .cxsh-foot > span{flex:1 1 auto;font-size:14.5px;line-height:1.4;font-weight:500;color:#1D4FA6} html body .cxrb.cxrb-storage .cxsh-foot > a{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:.18em;color:#1D4FA6;text-decoration:none;text-transform:uppercase;white-space:nowrap} html body .cxrb.cxrb-storage .cxsh-foot > a svg{width:18px;height:18px} html body .cxrb.cxrb-storage .cxsh-foot > a:hover{color:#1D6FE0} @container (max-width:1299px){ html body .cxrb.cxrb-storage .cxsh-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 200px;grid-template-areas:"s1 s2 v" "s3 s4 v" "s5 s5 s5"} html body .cxrb.cxrb-storage .cxsh-note{grid-template-columns:36px minmax(170px,.55fr) minmax(0,1.6fr)} html body .cxrb.cxrb-storage .cxsh-v span{right:16px;font-size:10.5px} } @container (max-width:879px){ html body .cxrb.cxrb-storage .cxsh-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"s1 s2" "s3 s4" "s5 s5"} html body .cxrb.cxrb-storage .cxsh-v{display:none} } } /* PRODUCT DESC - cxsh vial column: one-line title centred on the vial */ @media (min-width:1101px){ html body .cxrb.cxrb-storage .cxsh-v span{right:auto !important;white-space:nowrap;text-align:center;letter-spacing:.05em;line-height:1.3} html body .cxrb.cxrb-storage .cxsh-v span::after{margin:9px auto 0} } /* PRODUCT DESC - Research Overview expanded panel (cxov, desktop 1101+) */ .cxrb .cxov{display:none} @media (min-width:1101px){ html body .cxrb.cxrb-overview.cxov-ok[data-open="1"] .cxrb-more{display:none !important} html body .cxrb.cxrb-overview.cxov-ok[data-open="1"] .cxov{display:block;animation:cxovIn .35s ease both} @keyframes cxovIn{from{opacity:0}to{opacity:1}} html body .cxrb.cxrb-overview .cxov{position:relative;z-index:2;clear:both;container-type:inline-size;padding:6px 34px 30px;font-family:"DM Sans",-apple-system,Helvetica,Arial,sans-serif;color:#0B1A14;text-align:left;--g:var(--cxa,#12A05B)} html body .cxrb.cxrb-overview .cxov *{box-sizing:border-box} html body .cxrb.cxrb-overview .cxov p{margin:0} html body .cxrb.cxrb-overview .cxov svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} html body .cxrb.cxrb-overview .cxov-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.12fr) minmax(0,1fr) minmax(0,.92fr);background:rgba(255,255,255,.62);border:1px solid #D5EBDD;border-radius:16px;padding:22px 0} html body .cxrb.cxrb-overview .cxov-c{padding:0 24px;border-left:1px solid #DCEDE2;min-width:0} html body .cxrb.cxrb-overview .cxov-c1{border-left:0} html body .cxrb.cxrb-overview .cxov-h{display:flex;align-items:center;gap:12px;margin:0 0 10px} html body .cxrb.cxrb-overview .cxov-n{flex:0 0 auto;min-width:40px;height:28px;padding:0 9px;border-radius:7px;background:var(--g);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.02em} html body .cxrb.cxrb-overview .cxov-t{font-size:18px;line-height:1.2;font-weight:800;color:#0B1A14;letter-spacing:-.01em} html body .cxrb.cxrb-overview .cxov-st{font-size:13.5px;line-height:1.45;font-weight:500;color:#42534A;margin:0 0 12px} html body .cxrb.cxrb-overview .cxov-body{font-size:14.5px;line-height:1.55;font-weight:500;color:#26352D} html body .cxrb.cxrb-overview .cxov-cls{margin-top:18px;padding:16px 16px 14px;border-radius:12px;background:#F2FAF5;border:1px solid #DCEDE2;text-align:center} html body .cxrb.cxrb-overview .cxov-cls small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-bottom:6px} html body .cxrb.cxrb-overview .cxov-cls b{display:block;font-size:15px;line-height:1.35;font-weight:800;color:#0B1A14} html body .cxrb.cxrb-overview .cxov-cls::after{content:"";display:block;width:70%;height:10px;margin:10px auto 0;border:1.5px solid #9DB9A8;border-top:0} html body .cxrb.cxrb-overview .cxov-ic{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#E6F5EC;color:var(--g);display:flex;align-items:center;justify-content:center} html body .cxrb.cxrb-overview .cxov-ic svg{width:22px;height:22px} html body .cxrb.cxrb-overview .cxov-row{display:flex;align-items:center;gap:13px;margin:0 0 8px;padding:9px 12px;border-radius:12px;background:#F4FAF6;border:1px solid #E1F0E6;font-size:13px;line-height:1.4;font-weight:500;color:#26352D} html body .cxrb.cxrb-overview .cxov-call{display:flex;align-items:flex-start;gap:12px;margin-top:10px;padding:12px 14px;border-radius:12px;background:#E3F5EA;border:1px solid #CBE9D6;font-size:13px;line-height:1.45;font-weight:700;color:#0E7A42} html body .cxrb.cxrb-overview .cxov-call > svg{flex:0 0 22px;width:22px;height:22px;margin-top:1px;color:var(--g)} html body .cxrb.cxrb-overview .cxov-call-lg{font-size:14px;font-weight:600;color:#1D5B37;padding:16px} html body .cxrb.cxrb-overview .cxov-area{display:flex;align-items:center;gap:14px;padding:8px 0;border-top:1px solid #E6F1EA} html body .cxrb.cxrb-overview .cxov-area:first-of-type{border-top:0} html body .cxrb.cxrb-overview .cxov-area b{font-size:14px;line-height:1.35;font-weight:700;color:#0B1A14} html body .cxrb.cxrb-overview .cxov-ic-o{background:#fff;border:1.5px solid #CBE9D6} html body .cxrb.cxrb-overview .cxov-kv{display:flex;align-items:center;gap:13px;padding:10px 0;border-top:1px solid #E6F1EA} html body .cxrb.cxrb-overview .cxov-kv:first-of-type{border-top:0;padding-top:2px} html body .cxrb.cxrb-overview .cxov-kv > svg{flex:0 0 22px;width:22px;height:22px;color:var(--g)} html body .cxrb.cxrb-overview .cxov-kv small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6A7D72} html body .cxrb.cxrb-overview .cxov-kv b{display:block;margin-top:2px;font-size:14px;line-height:1.35;font-weight:700;color:#0B1A14} html body .cxrb.cxrb-overview .cxov-imp{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid #CBE9D6} html body .cxrb.cxrb-overview .cxov-imp > svg{flex:0 0 34px;width:34px;height:34px;padding:6px;border-radius:50%;background:#E6F5EC;color:var(--g)} html body .cxrb.cxrb-overview .cxov-imp span{font-size:13px;line-height:1.5;font-weight:500;color:#26352D} html body .cxrb.cxrb-overview .cxov-imp b{display:block;margin-bottom:3px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--g)} html body .cxrb.cxrb-overview .cxov-foot{display:flex;align-items:center;gap:18px;margin-top:14px;padding:13px 22px;border-radius:12px;background:#EAF6EF;border:1px solid #D5EBDD} html body .cxrb.cxrb-overview .cxov-foot > svg{width:24px;height:24px;color:var(--g);flex:0 0 24px} html body .cxrb.cxrb-overview .cxov-foot > i{width:1.5px;height:26px;background:var(--g);opacity:.55;flex:0 0 1.5px} html body .cxrb.cxrb-overview .cxov-foot > span{flex:1 1 auto;font-size:14.5px;line-height:1.4;font-weight:500;color:#2E4A3A} html body .cxrb.cxrb-overview .cxov-foot > a{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:.18em;color:#0E7A42;text-decoration:none;text-transform:uppercase;white-space:nowrap} html body .cxrb.cxrb-overview .cxov-foot > a svg{width:18px;height:18px} html body .cxrb.cxrb-overview .cxov-foot > a:hover{color:var(--g)} @container (max-width:1299px){ html body .cxrb.cxrb-overview .cxov-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:22px} html body .cxrb.cxrb-overview .cxov-c3{border-left:0} html body .cxrb.cxrb-overview .cxov-c3,html body .cxrb.cxrb-overview .cxov-c4{padding-top:20px;border-top:1px solid #DCEDE2} } } /* PRODUCT DESC - cxov: "What is" becomes a profile tile grid (no repeat of the band paragraph) */ @media (min-width:1101px){ html body .cxrb.cxrb-overview .cxov-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} html body .cxrb.cxrb-overview .cxov-tile{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:12px;background:#F2FAF5;border:1px solid #DCEDE2;min-width:0} html body .cxrb.cxrb-overview .cxov-tile-w{grid-column:1 / -1;background:#E6F5EC;border-color:#CBE9D6} html body .cxrb.cxrb-overview .cxov-tile > svg{flex:0 0 34px;width:34px;height:34px;padding:7px;border-radius:50%;background:#fff;color:var(--g);border:1.5px solid #CBE9D6} html body .cxrb.cxrb-overview .cxov-tile small{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6A7D72} html body .cxrb.cxrb-overview .cxov-tile b{display:block;margin-top:3px;font-size:14px;line-height:1.35;font-weight:800;color:#0B1A14} html body .cxrb.cxrb-overview .cxov-tile-w b{font-size:15.5px} } /* PRODUCT DESC - Intended Use & Legal Disclaimer expanded panel (cxiu, desktop 1101+) */ .cxrb .cxiu{display:none} @media (min-width:1101px){ html body .cxrb.cxrb-intended.cxiu-ok[data-open="1"] .cxrb-more{display:none !important} html body .cxrb.cxrb-intended.cxiu-ok[data-open="1"] .cxiu{display:block;animation:cxiuIn .35s ease both} @keyframes cxiuIn{from{opacity:0}to{opacity:1}} html body .cxrb.cxrb-intended .cxiu{position:relative;z-index:2;clear:both;container-type:inline-size;padding:6px 34px 30px;font-family:"DM Sans",-apple-system,Helvetica,Arial,sans-serif;color:#2C2C2A;text-align:left;--b:var(--cxa,#8A6234)} html body .cxrb.cxrb-intended .cxiu *{box-sizing:border-box} html body .cxrb.cxrb-intended .cxiu p{margin:0} html body .cxrb.cxrb-intended .cxiu svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} html body .cxrb.cxrb-intended .cxiu-grid{display:grid;grid-template-columns:220px repeat(3,minmax(0,1fr)) minmax(0,1.75fr);gap:14px;align-items:stretch} html body .cxrb.cxrb-intended .cxiu-tile{position:relative;min-height:330px;border-radius:14px;overflow:hidden;background-color:#15120D;background-repeat:no-repeat;background-size:auto 250%;background-position:67.5% 0} html body .cxrb.cxrb-intended .cxiu-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,7,.15) 0%,rgba(10,9,7,.35) 40%,rgba(10,9,7,.88) 78%)} html body .cxrb.cxrb-intended .cxiu-tile span{position:absolute;left:22px;right:18px;bottom:24px} html body .cxrb.cxrb-intended .cxiu-tile b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:24px;line-height:1.15;font-weight:400;letter-spacing:.02em;color:#fff;text-transform:uppercase} html body .cxrb.cxrb-intended .cxiu-tile i{display:block;width:30px;height:1.5px;margin:16px 0 12px;background:rgba(255,255,255,.75)} html body .cxrb.cxrb-intended .cxiu-tile small{display:block;font-size:10.5px;line-height:1.75;font-weight:700;letter-spacing:.24em;color:rgba(255,255,255,.88);text-transform:uppercase} html body .cxrb.cxrb-intended .cxiu-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px 14px;border-radius:14px;background:#FBFAF7;border:1px solid #E6E0D4;box-shadow:0 2px 10px rgba(60,45,20,.05);min-width:0} html body .cxrb.cxrb-intended .cxiu-ic{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:#EFE7DA;color:#2C2C2A;margin-bottom:14px} html body .cxrb.cxrb-intended .cxiu-ic svg{width:28px;height:28px} html body .cxrb.cxrb-intended .cxiu-ct{display:block;font-size:17px;line-height:1.25;font-weight:800;color:#1E1D1B;margin-bottom:8px} html body .cxrb.cxrb-intended .cxiu-cb{font-size:13.5px;line-height:1.5;font-weight:500;color:#5B564D} html body .cxrb.cxrb-intended .cxiu-sub{margin-top:auto;width:100%;padding:12px 14px;border-radius:10px;background:#F2EEE6;text-align:left} html body .cxrb.cxrb-intended .cxiu-cb + .cxiu-sub{margin-top:auto} html body .cxrb.cxrb-intended .cxiu-card .cxiu-cb{margin-bottom:16px} html body .cxrb.cxrb-intended .cxiu-sub b{display:block;font-size:13.5px;line-height:1.3;font-weight:700;color:#1E1D1B} html body .cxrb.cxrb-intended .cxiu-sub span{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;font-weight:500;color:#6B655B} html body .cxrb.cxrb-intended .cxiu-dark{display:grid;grid-template-columns:40% 60%;border-radius:14px;overflow:hidden;background:#0E0D0B;min-width:0} html body .cxrb.cxrb-intended .cxiu-ph{position:relative;display:flex;align-items:flex-end;justify-content:center;padding:18px 8px 0;background:radial-gradient(ellipse 70% 42% at 50% 78%,rgba(216,172,99,.28),rgba(216,172,99,0) 70%),linear-gradient(180deg,#1A1712,#0B0A08)} html body .cxrb.cxrb-intended .cxiu-ph::after{content:"";position:absolute;left:12%;right:12%;bottom:10%;height:2px;background:linear-gradient(90deg,transparent,rgba(216,172,99,.55),transparent)} html body .cxrb.cxrb-intended .cxiu-ph{overflow:hidden} html body .cxrb.cxrb-intended .cxiu-ph img{position:absolute;left:50%;bottom:8%;height:82% !important;width:auto !important;max-width:none !important;transform:translateX(-50%);filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))} html body .cxrb.cxrb-intended .cxiu-dt{padding:26px 24px 22px 18px;color:#D9D4CA} html body .cxrb.cxrb-intended .cxiu-dt::before{content:"";display:block;height:1px;margin-bottom:18px;background:rgba(216,172,99,.45)} html body .cxrb.cxrb-intended .cxiu-dh{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#fff} html body .cxrb.cxrb-intended .cxiu-dh i,html body .cxrb.cxrb-intended .cxiu-liab i{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#D8AC63;color:#0E0D0B;font-style:normal;font-family:Georgia,serif;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;letter-spacing:0} html body .cxrb.cxrb-intended .cxiu-dt p{font-size:13.5px;line-height:1.6;font-weight:500;color:#D9D4CA} html body .cxrb.cxrb-intended .cxiu-dt p::after{content:"";display:block;width:36px;height:1.5px;margin-top:16px;background:rgba(216,172,99,.7)} html body .cxrb.cxrb-intended .cxiu-liab{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border-radius:10px;border:1px solid rgba(216,172,99,.45);font-size:13px;line-height:1.5;color:#EDE8DE} html body .cxrb.cxrb-intended .cxiu-foot{display:flex;align-items:center;gap:18px;margin-top:14px;padding:12px 14px 12px 16px;border-radius:12px;background:#EFEBE3;border:1px solid #E2DBCD} html body .cxrb.cxrb-intended .cxiu-fi{flex:0 0 44px;width:44px;height:44px;border-radius:10px;background:#FBFAF7;color:#2C2C2A;display:flex;align-items:center;justify-content:center} html body .cxrb.cxrb-intended .cxiu-fi svg{width:24px;height:24px} html body .cxrb.cxrb-intended .cxiu-foot > i{flex:0 0 1px;width:1px;height:30px;background:#CFC6B5} html body .cxrb.cxrb-intended .cxiu-foot > b{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#3A3833;white-space:nowrap} html body .cxrb.cxrb-intended .cxiu-ft{flex:1 1 auto;font-size:13.5px;line-height:1.45;font-weight:500;color:#4F4A42} html body .cxrb.cxrb-intended .cxiu-foot > a{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;padding:13px 22px;border-radius:999px;background:var(--b);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .15s} html body .cxrb.cxrb-intended .cxiu-foot > a svg{width:18px;height:18px} html body .cxrb.cxrb-intended .cxiu-foot > a:hover{background:#6F4E28;color:#fff} @container (max-width:1299px){ html body .cxrb.cxrb-intended .cxiu-grid{grid-template-columns:190px repeat(3,minmax(0,1fr))} html body .cxrb.cxrb-intended .cxiu-dark{grid-column:1 / -1;grid-template-columns:30% 70%;min-height:230px} html body .cxrb.cxrb-intended .cxiu-dt{padding:22px 28px 22px 20px} html body .cxrb.cxrb-intended .cxiu-foot > b{display:none} html body .cxrb.cxrb-intended .cxiu-foot > i:nth-of-type(2){display:none} } @container (max-width:879px){ html body .cxrb.cxrb-intended .cxiu-grid{grid-template-columns:repeat(2,minmax(0,1fr))} html body .cxrb.cxrb-intended .cxiu-tile{min-height:260px} html body .cxrb.cxrb-intended .cxiu-foot{flex-wrap:wrap} } } /* PRODUCT DESC - cxiu tile: raised title, one-line tagline at the bottom */ @media (min-width:1101px){ html body .cxrb.cxrb-intended .cxiu-tile{container-type:inline-size} html body .cxrb.cxrb-intended .cxiu-tile::before{background:linear-gradient(180deg,rgba(10,9,7,.30) 0%,rgba(10,9,7,.62) 34%,rgba(10,9,7,.70) 60%,rgba(10,9,7,.92) 100%) !important} html body .cxrb.cxrb-intended .cxiu-tile span.cxiu-tt{position:absolute;left:20px;right:16px;top:27%;bottom:auto} html body .cxrb.cxrb-intended .cxiu-tile .cxiu-tt i{display:block;width:30px;height:2px;margin:0 0 14px;background:#D8AC63} html body .cxrb.cxrb-intended .cxiu-tile .cxiu-tt b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:12.2cqw;line-height:1.08;font-weight:400;letter-spacing:.02em;color:#fff;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.55)} html body .cxrb.cxrb-intended .cxiu-tile .cxiu-tt b em{display:block;margin-top:4px;font-style:italic;color:#D8AC63;letter-spacing:.04em} html body .cxrb.cxrb-intended .cxiu-tile small.cxiu-tb{position:absolute;left:16px;right:16px;bottom:18px;padding-top:12px;border-top:1px solid rgba(216,172,99,.55);white-space:nowrap;text-align:center;font-size:4.4cqw;line-height:1.2;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.92);text-transform:uppercase;overflow:hidden} } /* PRODUCT DESC - cxov: 01 What is gets its own intro copy (not the band lede) */ @media (min-width:1101px){ html body .cxrb.cxrb-overview .cxov-what{margin:0 0 16px;font-size:14px;line-height:1.6;color:#26352D} } /* PRODUCT DESC - cxov: 01 keeps only the Compound class tile */ @media (min-width:1101px){ html body .cxrb.cxrb-overview .cxov-tile:not(.cxov-tile-w){display:none !important} } /* PRODUCT DESC - cxov: space between the 01 intro and the Compound class tile */ @media (min-width:1101px){ html body .cxrb.cxrb-overview .cxov .cxov-tiles{margin-top:20px !important} } /* PRODUCT DESC - cxov: longer multi-paragraph 01 intro */ @media (min-width:1101px){ html body .cxrb.cxrb-overview .cxov .cxov-what p{margin:0 0 11px;font-size:14px;line-height:1.62;font-weight:500;color:#26352D} html body .cxrb.cxrb-overview .cxov .cxov-what p:last-child{margin-bottom:0} } /* PRODUCT DESC - cxov MacBook: spread 02 rows, green callout lines up with Compound class */ @media (min-width:1101px){ @container (max-width:1299px){ html body .cxrb.cxrb-overview .cxov .cxov-c1{display:flex;flex-direction:column} html body .cxrb.cxrb-overview .cxov .cxov-c1 .cxov-what{padding-bottom:20px} html body .cxrb.cxrb-overview .cxov .cxov-c1 .cxov-tiles{margin-top:auto !important} html body .cxrb.cxrb-overview .cxov .cxov-c2:has(.cxov-row){display:flex;flex-direction:column} html body .cxrb.cxrb-overview .cxov .cxov-c2:has(.cxov-row) .cxov-row{margin-top:auto !important;margin-bottom:0 !important} html body .cxrb.cxrb-overview .cxov .cxov-c2:has(.cxov-row) .cxov-call{margin-top:auto !important;align-items:center} html body .cxrb.cxrb-overview .cxov .cxov-tile-w{align-items:center} } } /* cxsh checklist: keyboard focus ring */ html body .cxsh .cxsh-cl{cursor:pointer} html body .cxsh .cxsh-cl:focus{outline:none} html body .cxsh .cxsh-cl:focus-visible{outline:2px solid #1FA876;outline-offset:3px;border-radius:6px} /* PRODUCT PAGE - fit the hero on short screens (desktop). The cxfit-hero script sets --cxfit on the visible .cx3-pd so the image + buy column always fit in the first screen */ @media (min-width:850px){ html body.single-product .cx3-pd > .cx3-hero, html body.single-product .cx3-pd > .cx4-bs, html body.single-product .cx3-pd > form.cart, html body.single-product .cx3-pd > .spar-product-points, html body.single-product .cx3-pd > .cx5-trust{zoom:var(--cxfit,1)} html body.single-product .product-main .product-gallery .product-images{max-width:min(680px, calc(var(--cx5-h, 611px) * 1.125)) !important;margin-left:auto !important;margin-right:auto !important} } /* HOMEPAGE HERO - keep the copy clear of the GHK-Cu vial (cxhero-clear script sets --cxclr + .cxclr on the text column) */ @media (min-width:850px){ html body.home .hero-grid > div.cxclr > p, html body.home .hero-grid > div.cxclr > .mini-stats{max-width:var(--cxclr) !important} html body.home .hero-grid > div.cxclr > .mini-stats{flex-wrap:nowrap !important;column-gap:22px !important} html body.home .hero-grid > div.cxclr > .mini-stats .mini-stat{min-width:0 !important;flex:0 1 auto !important} html body.home .hero-grid > div.cxclr.cxclr-t > .mini-stats{column-gap:14px !important;zoom:.9} html body.home .hero-grid > div.cxclr.cxclr-t > .mini-stats{max-width:calc(var(--cxclr) / .9) !important} html body.home .hero-grid > div.cxclr.cxclr-w > .mini-stats{flex-wrap:wrap !important;row-gap:12px !important} }