/* [PPS-V7-LOOK] base: the parts on every storefront page (fonts, colours, top bars, menu bar, phone menu, search panel,
   buttons, fields, breadcrumbs, footer, 21+ box, 10% pop-up + corner card, ad-cookie bar). Looks only.
   Selector weights: "body.hv2 ..." mirrors the old generic rules (so page-specific rules still win over these);
   "body.hv2:not(#v7) ..." matches the weight of site-bw.css's "body.hv2:not(:has(#pv5)) ..." !important rules it has to
   replace (#v7 never exists, so it matches every page, the front page too). */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/static/fonts/manrope-latin.woff2) format("woff2"); }

/* ------------------------------------------------------------ tokens (the old names now carry the new colours) */
body.hv2:not(#v7) {
  --v7-navy: #0B1D4A; --v7-navy-2: #13296A; --v7-blue: #2A82D4; --v7-blue-ink: #1E6DB8; --v7-ink: #0E1626; --v7-mute: #5D6B82;
  --v7-line: #E3E9F2; --v7-field: #D6DEEA; --v7-bg: #F5F8FC; --v7-soft: #EAF2FB; --v7-sky: #8FC4F3; --v7-foot: #0A1430;
  --v7-head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --v7-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --v7-r-card: 20px; --v7-r-btn: 12px; --v7-shadow: 0 6px 24px rgba(11,29,74,.06); --v7-shadow-pop: 0 30px 70px -24px rgba(11,29,74,.45);
  --paper: #FFFFFF; --paper-2: #F5F8FC; --paper-3: #EAF2FB; --well: #0B1D4A; --bg: #FFFFFF; --cream: #FFFFFF;
  --ink: #0B1D4A; --ink-2: #26334A; --ink-3: #5D6B82; --ink-4: #8A97AB; --ink-soft: #26334A; --ink-mute: #5D6B82;
  --line: #E3E9F2; --line-2: #D6DEEA; --brass: #1E6DB8; --brass-2: #2A82D4; --gold: #0B1D4A; --accent: #0B1D4A;
  --on-dark: #FFFFFF; --on-dark-2: rgba(255,255,255,.74);
  --radius-1: 10px; --radius-2: 16px; --shadow: 0 1px 0 rgba(11,29,74,.04), 0 12px 28px -12px rgba(11,29,74,.20);
  --font-body: var(--v7-body); --font-sans: var(--v7-body); --font-mono: var(--v7-body); --font-display: var(--v7-head);
  --header-h: 80px;   /* the menu bar's real height: sticky offsets and #anchor jumps clear it */
  background: #FFFFFF !important; color: var(--v7-ink); font-family: var(--v7-body);
}
@media (min-width: 1024px) { body.hv2:not(#v7) { --header-h: 90px; } }

/* ------------------------------------------------------------ text: Inter body, Manrope headings, links */
body.hv2 main { color: var(--ink-2); }
body.hv2 main h1, body.hv2 main h2, body.hv2 main h3, body.hv2 main h4 { font-family: var(--v7-head); color: var(--v7-navy); font-weight: 700; letter-spacing: -.015em; }
body.hv2:not(:has(#pv5)) main h1, body.hv2:not(:has(#pv5)) main h2 {
  font-family: var(--v7-head) !important; font-weight: 800 !important; text-transform: none; letter-spacing: -.02em !important; line-height: 1.08; }
body.hv2:not(:has(#pv5)) main h1 { font-size: clamp(34px, 2.4vw + 18px, 52px) !important; }
body.hv2:not(:has(#pv5)) main h2 { font-size: clamp(26px, 1.4vw + 17px, 38px) !important; }
body.hv2 main p a, body.hv2 main li a, body.hv2 main td a { color: var(--v7-blue-ink); text-underline-offset: 3px; }
body.hv2 main p a:hover, body.hv2 main li a:hover { color: var(--v7-navy); }
body.hv2 :focus-visible { outline-color: var(--v7-blue); }
body.hv2 ::selection { background: #CFE3F7; color: var(--v7-navy); }

/* ------------------------------------------------------------ deal bar + notice line above the menu (navy) */
html body.hv2 .hv2-sale { background: var(--v7-navy); color: #FFFFFF; }
html body.hv2 .hv2-sale-inner { min-height: 44px; gap: 4px 16px; padding-block: 7px; font-family: var(--v7-body); }
html body.hv2 .hv2-sale-title { font-size: 14px; font-weight: 700; letter-spacing: 0; }
html body.hv2 .hv2-sale-ends { font-size: 13px; color: #B7C6E2; }
html body.hv2 .hv2-sale .sale-countdown { color: var(--v7-sky); font-weight: 700; }
html body.hv2 .hv2-sale-cta { background: var(--v7-blue-ink); color: #FFFFFF; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; }
html body.hv2 .hv2-sale-inner:hover .hv2-sale-cta { background: #FFFFFF; color: var(--v7-navy); }
body.hv2:not(#v7) .ann { background: var(--v7-navy) !important; color: #C9D6EC !important; border-bottom: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); font: 500 12.5px/1.35 var(--v7-body); }
html body.hv2 .ann-inner { min-height: 32px; padding-block: 6px; }
body.hv2:not(#v7) .ann .ann-item + .ann-item::before, body.hv2:not(#v7) .ann .ann-dot::before { color: var(--v7-sky) !important; }
@media (max-width: 639.98px) {
  html body.hv2 .hv2-sale-inner { min-height: 40px; padding-block: 6px; }
  html body.hv2 .hv2-sale-title { font-size: 13.5px; }
  html body.hv2 .hv2-sale-ends { font-size: 12px; }
  body.hv2:not(#v7) .ann { font-size: 12px; }
}
/* the research-use line under the menu (when switched on) */
html body .pps-ruo-bar { background: var(--v7-soft, #EAF2FB); border-bottom: 1px solid #D9E6F5; color: #26334A; }
html body .pps-ruo-bar-in { font-family: var(--v7-body, inherit); font-size: 12.5px; }
html body .pps-ruo-bar b { color: #0B1D4A; }

/* the admin's sale / message banners and the signed-in text-alerts invite (each only when switched on): navy, like the deal bar */
html body .psb.psb-sale.psb-slim { --psb-k: #8FC4F3; background: linear-gradient(90deg, #0B1D4A 0%, #12306F 100%); font-family: "Inter", system-ui, sans-serif; }
html body .psb-slim .psb-amt { font-family: "Manrope", "Inter", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; }
html body .psb-slim .psb-tk, html body .psb-slim .psb-tk b, html body .psb-slim .psb-tk small { color: #0B1D4A !important; }
html body .psb-slim .psb-tk.is-done b, html body .psb-slim .psb-tk.is-done small { color: #FFFFFF !important; }
/* its small line wraps instead of ending in "..." (the countdown and the owner's text stay readable); phones: a smaller
   amount and a 3-line headline so the wider Manrope figures leave room for the words and the code ticket */
html body .psb-slim .psb-sub { white-space: normal; text-overflow: clip; }
html body .psb-slim .psb-cd, html body .psb-slim .psb-tg { display: inline-block; white-space: nowrap; }   /* wrap as whole pieces */
html body .psb-slim .psb-cd:empty { display: none; }
@media (min-width: 641px) { html body .psb.psb-sale.psb-slim .psb-copy { max-width: 620px; } }
@media (max-width: 640px) {
  html body .psb.psb-sale.psb-slim .psb-in { gap: 8px; padding-left: 12px; padding-right: 10px; }
  html body .psb-slim .psb-amt { font-size: 26px; letter-spacing: -.03em; }
  html body .psb-slim .psb-title { -webkit-line-clamp: 3; }
  html body .psb-slim .psb-tk { min-width: 0; padding: 5px 10px 5px 20px; }
  html body .psb-slim .psb-tk b { letter-spacing: .04em; }
  html body .psb-slim .psb-sub, html body .psb-slim .psb-tg, html body .psb-slim .psb-amt small, html body .psb-slim .psb-tk small { font-size: 12px; }
  html body .psb-slim .psb-tg { letter-spacing: .06em; }
  /* tag + countdown: a gap instead of the "·" (it was left alone at the start of the line when the countdown wrapped) */
  html body .psb.psb-sale.psb-slim .psb-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  html body .psb.psb-sale.psb-slim .psb-sub > *::before { content: none; }
}
/* the bonus-points / % off bubbles on product photos (update 242, only while one runs): 12px words on phones */
@media (max-width: 767px) {
  html body .ppb-stack { top: 6px; right: 6px; gap: 3px; }
  html body .ppb-bub { padding: 4px 7px; gap: 1px; border-radius: 9px; }
  html body .ppb-bub b { font-size: 12px; line-height: 1.05; letter-spacing: .01em; }
  html body .ppb-bub i, html body #main-image .ppb-bub i { font-size: 12px; line-height: 1.05; font-weight: 500; letter-spacing: 0; }
}
/* a card with a sale tag top-left: the bubbles keep clear of it (their words wrap instead of covering the tag) */
html body article:has(.pc4-badge:not(.is-out), .pv5-tag) .ppb-stack { max-width: calc(100% - 72px); }
html body article:has(.pc4-badge:not(.is-out), .pv5-tag) .ppb-bub b { white-space: normal; overflow-wrap: break-word; text-overflow: clip; }
html body .psb.psb-msg { --psb-a: #8FC4F3; background: #0B1D4A; font-family: "Inter", system-ui, sans-serif; }
@media (min-width: 1024px) { html body .psb.psb-msg .psb-in { max-width: 1232px; } }   /* lines up with the 1200px menu bar */
@media (max-width: 640px) { html body .psb.psb-msg a.psb-link { padding: 11px 0; margin: -7px 0; } }   /* a 40px tap target, same bar height */
html body .pps-txinv { background: #EAF2FB; border-bottom: 1px solid #D9E6F5; color: #0B1D4A; font-family: var(--v7-body, inherit); }
html body .pps-txinv-go { border-radius: 12px; background: #0B1D4A; color: #FFFFFF !important; font-family: var(--v7-head, inherit); font-weight: 700; }
html body .pps-txinv-x { color: #5D6B82; border-radius: 12px; }

/* ------------------------------------------------------------ the menu bar: a floating rounded white bar */
html body.hv2 .hv2-header { background: rgba(245,248,252,.86); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 0; padding: 10px 0; box-shadow: none; }
body.hv2:not(#v7) .hv2-header, body.hv2.pth:not(#v7) .hv2-header { background: rgba(245,248,252,.86) !important; box-shadow: none !important; }
html body.hv2 .hv2-header.is-compact { box-shadow: none; padding-top: 10px; padding-bottom: 10px; }   /* same height as at the top: shrinking it made the page below jump 4px each time it switched */
html body.hv2 .hv2-header-inner { max-width: none; width: min(1200px, calc(100% - 2 * var(--gutter, 16px))); margin: 0 auto; height: 60px;
  padding: 0 6px 0 14px; gap: 4px; background: #FFFFFF; border: 1px solid var(--v7-line); border-radius: 16px; box-shadow: var(--v7-shadow);
  grid-template-columns: minmax(0, 1fr) auto auto; }
html body.hv2 .hv2-header .hv2-logo img[src*="pps-logo"] { height: 38px !important; width: auto !important; max-width: none; }
html body.hv2 .hv2-header.is-compact .hv2-logo img[src*="pps-logo"] { height: 38px !important; }
html body.hv2 .hv2-logo { min-height: 44px; }
@media (max-width: 379.98px) {   /* small phones: the logo stays clear of the search button */
  html body.hv2 .hv2-header .hv2-logo img[src*="pps-logo"], html body.hv2 .hv2-header.is-compact .hv2-logo img[src*="pps-logo"] { height: 33px !important; }
}
/* icons: search, cart, account, menu */
html body.hv2 .hv2-header .hv2-iconbtn { width: 40px; height: 40px; border-radius: 10px; color: var(--v7-navy); }
html body.hv2 .hv2-header .hv2-iconbtn:hover { background: var(--v7-bg); }
html body.hv2 .hv2-header .hv2-iconbtn svg { stroke-width: 1.8; }
html body.hv2 .hv2-tools { gap: 4px; }
html body.hv2 .hv2-tools .hv2-search-toggle { order: 1; }
html body.hv2 .hv2-tools .hv2-search-desktop { order: 1; }
html body.hv2 .hv2-tools .hv2-cart { order: 2; }
html body.hv2 .hv2-tools .hv2-account { order: 3; }
html body.hv2 .hv2-header .hv2-account, html body.hv2 .hv2-header .hv2-account:hover { background: var(--v7-navy); color: #FFFFFF; border-radius: 11px; margin-left: 2px; }
html body.hv2 .hv2-header .hv2-account:hover { background: var(--v7-navy-2); }
html body.hv2 .hv2-header .hv2-account svg { width: 18px; height: 18px; }
html body.hv2 .hv2-burger { margin-right: 0; }
html body.hv2 .hv2-burger-lines { width: 20px; }
html body.hv2 .hv2-burger-lines i { height: 2px; border-radius: 2px; margin: 4px 0; }
/* the cart count badge */
body.hv2:not(#v7) .hv2-cart-count { top: 1px !important; right: -2px !important; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--v7-blue) !important; color: #FFFFFF !important; border: 0 !important; box-shadow: 0 0 0 2px #FFFFFF;
  font: 700 12px/19px var(--v7-body) !important; }
@media (min-width: 1024px) {
  html body.hv2 .hv2-header { padding: 14px 0; }
  html body.hv2 .hv2-header.is-compact { padding: 10px 0; }
  html body.hv2 .hv2-header-inner { height: 66px; padding: 0 12px 0 20px; border-radius: 18px; gap: 20px; grid-template-columns: auto minmax(0, 1fr) auto; }
  html body.hv2 .hv2-header .hv2-logo img[src*="pps-logo"], html body.hv2 .hv2-header.is-compact .hv2-logo img[src*="pps-logo"] { height: 46px !important; }
  html body.hv2 .hv2-nav { gap: 22px; }
  html body.hv2 .hv2-nav > a, html body.hv2 .hv2-dd-btn { font: 500 14.5px/1.2 var(--v7-body); color: #26334A; padding: 10px 0; border-bottom: 2px solid transparent; }
  html body.hv2 .hv2-nav > a:hover, html body.hv2 .hv2-dd-btn:hover, html body.hv2 .hv2-dd.is-open .hv2-dd-btn { color: var(--v7-navy); border-bottom-color: var(--v7-blue); text-decoration: none; }
  html body.hv2 .hv2-header .hv2-account { width: auto; height: 40px; padding: 0 15px; gap: 7px; font: 600 13.5px/1 var(--v7-body); }
  html body.hv2 .hv2-header .hv2-account svg { width: 16px; height: 16px; }
  html body.hv2 .hv2-tools { gap: 6px; }
}
/* the page you are on: a blue underline (read from the page's canonical address; decoration only) */
@media (min-width: 1024px) {
  html:has(link[rel="canonical"][href$="/products"], link[rel="canonical"][href*="/peptides/"], link[rel="canonical"][href*="/product/"]) body.hv2 .hv2-nav > a[href="/products"],
  html:has(link[rel="canonical"][href$="/coas"], link[rel="canonical"][href*="/coas/"]) body.hv2 .hv2-nav > a[href="/coas"],
  html:has(link[rel="canonical"][href$="/rewards"]) body.hv2 .hv2-nav > a[href="/rewards"],
  html:has(link[rel="canonical"][href$="/affiliate-program"]) body.hv2 .hv2-nav > a[href="/affiliate-program"],
  html:has(link[rel="canonical"][href$="/about"]) body.hv2 .hv2-nav > a[href="/about"],
  html:has(link[rel="canonical"][href$="/contact"]) body.hv2 .hv2-nav > a[href="/contact"],
  html:has(link[rel="canonical"][href*="/calculator"], link[rel="canonical"][href*="/compare"], link[rel="canonical"][href*="/research"]) body.hv2 .hv2-dd-btn {
    color: var(--v7-navy); font-weight: 600; border-bottom-color: var(--v7-blue); }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  html body.hv2 .hv2-nav { gap: 16px; }
  html body.hv2 .hv2-nav > a, html body.hv2 .hv2-dd-btn { font-size: 14px; }
  html body.hv2 .hv2-header .hv2-account { width: 40px; padding: 0; }
}
@media (min-width: 1200px) { html body.hv2 .hv2-account-label { display: inline; } }
/* the Resources dropdown */
html body.hv2 .hv2-dd-menu { top: calc(100% + 8px); min-width: 230px; padding: 6px; background: #FFFFFF; border: 1px solid var(--v7-line); border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(11,29,74,.28); }
html body.hv2 .hv2-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* no gap to fall through on the way down */
html body.hv2 .hv2-nav .hv2-dd-menu a { padding: 11px 14px; border-radius: 10px; font: 500 14.5px/1.3 var(--v7-body); color: #26334A; border: 0; }
html body.hv2 .hv2-nav .hv2-dd-menu a:hover { background: var(--v7-bg); color: var(--v7-navy); }
/* the search form shown when the live search can't run */
html body.hv2 .hv2-search-mobile { background: transparent; border-top: 0; padding: 10px 0 0; }
html body.hv2 .hv2-search-mobile .hv2-wrap { width: min(1200px, calc(100% - 2 * var(--gutter, 16px))); max-width: none; padding: 0; }
html body.hv2 .hv2-search-mobile input { height: 48px; border: 1px solid var(--v7-field); border-radius: 12px; background: #FFFFFF; padding: 0 14px; font: 16px var(--v7-body); }
html body.hv2 .hv2-search-desktop { border: 1px solid var(--v7-field); border-radius: 12px; height: 40px; }
html body.hv2 .hv2-search-desktop input { height: 38px; font: 14px var(--v7-body); }

/* "Skip to content" (keyboard only) */
html body.hv2 .hv2-skip { background: var(--v7-navy); color: #FFFFFF; border-radius: 10px; padding: 10px 16px; font: 600 14px/1.2 var(--v7-body); }

/* ------------------------------------------------------------ the phone menu (slide-in panel) */
html body.hv2 .hv2-menu-backdrop { background: rgba(11,29,74,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html body.hv2 .hv2-menu-panel { width: min(88vw, 380px); background: #FFFFFF; border-left: 0; border-radius: 22px 0 0 22px;
  box-shadow: -24px 0 60px -20px rgba(11,29,74,.35); font-family: var(--v7-body); }
html body.hv2 .hv2-menu-head { min-height: 64px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--v7-line); }
html body.hv2 .hv2-menu-head .hv2-caps { font: 600 12px/1 var(--v7-body); letter-spacing: .18em; color: var(--v7-blue); }
html body.hv2 .hv2-menu-head .hv2-iconbtn { width: 42px; height: 42px; border-radius: 12px; background: var(--v7-bg); color: var(--v7-navy); }
html body.hv2 .hv2-menu-nav.pps-mn { padding: 8px 0 16px; }
html body.hv2 .hv2-menu-nav.pps-mn a.pps-mn-big { min-height: 56px; padding: 0 20px; font: 700 19px/1.2 var(--v7-head); letter-spacing: -.01em;
  color: var(--v7-navy); border-bottom: 1px solid var(--v7-line); }
html body.hv2 .hv2-menu-nav.pps-mn a.pps-mn-big span { color: var(--v7-blue); font-size: 18px; }
html body.hv2 .hv2-menu-nav.pps-mn a.pps-mn-big:hover { background: var(--v7-bg); }
html body.hv2 .hv2-menu-nav.pps-mn .pps-mn-h { padding: 20px 20px 10px; font: 600 12px/1 var(--v7-body); letter-spacing: .18em; color: var(--v7-mute); }
html body.hv2 .hv2-menu-nav.pps-mn .pps-mn-grid { gap: 8px; padding: 0 16px; }
html body.hv2 .hv2-menu-nav.pps-mn .pps-mn-grid a { min-height: 50px; padding: 8px 12px; border: 1px solid var(--v7-line); border-radius: 12px;
  background: var(--v7-bg); font: 600 14.5px/1.25 var(--v7-body); color: var(--v7-navy); }
html body.hv2 .hv2-menu-nav.pps-mn .pps-mn-grid a:hover, html body.hv2 .hv2-menu-nav.pps-mn .pps-mn-grid a:active { background: var(--v7-soft); border-color: #C9DDF3; }
html body.hv2 .hv2-menu-nav.pps-mn .pps-mn-acts { gap: 8px; padding: 20px 16px 4px; }
html body.hv2 .hv2-menu-nav.pps-mn a.pps-mn-btn { min-height: 48px; border: 1.5px solid #CBD5E3; border-radius: 12px; background: #FFFFFF; color: var(--v7-navy);
  font: 700 15px/1 var(--v7-head); }
html body.hv2 .hv2-menu-nav.pps-mn a.pps-mn-btn.pps-mn-cart { background: var(--v7-navy); border-color: var(--v7-navy); color: #FFFFFF; }
html body.hv2 .hv2-menu-foot { border-top: 1px solid var(--v7-line); padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; }
html body.hv2 .hv2-menu-foot a { color: var(--v7-blue-ink); font-weight: 600; }

/* ------------------------------------------------------------ the live search panel */
html body .pls .pls-back { background: rgba(11,29,74,.40); }
html body .pls .pls-panel { border: 1px solid var(--v7-line, #E3E9F2); border-radius: 20px; box-shadow: var(--v7-shadow-pop, 0 30px 70px -24px rgba(11,29,74,.45));
  font-family: var(--v7-body, inherit); color: #0E1626; }
html body .pls .pls-bar { min-height: 64px; border-bottom: 1px solid #E3E9F2; color: #0B1D4A; }
html body .pls .pls-bar:focus-within { box-shadow: inset 0 -2px 0 #2A82D4; }
html body .pls input.pls-in, html body .pls input.pls-in:focus { font-family: inherit; font-size: 17px; color: #0E1626; height: 62px; }
html body .pls .pls-x { color: #5D6B82; }
html body .pls .pls-x-k { border-color: #D6DEEA; border-radius: 8px; font-family: inherit; }
html body .pls .pls-h { font: 600 12px/1.2 var(--v7-body, inherit); letter-spacing: .16em; color: #2A82D4; }
html body .pls .pls-list { padding: 0 8px; }
html body .pls .pls-row { padding: 9px 14px; border-radius: 12px; color: #0B1D4A !important; }
html body .pls .pls-list li.is-active .pls-row, html body .pls .pls-row:hover { background: #F5F8FC; }
html body .pls .pls-row img, html body .pls .pls-noimg { border-radius: 10px; background: linear-gradient(180deg, #F2F6FB, #E6EEF8); border: 1px solid #E3E9F2; object-fit: contain; }
html body .pls .pls-t b { font: 700 15.5px/1.25 var(--v7-head, inherit); color: #0B1D4A; }
html body .pls .pls-t small { font: 500 12.5px/1.3 var(--v7-body, inherit); color: #5D6B82; }
html body .pls .pls-row.is-out .pls-t b { color: #5D6B82; }
html body .pls .pls-go { color: #9AA8BD; }
html body .pls .pls-list li.is-active .pls-go, html body .pls .pls-row:hover .pls-go { color: #2A82D4; }
html body .pls .pls-status { color: #5D6B82; }
html body .pls .pls-all { color: #1E6DB8 !important; text-decoration: none; font-family: var(--v7-head, inherit); font-weight: 700; }
html body .pls .pls-all:hover { text-decoration: underline; }
@media (max-width: 640px) {
  html body .pls .pls-panel { border: 0; border-radius: 0; }
  html body .pls .pls-list { padding: 0 4px; }
  html body .pls .pls-row { padding: 9px 12px; }
}

/* ------------------------------------------------------------ buttons: navy primary, white outline secondary */
body.hv2 .btn { min-height: 46px; padding: 0 22px; border-radius: var(--v7-r-btn); font: 700 15px/1.2 var(--v7-head); letter-spacing: 0; text-transform: none;
  background: var(--v7-navy); color: #FFFFFF; border: 1px solid var(--v7-navy); transition: background-color .15s, border-color .15s, color .15s; }
body.hv2 .btn:hover { background: var(--v7-navy-2); color: #FFFFFF; border-color: var(--v7-navy-2); }
body.hv2 .btn-secondary { background: #FFFFFF; color: var(--v7-navy); border: 1.5px solid #CBD5E3; }
body.hv2 .btn-secondary:hover { background: var(--v7-bg); color: var(--v7-navy); border-color: var(--v7-navy); }
body.hv2 .btn-sm { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
body.hv2 .btn-danger { background: #B42318; border-color: #B42318; color: #FFFFFF; }
body.hv2 .btn-danger:hover { background: #912018; border-color: #912018; }
html body.hv2 .hv2-btn { min-height: 46px; border-radius: var(--v7-r-btn); font: 700 15px/1.2 var(--v7-head); letter-spacing: 0; }
html body.hv2 .hv2-btn-line { background: #FFFFFF; color: var(--v7-navy); border: 1.5px solid #CBD5E3; }
html body.hv2 .hv2-btn-line:hover { background: var(--v7-bg); color: var(--v7-navy); border-color: var(--v7-navy); }
body.hv2:not(#v7) .btn-primary, body.hv2:not(#v7) a.btn-primary, body.hv2:not(#v7) .hv2-btn:not(.hv2-btn-line) {
  background: var(--v7-navy) !important; color: #FFFFFF !important; border-color: var(--v7-navy) !important; }
body.hv2:not(#v7) .btn-primary:hover, body.hv2:not(#v7) a.btn-primary:hover, body.hv2:not(#v7) .hv2-btn:not(.hv2-btn-line):hover {
  background: var(--v7-navy-2) !important; border-color: var(--v7-navy-2) !important; }
body.hv2:not(#v7) .btn-accent { background: var(--v7-blue) !important; color: #FFFFFF !important; border-color: var(--v7-blue) !important; }
body.hv2:not(#v7) .btn-accent:hover { background: var(--v7-blue-ink) !important; border-color: var(--v7-blue-ink) !important; }
/* a button that can't be pressed yet (e.g. until the boxes are ticked) looks it, as before (site.css greys .btn:disabled) */
body.hv2:not(#v7) .btn-primary:disabled, body.hv2:not(#v7) .btn-accent:disabled, body.hv2:not(#v7) .hv2-btn:not(.hv2-btn-line):disabled {
  background: #E3E9F2 !important; border-color: #E3E9F2 !important; color: #7A879C !important; cursor: not-allowed; box-shadow: none !important; }

/* ------------------------------------------------------------ fields: 48px, radius 12, navy focus ring */
body.hv2 .form-row input, body.hv2 .form-row textarea, body.hv2 .form-row select, body.hv2 main input[type=text], body.hv2 main input[type=email],
body.hv2 main input[type=number], body.hv2 main input[type=password], body.hv2 main input[type=tel], body.hv2 main input[type=search],
body.hv2 main input[type=url], body.hv2 main input[type=date], body.hv2 main select, body.hv2 main textarea {
  min-height: 48px; background-color: #FFFFFF; border: 1px solid var(--v7-field); border-radius: var(--v7-r-btn); color: var(--v7-ink);
  font-family: var(--v7-body); font-size: 16px; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
body.hv2 main input::placeholder, body.hv2 main textarea::placeholder { color: #8A97AB; }
body.hv2 main input:hover, body.hv2 main select:hover, body.hv2 main textarea:hover { border-color: #B9C6D8; }
body.hv2 main input:focus, body.hv2 main select:focus, body.hv2 main textarea:focus {
  outline: none; border-color: var(--v7-navy); box-shadow: 0 0 0 3px rgba(42,130,212,.20); }
body.hv2 main input[type=checkbox], body.hv2 main input[type=radio] { accent-color: var(--v7-navy); }

/* ------------------------------------------------------------ success notes written with the old accent colour (message sent, details saved,
   provider application received, review thanks): --accent is navy now, so they were navy boxes; soft blue notes instead */
body.hv2 main .alert-info[style*="var(--accent)"], body.hv2 main div[style*="background: var(--accent)"][style*="border-left"] {
  background: var(--v7-soft) !important; color: var(--v7-navy) !important; border: 1px solid #D6E4F5 !important; border-left: 3px solid var(--v7-blue) !important;
  border-radius: 12px !important; }

/* ------------------------------------------------------------ breadcrumbs: "Home / Shop / GHK-Cu" */
html body.hv2 .breadcrumbs ol { font: 500 13.5px/1.4 var(--v7-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--v7-mute) !important; gap: 6px !important; }
html body.hv2 .breadcrumbs ol a { color: var(--v7-mute) !important; }
html body.hv2 .breadcrumbs ol a:hover { color: var(--v7-navy) !important; }
html body.hv2 .breadcrumbs ol li:last-child span, html body.hv2 .breadcrumbs ol [aria-current] { color: var(--v7-navy) !important; font-weight: 700; }
html body.hv2 .breadcrumbs ol span[aria-hidden] { color: #9AA8BD; }
html body.hv2 .breadcrumbs ol li { gap: 6px; }
html body.hv2 .cpg-crumbs, html body.hv2 .od2-crumbs { font-family: var(--v7-body); letter-spacing: 0; text-transform: none; color: var(--v7-mute); }
html body.hv2 .cpg-crumbs a, html body.hv2 .od2-crumbs a { color: var(--v7-mute); }
html body.hv2 .cpg-crumbs [aria-current], html body.hv2 .od2-crumbs [aria-current] { color: var(--v7-navy); font-weight: 700; }

/* ------------------------------------------------------------ footer: navy, light link columns, fine print */
body.hv2:not(#v7) footer.hv2-footer, html body.hv2 .hv2-footer { background: var(--v7-foot) !important; color: #C5D0E4; border-top: 0; box-shadow: none !important;
  margin-top: 0; padding: 56px 0 8px; font-family: var(--v7-body); }
html body.hv2 .hv2-footer .hv2-wrap { max-width: none; width: min(1200px, calc(100% - 2 * var(--gutter, 16px))); padding-inline: 0; }
html body.hv2 .hv2-footer .hv2-footer-grid { background: transparent !important; border: 0; gap: 28px; padding-bottom: 40px; }
html body.hv2 .hv2-footer .hv2-footer-grid > div { background: transparent !important; }
html body.hv2 .hv2-footer img.pps-logo-foot { height: 46px; width: auto; margin-bottom: 18px; filter: brightness(0) invert(1); }
html body.hv2 .hv2-footer .hv2-footer-brand p { color: #9FB0CC; font-size: 14px; line-height: 1.65; margin: 0 0 6px; }
html body.hv2 .hv2-footer .hv2-footer-brand a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
html body.hv2 .hv2-footer .hv2-footer-brand a:hover { text-decoration: underline; text-underline-offset: 3px; }
html body.hv2 .hv2-footer .hv2-muted { color: #8EA0BE; font-size: 13px; }
html body.hv2 .hv2-footer .hv2-footer-col h2, html body.hv2 .hv2-footer .hv2-footer-col h3 { margin: 0 0 14px; font: 600 12px/1.3 var(--v7-body) !important;
  letter-spacing: .18em !important; text-transform: uppercase !important; color: #7F93B6 !important; }
html body.hv2 .hv2-footer .hv2-footer-col a { color: #D5DEEE !important; font-size: 14px; line-height: 1.4; padding: 7px 0; text-decoration: none; }
html body.hv2 .hv2-footer .hv2-footer-col a:hover { color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 3px; }
html body.hv2 .hv2-footer .hv2-footer-bottom { border-top: 1px solid rgba(255,255,255,.09); margin-top: 0; padding: 22px 0 6px; gap: 6px 24px;
  justify-content: space-between; font-size: 13px; color: #9FB0CC; }
html body.hv2 .hv2-footer .hv2-footer-bottom .hv2-caps { font: 600 12px/1.4 var(--v7-body); letter-spacing: .16em; color: #7F93B6; flex-basis: 100%; }
html body.hv2 .hv2-footer .pps-ruo-foot { padding-top: 8px; padding-bottom: 28px; }
/* while the "Get 10% off" corner card is on, keep the room it needs at the end of the page (the base template's own rule;
   the line above out-ranked it, so the card sat on the last footer link) */
html.pps-oc-on body.hv2 .hv2-footer .pps-ruo-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
html body.hv2 .hv2-footer .pps-ruo-foot p { max-width: none; font-size: 12px; line-height: 1.65; color: #7F93B6; opacity: 1; }
html body.hv2 .hv2-footer .pps-ruo-foot a { color: #C5D0E4; }
html body.hv2 .hv2-footer :focus-visible { outline: 2px solid var(--v7-sky); outline-offset: 2px; }
@media (min-width: 1024px) {
  html body.hv2 .hv2-footer .hv2-footer-grid { grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px; }
  html body.hv2 .hv2-footer .hv2-footer-brand { padding-right: 16px; }
}
@media (min-width: 761px) and (max-width: 1023.98px) {
  html body.hv2 .hv2-footer .hv2-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
  html body.hv2 .hv2-footer .hv2-footer-grid > div, html body.hv2 .hv2-footer .hv2-footer-grid > div:nth-child(n) { padding: 0; }
  html body.hv2 .hv2-footer .hv2-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  html body.hv2 .hv2-footer { padding-top: 40px; }
  html body.hv2 .hv2-footer .hv2-footer-grid { padding-bottom: 20px; }
  html body.hv2 .hv2-footer .hv2-footer-brand { padding-bottom: 22px !important; }
  html body.hv2 .hv2-footer .pps-fold-h { min-height: 52px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.09); font: 600 15px/1.3 var(--v7-body) !important;
    letter-spacing: 0 !important; text-transform: none !important; color: #FFFFFF; }
  html body.hv2 .hv2-footer .pps-fold-h::after { color: var(--v7-sky); opacity: 1; }
  html body.hv2 .hv2-footer .pps-fold-b { padding-bottom: 12px; }
  html body.hv2 .hv2-footer .hv2-footer-col a { padding: 11px 0; }
  html body.hv2 .hv2-footer .hv2-footer-bottom { flex-direction: column; }
}

/* ------------------------------------------------------------ the 21+ box */
html body #age-gate { --agl-acc: #2A82D4; }
html body #age-gate .age-gate-backdrop { background: linear-gradient(180deg, rgba(11,29,74,.20), rgba(11,29,74,.50)); }
html body #age-gate .age-gate-card { max-width: 452px; padding: 32px 32px 22px; border-radius: 24px; border: 1px solid #E3E9F2; color: #0E1626;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; box-shadow: 0 40px 90px -30px rgba(11,29,74,.55), 0 12px 30px -16px rgba(11,29,74,.25); }
html body #age-gate .age-gate-card > img { height: 50px !important; margin: 0 0 24px !important; }
html body #age-gate .age-gate-card .agl-kicker { font: 600 12px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .16em; color: #0B1D4A; }
html body #age-gate .agl-dot { background: #2A82D4; box-shadow: 0 0 0 4px rgba(42,130,212,.16); }
html body #age-gate .age-gate-card h2 { margin: 0 0 12px; font-family: "Manrope", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 34px; line-height: 1.08;
  letter-spacing: -.02em !important; text-transform: none !important; color: #0B1D4A; }
html body #age-gate .agl-sub { margin-top: 4px; font-weight: 700; font-size: .66em; line-height: 1.15; color: #2A82D4; }
html body #age-gate .age-gate-card p { font-size: 15px; color: #5D6B82; }
html body #age-gate .age-gate-card p strong { color: #0E1626; }
html body #age-gate .age-gate-card .age-gate-disclaimer { border-radius: 14px; background: #EAF2FB; border: 1px solid #D6E4F5;
  font: 500 13.5px/1.45 "Inter", system-ui, sans-serif !important; color: #26334A !important; }
html body #age-gate .age-gate-disclaimer::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A82D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 18.5A2 2 0 0 0 6.2 21.5h11.6a2 2 0 0 0 1.7-3L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E"); }
html body #age-gate #age-confirm { min-height: 52px; border-radius: 12px; background: #0B1D4A; font: 700 16px/1.25 "Manrope", "Inter", system-ui, sans-serif;
  letter-spacing: 0; box-shadow: 0 12px 24px -14px rgba(11,29,74,.8); }
html body #age-gate #age-confirm:hover { background: #13296A; }
html body #age-gate #age-deny { min-height: 46px; border-radius: 12px; color: #5D6B82; font: 500 14.5px/1.2 "Inter", system-ui, sans-serif; text-decoration-color: rgba(93,107,130,.45); }
html body #age-gate #age-deny:hover { color: #0B1D4A; }
html body #age-gate button:focus-visible, html body #age-gate a:focus-visible { outline: 2px solid rgba(11,29,74,.30); outline-offset: 3px; }
html.agl-kb body #age-gate button:focus-visible, html.agl-kb body #age-gate a:focus-visible { outline: 3px solid #2A82D4; outline-offset: 3px; }
html body #age-gate .age-gate-card .age-gate-fineprint { border-top-color: #E3E9F2; font-size: 12.5px !important; color: #5D6B82 !important; }
html body #age-gate .age-gate-fineprint a { color: #0B1D4A !important; }
@media (max-width: 600px) {
  html body #age-gate .age-gate-card { padding: 24px 22px 14px; border-radius: 22px; }
  html body #age-gate .age-gate-card > img { height: 44px !important; margin-bottom: 20px !important; }
  html body #age-gate .age-gate-card h2 { font-size: 30px; }
}

/* ------------------------------------------------------------ the 10% off pop-up */
html body:not(#v7) #pps-email-capture-modal { --pec-acc: #2A82D4; }
html body #pps-email-capture-modal { background: rgba(11,29,74,.45) !important; }
html body #pps-email-capture-modal .pps-ec-card { border: 1px solid #E3E9F2 !important; border-radius: 24px !important; color: #0E1626;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; box-shadow: 0 40px 90px -30px rgba(11,29,74,.55), 0 12px 30px -16px rgba(11,29,74,.25) !important; }
html body #pps-email-capture-modal #pps-ec-close { width: 40px; height: 40px; color: #5D6B82 !important; background: #F5F8FC !important; }
html body #pps-email-capture-modal #pps-ec-close:hover { background: #EAF2FB !important; color: #0B1D4A !important; }
html body #pps-email-capture-modal .pps-ec-eyebrow { color: #0B1D4A !important; font: 600 12px/1.2 "Inter", system-ui, sans-serif !important; letter-spacing: .16em !important; }
html body #pps-email-capture-modal .pps-ec-title { font-family: "Manrope", "Inter", system-ui, sans-serif !important; font-weight: 800 !important; font-size: 32px !important;
  line-height: 1.1 !important; letter-spacing: -.02em !important; text-transform: none !important; color: #0B1D4A !important; }
html body #pps-email-capture-modal .pps-ec-title em { color: #2A82D4 !important; }
html body #pps-email-capture-modal .pps-ec-lead, html body #pps-email-capture-modal .pps-ec-lead-s, html body #pps-email-capture-modal #pps-ec-success-text { color: #5D6B82 !important; }
html body #pps-email-capture-modal #pps-ec-email, html body #pps-email-capture-modal #pps-ec-phone { min-height: 50px; border: 1px solid #D6DEEA !important; border-radius: 12px !important;
  color: #0E1626 !important; font-family: "Inter", system-ui, sans-serif !important; }
html body #pps-email-capture-modal #pps-ec-email:focus, html body #pps-email-capture-modal #pps-ec-phone:focus { border-color: #0B1D4A !important; box-shadow: 0 0 0 3px rgba(42,130,212,.20); }
html body #pps-email-capture-modal #pps-ec-submit, html body #pps-email-capture-modal #pps-ec-done { min-height: 52px; border-radius: 12px !important; background: #0B1D4A !important;
  font: 700 16px/1.2 "Manrope", "Inter", system-ui, sans-serif !important; letter-spacing: 0 !important; }
html body #pps-email-capture-modal #pps-ec-submit:hover, html body #pps-email-capture-modal #pps-ec-done:hover { background: #13296A !important; }
html body #pps-email-capture-modal .pps-ec-sms, html body #pps-email-capture-modal .pps-ec-fine { color: #5D6B82 !important; }
html body #pps-email-capture-modal .pps-ec-sms input { accent-color: #0B1D4A; }
html body #pps-email-capture-modal .pps-ec-success-icon { background: #0B1D4A; box-shadow: 0 0 0 6px rgba(42,130,212,.18); }
html body #pps-email-capture-modal button:focus-visible, html body #pps-email-capture-modal a:focus-visible { outline-color: #2A82D4; }
html body #pps-ec-resend-btn { border-radius: 12px; border-color: #0B1D4A; color: #0B1D4A; font-family: "Inter", system-ui, sans-serif; }
html body #pps-ec-resend-btn:disabled { border-color: #D6DEEA; color: #8A97AB; }
/* short screens (a phone turned sideways): the centred card scrolls inside instead of running off the top (its close x) and bottom */
@media (min-width: 768px) and (max-height: 600px) {
  html body #pps-email-capture-modal .pps-ec-card { max-height: calc(100vh - 32px) !important; max-height: calc(100dvh - 32px) !important; overflow-y: auto !important; }
}
@media (max-width: 767px) {
  html body #pps-email-capture-modal .pps-ec-card { border-radius: 22px 22px 0 0 !important; border-width: 1px 0 0 !important; }
  html body #pps-email-capture-modal .pps-ec-title { font-size: 23px !important; padding-right: 44px; }
  html body #pps-email-capture-modal #pps-ec-email, html body #pps-email-capture-modal #pps-ec-phone { min-height: 46px; }
  html body #pps-email-capture-modal #pps-ec-submit { min-height: 46px; }
}
@media (max-width: 380px) { html body #pps-email-capture-modal .pps-ec-title { font-size: 21px !important; } }

/* ------------------------------------------------------------ the corner "Get 10% off" card */
html body:not(#v7) .pps-oc { --oc-acc: #2A82D4; }
html body .pps-oc { border: 1px solid #E3E9F2; border-radius: 16px; color: #0E1626; box-shadow: 0 18px 40px -16px rgba(11,29,74,.40), 0 3px 10px rgba(11,29,74,.08);
  font-family: "Inter", system-ui, sans-serif; }
html body .pps-oc .pps-oc-pct { background: #0B1D4A; font: 800 17px/1 "Manrope", "Inter", system-ui, sans-serif; box-shadow: 0 0 0 4px rgba(42,130,212,.18); }
html body .pps-oc .pps-oc-t { font: 800 17px/1.1 "Manrope", "Inter", system-ui, sans-serif !important; letter-spacing: -.01em !important; text-transform: none !important; color: #0B1D4A; }
html body .pps-oc .pps-oc-t em { color: #2A82D4; }
html body .pps-oc .pps-oc-s { font-family: "Inter", system-ui, sans-serif; color: #5D6B82; }
html body .pps-oc .pps-oc-x { width: 40px !important; height: 40px !important; margin-right: 4px !important; border-radius: 12px; color: #5D6B82; }
html body .pps-oc .pps-oc-x:hover { background: #F5F8FC; color: #0B1D4A; }
html body .pps-oc button:focus-visible { outline-color: #2A82D4; }
@media (min-width: 768px) { html body .pps-oc { border-radius: 18px; } html body .pps-oc .pps-oc-t { font-size: 18px !important; } }

/* ------------------------------------------------------------ the ad-cookie bar (shown only when the store asks with a bar) */
html body #pps-adc { background: #FFFFFF; color: #26334A; border: 1px solid #E3E9F2; border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 24px 50px -18px rgba(11,29,74,.40), 0 3px 10px rgba(11,29,74,.08); font: 400 13.5px/1.5 "Inter", system-ui, sans-serif; }
html body #pps-adc a { color: #1E6DB8; font-weight: 600; }
html body #pps-adc button { border-radius: 12px; min-height: 44px; font: 700 15px/1 "Manrope", "Inter", system-ui, sans-serif; }
html body #pps-adc button.y { background: #0B1D4A; border-color: #0B1D4A; color: #FFFFFF; }
html body #pps-adc button.n { background: #FFFFFF; border-color: #CBD5E3; color: #0B1D4A; }
html body #pps-adc button:focus-visible, html body #pps-adc a:focus-visible { outline-color: #2A82D4; }