/* CLS guard: reserve space for JS-inserted phone UI so content doesn't jump. No visual change. */
/* metric-matched fallback for Inter so the web-font swap doesn't move text */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}
main .disclaimer,main .disclaimer *{font-family:"Inter Fallback",system-ui,-apple-system,sans-serif}
/* library guide header + body: same metric-matched fallback so the swap does not reflow */
main h1,main .badge,main p.muted,main .prose,main .prose *,main .pep-key-panel,main .pep-key-panel *{font-family:Inter,"Inter Fallback",system-ui,-apple-system,sans-serif}
/* header logo: reserve its real 337x282 shape before the image loads */
.site-header .logo img{aspect-ratio:337/282}
@media (max-width:768px){
 html.m-b .site-header .nav{position:relative;padding-left:calc(44px + .5rem);min-height:calc(44px + .8rem)}
 html.m-b .site-header .nav .mb-menu-btn{position:absolute;left:0;top:50%;transform:translateY(-50%)}
 /* pre-apply phone card layout before mobile-b.js tags cards (mirrors .mb-card rules) */
 html.m-b.m-cards .product-card:has([data-add-to-cart]){position:relative;padding:.45rem!important;min-width:0}
 html.m-b.m-cards .product-card:has([data-add-to-cart]) .product-card-media{aspect-ratio:4/5!important;height:auto!important;min-height:200px;padding:0!important;background:#f4f8fb;border-radius:10px;overflow:hidden}
 html.m-b.m-cards .product-card:has([data-add-to-cart]) .product-card-media img{height:100%!important;width:100%!important;max-width:none;object-fit:contain;transform:scale(1.15)}
 html.m-b.m-cards .product-card:has([data-add-to-cart]) .vial-sizes,html.m-b.m-cards .product-card:has([data-add-to-cart]) .pep-key-status,html.m-b.m-cards .product-card:has([data-add-to-cart]) .pep-key-info,html.m-b.m-cards .product-card:has([data-add-to-cart]) .pep-key-brand{display:none!important}
 html.m-b.m-cards .product-card:has([data-add-to-cart]) .pep-key-name{display:block;font-size:.92rem;margin-right:44px}
 /* compact what-it's-for chips + guide link */
 html.m-b.m-cards .product-card:has([data-add-to-cart]) .pep-key-tags{display:flex!important;flex-wrap:wrap;gap:.25rem;margin:.3rem 0 0;padding:0;list-style:none;max-height:2.9rem;overflow:hidden}
 html.m-b.m-cards .product-card:has([data-add-to-cart]) .pep-key-tag{font-size:.64rem;line-height:1.2;padding:.15rem .4rem;border-radius:999px;background:#eef6f9;color:#0b3a4a;white-space:nowrap}
 html.m-b.m-cards .product-card:has([data-add-to-cart]) .pep-key-tag:nth-child(n+3){display:none}
 html.m-b.m-cards .product-card:has([data-add-to-cart]) .pep-key-guide{display:inline-block!important;font-size:.72rem;margin:.3rem 0 0;padding:.2rem 0}
}

/* Library: compact stack-guides row */
.lib-stack-guides{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.6rem 0 .2rem}
.lib-stack-guides-label{font-size:.78rem;font-weight:650;color:#6e6e73;margin-right:.2rem}
@media (max-width:640px){.lib-stack-guides{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.lib-stack-guides::-webkit-scrollbar{display:none}.lib-stack-guides>*{flex:0 0 auto}}

/* Stack guide: per-compound at-a-glance cards */
.sg-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem}
.sg-c{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:.75rem .9rem;background:#fafafa}
.sg-c h3{margin:0 0 .35rem;font-size:1rem}
.sg-c dl{margin:0;font-size:.9rem;line-height:1.4}
.sg-c dt{font-weight:650;color:#6e6e73;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;margin-top:.35rem}
.sg-c dd{margin:0}

/* Stacks: 'Studied in' population tag */
.pep-key-pop{display:block;margin-top:.25rem;font-size:.78rem;color:#6e6e73;line-height:1.3}
@media (max-width:640px){.pep-key-pop{font-size:.72rem;margin-top:.15rem}}
