/* ============================================================================
v42 PORT OVERRIDES — loaded after v42.css.
Bridges the v42 theme onto the real Flask chrome:
fixed-nav offset · nav utilities (search/cart/burger) · mobile menu ·
gate skin (original gate markup/IDs kept; v42 look applied).
============================================================================ */
/* fixed promo(38) + nav(54) offset so page content isn't hidden underneath.
Full-bleed hero pages opt out with . */
body{padding-top:92px}
body.promo-off{padding-top:54px}
body.flush{padding-top:0}
/* ---- nav right cluster ---- */
.nav-r{display:flex;align-items:center;gap:16px}
.nav-ico{display:inline-flex;align-items:center;color:var(--ink);opacity:.72;transition:.15s}
.nav-ico:hover{opacity:1}
.nav-ico svg{width:19px;height:19px}
.nav-login{font-size:13px;font-weight:600;color:var(--ink);opacity:.8;text-decoration:none;transition:.15s}
.nav-login:hover{opacity:1}
/* cart pill is now an (keeps live-count hook .util--cart .count for main.js) */
a.bag{display:inline-flex;align-items:center;gap:6px;text-decoration:none;height:36px;padding:0 18px;
border-radius:100px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700}
a.bag .count{font-variant-numeric:tabular-nums}
a.bag .count[data-count]{}
/* ---- burger + mobile menu (v42 theme ships none; premium slide-in) ---- */
.nav-burger{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:6px;margin-left:2px}
.nav-burger svg{width:24px;height:24px}
.nav-i .logo{display:inline-flex;align-items:center}
.nav-i .logo img{height:28px;width:auto;display:block}
.mnav-scrim{position:fixed;inset:0;z-index:115;background:rgba(10,12,16,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s ease}
.mnav-scrim.open{opacity:1;pointer-events:auto}
.mnav{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:120;background:var(--bg);
box-shadow:-24px 0 60px rgba(10,12,16,.22);display:flex;flex-direction:column;overflow:hidden;
transform:translateX(101%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.mnav.open{transform:none}
.mnav-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;padding-top:max(18px,env(safe-area-inset-top));border-bottom:1px solid var(--line)}
.mnav-head .logo{display:inline-flex;align-items:center}
.mnav-head .logo img{height:30px;width:auto;display:block}
.mnav-x{background:var(--card);border:1px solid var(--line);border-radius:11px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:none}
.mnav-x svg{width:19px;height:19px}
.mnav-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.mnav-eyebrow,.mnav-be{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sub)}
.mnav-eyebrow{padding:20px 24px 6px;flex:none}
.mnav-links{display:flex;flex-direction:column;padding:0 12px;flex:none;position:static;top:auto;width:auto}
.mnav-links a{display:flex;align-items:center;justify-content:space-between;font-size:16.5px;font-weight:600;color:var(--ink);text-decoration:none;padding:12px 12px;border-radius:12px;transition:background .15s ease}
.mnav-links a span{color:var(--sub);font-family:'JetBrains Mono',monospace;transition:transform .15s ease,color .15s ease}
.mnav-links a:active{background:var(--card)}
@media(hover:hover){.mnav-links a:hover{background:var(--card)}.mnav-links a:hover span{color:var(--accent);transform:translateX(4px)}}
.mnav-brandfill{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:22px 24px;min-height:0;position:relative;overflow:hidden}
.mnav-brandfill::before{content:"";position:absolute;right:-30px;bottom:-24px;width:188px;height:188px;background:url(/static/img/logo.png) no-repeat center/contain;opacity:.07;pointer-events:none}
.mnav-state{font-size:clamp(24px,7vw,30px);font-weight:900;letter-spacing:-.03em;color:var(--ink);line-height:1.05;margin:8px 0 0;position:relative}
.mnav-sub{font-size:15px;font-weight:600;color:var(--sub);line-height:1.45;margin:12px 0 0;max-width:22ch;position:relative}
.mnav-sub em.serif,.mnav-state em.serif{color:var(--accent)}
.mnav-foot{flex:0 0 auto;padding:16px 20px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.mnav-btn{display:flex;align-items:center;justify-content:center;padding:14px;border-radius:12px;font-weight:700;font-size:15px;text-decoration:none}
.mnav-btn.solid{background:var(--ink);color:var(--bg)}
.mnav-btn.ghost{border:1px solid var(--line);color:var(--ink)}
.mnav-trust{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);text-align:center;margin-top:6px;line-height:1.6}
body.mnav-open{overflow:hidden}
.foot-brand .logo img{height:40px;width:auto;display:block}
@media(max-width:760px){
.nav-burger{display:inline-flex}
.nav-login{display:none}
}
@media(min-width:761px){.mnav,.mnav-scrim{display:none}}
/* ---- GATE SKIN — original markup/IDs untouched, restyled to v42 ag-card look.
(.gate-ok .gate{display:none} from app.css still governs hide behavior) ---- */
.gate{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;
background:rgba(10,12,16,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gate__box{background:var(--bg);border-radius:28px;max-width:520px;width:100%;padding:clamp(30px,5vw,44px);
box-shadow:0 40px 120px rgba(0,0,0,.55);max-height:92vh;overflow:auto}
.gate__eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.gate__eyebrow::before{display:none}
.gate__title{font-size:clamp(26px,4vw,32px);font-weight:900;letter-spacing:-.03em;margin:0 0 14px;color:var(--ink)}
.gate__body{font-size:14px;line-height:1.55;color:var(--sub);margin:0 0 20px}
.gate__body b{color:var(--ink)}
.gate__check{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;margin-bottom:14px;cursor:pointer;color:var(--ink)}
.gate__check input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--accent);cursor:pointer}
.gate__check a{color:var(--accent);text-decoration:underline}
.gate__field{display:block;margin:18px 0}
.gate__flabel{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--sub);margin-bottom:8px}
.gate__field select{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:12px;
font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.gate__enter{width:100%;height:auto;padding:15px 24px;border:0;border-radius:100px;background:var(--ink);
color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:.18s}
.gate__enter:disabled{opacity:.4;cursor:not-allowed}
.gate__exit{display:block;text-align:center;margin-top:16px;font-size:13px;font-weight:600;color:var(--sub);text-decoration:none}
.gate__exit:hover{color:var(--ink)}
.gate__legal{font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.7;color:var(--sub);text-align:center;margin:16px 0 0}
/* flash messages in the theme palette */
.flashwrap{max-width:1240px;margin:12px auto 0;padding:0 28px;display:flex;flex-direction:column;gap:8px}
.flashmsg{padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;border:1px solid var(--line);background:var(--card)}
/* ---- product card (.pc): Details as , Add as a real form, keep v42 layout ---- */
.pc-nl{text-decoration:none;color:inherit;display:block}
.pc-btns .btn-details{display:inline-flex;align-items:center;justify-content:center}
.pc-btns form{flex:1;display:flex;margin:0}
.pc-btns form .btn-add{width:100%}
/* gate hide behavior — moved here so v42 pages (which don't load app.css) still hide the gate after entry */
html.gate-ok .gate{display:none}
/* ---- shop page bridges (chips as links, breadcrumb, SEO intro section) ---- */
a.chipf{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.shop-crumbs{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--sub);margin:0 0 18px}
.shop-crumbs a{color:var(--sub);text-decoration:none}
.shop-crumbs a:hover{color:var(--accent)}
.shop-crumbs span{color:var(--ink)}
.shop-seo{max-width:840px;padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--line);margin-top:clamp(30px,5vw,60px)}
.shop-seo .eyebrow{margin-bottom:14px}
.shop-seo h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.03em;margin:0 0 18px;line-height:1.1}
.shop-seo p{color:var(--sub);line-height:1.7;font-size:16px}
.shop-seo__note{margin-top:16px!important;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.04em;color:var(--sub)}
/* ============================================================================
PRODUCT DETAIL (Phase 4) — buy box kept functional (main.js hooks) + skinned;
content/dossier sections styled in v42. Layout/media/facts reuse v42 .pd-* classes.
========================================================================== */
.pd .crumb{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--sub);margin:0 0 20px}
.pd .crumb a{color:var(--sub);text-decoration:none}.pd .crumb a:hover{color:var(--accent)}
.pd .crumb b{color:var(--ink);font-weight:700}
.record__cas{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--sub);margin:6px 0 0}
/* buy box — original markup (#acquire .buy__* .qty* .add-form .js-price) skinned to v42 */
#acquire.buy{margin:20px 0 6px;display:flex;flex-direction:column;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 2px 10px rgba(10,12,16,.04)}
.buy__group{display:flex;flex-direction:column;gap:8px}
.buy__label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.buy__opts{display:flex;gap:8px;flex-wrap:wrap}
.buy__opt{font:inherit;font-size:13px;font-weight:700;padding:9px 16px;border-radius:100px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:.15s}
.buy__opt:hover{border-color:var(--ink)}
.buy__opt.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.buy__opt:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:100px;width:max-content}
.qty__btn{width:40px;height:40px;background:none;border:0;font-size:18px;cursor:pointer;color:var(--ink)}
.qty__val{width:42px;text-align:center;border:0;background:none;font:inherit;font-weight:700;font-size:15px}
.add-form.buy__buy{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
.buy__price{font-size:28px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.buy__cta{flex:1;min-width:190px;background:var(--ink);color:#fff;border:0;border-radius:100px;padding:16px 26px;font-size:15px;font-weight:700;cursor:pointer;transition:.15s}
.buy__cta:hover:not(:disabled){background:var(--accent);color:var(--ink)}
.buy__cta:disabled{opacity:.4;cursor:not-allowed}
.buy__note{font-size:12.5px;color:var(--sub);margin:0}
.buy__inst{display:flex;gap:18px;flex-wrap:wrap}
.buy__link{font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:1px}
.buy__link em{font-style:normal}
.buy__tiers{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.buy__tiers-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.buy__tier{font:inherit;font-size:12px;font-weight:700;padding:7px 13px;border-radius:100px;border:1px dashed rgba(10,12,16,.2);background:transparent;color:var(--ink);cursor:pointer;transition:.15s}
.buy__tier:hover{border-color:var(--accent);color:var(--accent)}
.buy__bulk{font-size:13px;color:var(--sub);background:#F5F4F1;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0}
.buy__bulk-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:6px}
.pd-rate{display:flex;align-items:center;gap:8px;margin:10px 0 4px;font-size:14px}
.pd-rate .stars{color:#E8923A;letter-spacing:2px}.pd-rate b{font-weight:800}.pd-rate .pd-rc{color:var(--sub)}
/* content sections */
.record__over{margin-top:28px}
.spec-block{margin:28px 0 0;border-top:1px solid var(--line);padding-top:22px}
.spec-block__h{margin-bottom:12px}
.spec-table{list-style:none;margin:0;padding:0}
.spec-table li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec-table .k{color:var(--sub)}.spec-table .v{font-weight:600;text-align:right}
.spec-table .ok{color:#2E7D46;font-weight:700}
.spec-table .v a{color:var(--accent);text-decoration:none}
.prose{color:var(--sub);line-height:1.7;font-size:15.5px}
.prose p{margin:0 0 14px}
.prose h2,.prose h3{color:var(--ink);font-weight:800;letter-spacing:-.02em;margin:22px 0 10px;font-size:20px}
.dossier{margin-top:clamp(44px,6vw,80px);display:flex;flex-direction:column;gap:clamp(30px,4vw,48px)}
.doss--split{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:14px}
.profile{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.profile h4{font-size:16px;margin:0 0 10px}
.profile ul{list-style:none;margin:0;padding:0}
.profile li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px;border-bottom:1px solid var(--line)}
.profile li span{color:var(--sub)}
.kchars,.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.kchar,.area{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.kchar__k,.area__k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.kchar__v,.area__d{font-size:14px;color:var(--ink);line-height:1.5}
.refs{margin:14px 0 0;padding-left:20px;color:var(--sub);font-size:13px;line-height:1.8}
.refs__ruo,.refs__pc{font-size:12px;color:var(--sub);margin-top:12px}
.refs__pc a{color:var(--accent);text-decoration:none}
.whyhelio{background:var(--navy);color:#fff;border-radius:28px;padding:clamp(28px,4vw,40px)}
.whyhelio .eyebrow,.eyebrow--on-navy{color:rgba(255,255,255,.55)}
.whyhelio__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}
.whyhelio__grid b{display:block;font-size:16px;margin-bottom:4px}
.whyhelio__grid span{color:rgba(255,255,255,.6);font-size:13px}
.faq__i{border-top:1px solid var(--line)}
.faq__i:last-child{border-bottom:1px solid var(--line)}
.faq__i summary{cursor:pointer;font-weight:700;font-size:16px;padding:18px 0;list-style:none;position:relative}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"+";position:absolute;right:2px;top:16px;font-size:22px;font-weight:400;color:var(--sub)}
.faq__i[open] summary::after{content:"–";color:var(--accent)}
.faq__a p{color:var(--sub);padding:0 0 18px;margin:0;max-width:64ch}
@media(max-width:760px){.doss--split{grid-template-columns:1fr}}
/* product facts: let long values (e.g. blend CAS with two numbers) wrap instead of overflowing */
.pd-facts{align-items:start}
.pd-facts div{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.pd-facts span{white-space:nowrap}
/* in-content breadcrumbs must never inherit the global v42 nav{} fixed bar */
.crumb,.shop-crumbs{position:static;top:auto;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;height:auto;z-index:auto}
/* secure-checkout payment icons */
.pd-pay{flex-wrap:wrap;gap:10px}
.pd-pay .pdpays{display:inline-flex;gap:6px;align-items:center}
.pd-pay .pdpays svg{height:22px;width:auto;display:block}
/* ---- cart / checkout: alias the legacy design tokens their self-contained
styles reference, so they render in the v42 palette (no markup changes) ---- */
body.v42{
--mono:'JetBrains Mono',ui-monospace,monospace;
--sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
--serif:'Inter',-apple-system,sans-serif; /* cart "serif" headings → Inter, matching v42 */
--ink-2:#22262C; --ink-mute:#6B6F76; --ink-faint:#9B9FA6;
--navy-2:#0A0C10; --gold:var(--accent); --gold-deep:#C8761F;
--lab:#F5F4F1; --line-2:rgba(10,12,16,.14); --paper:var(--bg); --white:#FFFFFF;
--t:.2s cubic-bezier(.2,.7,.2,1);
}
.v42 .btn-line{border:1.5px solid var(--line-2);background:transparent;color:var(--ink);border-radius:100px;padding:12px 20px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:.15s;display:inline-flex;align-items:center;justify-content:center}
.v42 .btn-line:hover{border-color:var(--ink)}
.v42 .crumbs{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--sub);margin-bottom:16px}
.v42 .crumbs a{color:var(--sub);text-decoration:none}
.v42 .crumbs a:hover{color:var(--accent)}
/* product buy-box: secure-checkout payment bar under Add to Cart */
.buy__pay{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.buy__pay > span:first-child{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.buy__pay .paysrow{display:inline-flex;gap:6px;align-items:center}
.buy__pay .paysrow svg{height:22px;width:auto;display:block}
/* product page: v42's .pd had 15vh top padding (for the standalone mockup); with the
fixed-nav body offset that leaves a big empty gap — especially on mobile. Trim it. */
.v42 .pd{padding-top:clamp(14px,2.2vw,30px);padding-bottom:clamp(56px,9vw,110px)}
/* ============================================================================
v42 spacing/gutter fixes
---------------------------------------------------------------------------- */
/* section classes (.statement/.bento/.shop/.story/.life/.faq/.cta) use
`padding:Xvh 0 Yvh`, which wiped .wrap's horizontal gutter → content touched
the screen edges on mobile. Restore an inline gutter on every .wrap. */
.v42 .wrap{padding-inline:clamp(18px,5vw,28px)}
/* tame the oversized statement rhythm (was 20vh/14vh) */
.v42 .statement{padding-block:clamp(44px,8vw,104px) clamp(30px,6vw,76px)}
.v42 .statement h1{max-width:18ch;margin-inline:auto}
.v42 .statement h2{margin-top:18px}
/* tighten the trust-bar item spacing */
.v42 .trust-i{gap:14px 26px;padding-block:16px}
.v42 .trust .chips{gap:10px 20px}
/* friendlier hero + tighter statement on phones */
@media(max-width:760px){
.v42 .hero{height:72vh;min-height:460px}
.v42 .statement{padding-block:36px 28px}
.v42 .omq{padding-block:0 4vh}
}