/* Water-page hero 2 (WP_HERO2; Arif 2026-10-29, option A + D's mini bar). Loaded on /water/<slug>/ only. */
.bp-main{container-type:inline-size}
/* H1 sized by name length (--nl chars): long names wrap to 2 lines max, short names keep the big size */
.bp-main h1.bp-h{font-size:clamp(34px,min(9vw,136px,calc(190cqi / (var(--nl) * .6))),136px);text-wrap:balance}
/* smaller bottle on desktop so the facts table and the score card come up; brand-only label with a lighter outline */
@media(min-width:981px){.btl.big.h2l{width:min(118px,40%);margin:2px 0 18px}.bp-g{padding-top:12px}}
@media(max-width:980px){.btl.big.h2l{width:72px}}
.btl.big.h2l text{stroke-width:.8px}
/* slim sticky bar, under the visible part of the site header (--hv set by hero.js), after the H1 scrolls away */
.bp-mini{position:fixed;left:0;right:0;top:var(--hv,0px);z-index:40;background:rgba(242,240,234,.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(17,17,17,.09);box-shadow:0 6px 18px -14px rgba(17,17,17,.3);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s}
.bp-mini[hidden]{display:none}.bp-mini.on{transform:none;opacity:1;visibility:visible;transition:opacity .2s,transform .2s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bp-mini{background:var(--paper)}}
.bpm-in{display:flex;align-items:center;gap:12px;height:46px}
.bpm-n{font-weight:900;font-size:16px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bpm-sc{flex:none;font:800 13px var(--f);background:var(--ink);color:var(--paper);border-radius:999px;padding:3px 9px;text-decoration:none}
.bpm-sc.bpm-na{background:none;color:var(--mut);border:1px solid rgba(17,17,17,.18);font-weight:600;font-size:12px}
.bp-mini nav{margin-left:auto;display:flex;gap:4px;flex:none}.bp-mini nav a{font:600 13px var(--f);color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:999px}.bp-mini nav a:hover{background:rgba(0,0,0,.06)}
/* phones: name + score only (the jump links do not fit next to a long name) */
@media(max-width:640px){.bpm-in{height:42px;gap:10px}.bpm-n{font-size:14px}.bp-mini nav{display:none}}
html.bpm-on{scroll-padding-top:calc(var(--hv,56px) + 56px)}
/* Facts card under the bottle (design D, Arif 2026-10-29): light card, icon per fact, hairlines; lighter "On this page" on desktop. Phones: no "On this page" (site.css hides .toc <=980px). */
.bp-fx{list-style:none;margin:0;padding:0 14px;width:100%;font-size:14px;line-height:1.35;background:var(--sheet);border:1px solid rgba(17,17,17,.08);border-radius:14px}
.bp-fx li{display:grid;grid-template-columns:18px auto minmax(0,1fr);align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(17,17,17,.07)}.bp-fx li:first-child{border-top:0}
.bp-fx .fx-i{flex:none;color:var(--mut)}.bp-fx .flag{vertical-align:-1px}
.bp-fx .fx-k{font-size:13px;color:var(--mut)}.bp-fx .fx-v{text-align:right;font-weight:600;font-size:13.5px}
.bp-obj .toc h4{font:600 11px var(--f);letter-spacing:.08em;color:var(--mut);border-bottom:1px solid rgba(17,17,17,.12);padding-bottom:8px}
.bp-obj .toc a{border-bottom:1px solid rgba(17,17,17,.07);font-weight:500;font-size:13.5px;padding:8px 0}.bp-obj .toc a .fn{color:var(--mut)}
@media(max-width:980px){.bp-obj .bp-fx{flex:1;min-width:210px}.bp-obj .toc{display:none}}