/* =============================================================================
   Pepvela brand system (2026-10-11, Pepvela refocus).
   Pepvela = peptide research brand. Pep Research = its research products.

   ONE file for every pepvela.com page (the Pepvela pages and Pep Research,
   which pepvela.com serves itself since the final consolidation, 2026-10-11).

   It holds the design tokens, the self-hosted typeface and every component the
   two surfaces share: the header, the mobile menu, the footer, the research
   updates form, buttons, badges, the trust strip, the vial stage and the
   product card. Classes use the pvb- prefix so they never collide with either
   surface's own page styles.

   Direction (CEO, 2026-10-11): white and very light surfaces, deep navy type,
   restrained indigo / blue accents, generous whitespace, Plus Jakarta Sans
   everywhere (the Georgia wordmark is the only serif). Light theme only. No
   heavy motion: hover lifts and colour changes, nothing that loops.

   Contrast (WCAG 2.x, measured): navy on white 17.5:1, white on navy 17.5:1,
   indigo on white 6.95:1 and on the tint 6.2:1, muted text on white 5.6:1.
   --brand-blue is decorative (icons, vial accents, focus rings), never small
   text on white (4.4:1).
   ============================================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* 1. Brand colours. Change only with a new CEO decision. */
  --brand-navy: #0B1640;                       /* headings, primary buttons, wordmark "pep" */
  --brand-navy-2: #16245E;                     /* primary hover, deep bands */
  --brand-indigo: #3A4BC8;                     /* links, active marks, wordmark "vela" */
  --brand-blue: #5B6EE0;                       /* decorative accent only */
  --brand-tint: #EEF1FC;                       /* soft indigo wash: badges, icon wells */
  --brand-tint-2: #DFE4F8;                     /* tinted borders */
  --brand-surface: #F6F8FC;                    /* alternate sections, image wells */
  --brand-white: #FFFFFF;                      /* page, cards, header */

  /* 2. Roles */
  --brand-bg: var(--brand-white);
  --brand-ink: var(--brand-navy);
  --brand-ink-2: rgba(11, 22, 64, 0.80);       /* secondary text */
  --brand-muted: rgba(11, 22, 64, 0.64);       /* 5.6:1 on white */
  --brand-line: rgba(11, 22, 64, 0.09);
  --brand-line-strong: rgba(11, 22, 64, 0.17);
  --brand-link: var(--brand-indigo);
  --brand-focus: var(--brand-blue);
  --brand-success: #1D7A5C;                    /* "In stock" only */
  --brand-error: #B42318;                      /* form errors, out of stock */
  --brand-on-dark: #FFFFFF;
  --brand-on-dark-2: rgba(255, 255, 255, 0.74);
  --brand-line-dark: rgba(255, 255, 255, 0.14);

  /* 3. Depth */
  --brand-shadow: 0 1px 2px rgba(11, 22, 64, 0.04), 0 10px 28px -16px rgba(11, 22, 64, 0.18);
  --brand-shadow-lift: 0 2px 6px rgba(11, 22, 64, 0.05), 0 22px 44px -22px rgba(11, 22, 64, 0.26);
  --brand-hero-wash: radial-gradient(60% 80% at 82% 30%, rgba(91, 110, 224, 0.14), transparent 70%), radial-gradient(50% 60% at 8% 0%, rgba(223, 228, 248, 0.9), transparent 70%), linear-gradient(180deg, #F3F6FD 0%, #FFFFFF 100%);
  --brand-band: radial-gradient(70% 120% at 85% 10%, rgba(91, 110, 224, 0.32), transparent 65%), linear-gradient(135deg, #0B1640 0%, #16245E 100%);

  /* 4. Type */
  --brand-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand-font-wordmark: Georgia, "Times New Roman", Times, serif;   /* the wordmark only */

  /* 5. Shape and space */
  --brand-radius-sm: 8px;
  --brand-radius: 12px;
  --brand-radius-lg: 18px;
  --brand-radius-pill: 999px;
  --brand-wrap: 1200px;
  --brand-gutter: clamp(16px, 4vw, 32px);
  --brand-header-h: 72px;
  --brand-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------- utilities -- */
.pvb-wrap { width: 100%; max-width: var(--brand-wrap); margin: 0 auto; padding-inline: var(--brand-gutter); box-sizing: border-box; }
.pvb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pvb-skip { position: absolute; left: 12px; top: -48px; z-index: 1000; padding: 10px 14px; border-radius: var(--brand-radius-sm); background: var(--brand-navy); color: #fff !important; font: 650 14px/1 var(--brand-font); text-decoration: none; transition: top 0.2s; }
.pvb-skip:focus { top: 12px; }

/* -------------------------------------------------------------- wordmark -- */
.pvb-brand { display: inline-flex; align-items: baseline; flex: none; padding: 6px 0; text-decoration: none; border-radius: var(--brand-radius-sm); }
.pvb-wordmark { font-family: var(--brand-font-wordmark); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.01em; }
.pvb-wordmark .w-pep { color: var(--brand-navy); }
.pvb-wordmark .w-vela { color: var(--brand-indigo); }
.pvb-band .pvb-wordmark .w-pep, .pvb-on-dark .pvb-wordmark .w-pep { color: #fff; }
.pvb-band .pvb-wordmark .w-vela, .pvb-on-dark .pvb-wordmark .w-vela { color: #AEB9F2; }

/* --------------------------------------------------------------- buttons -- */
.pvb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--brand-radius-sm); border: 1px solid transparent; font: 650 15px/1 var(--brand-font); letter-spacing: 0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; }
.pvb-btn--primary { background: var(--brand-navy); color: #fff !important; box-shadow: 0 10px 22px -12px rgba(11, 22, 64, 0.55); }
.pvb-btn--primary:hover { background: var(--brand-navy-2); }
.pvb-btn--secondary { background: var(--brand-white); color: var(--brand-navy) !important; border-color: var(--brand-line-strong); }
.pvb-btn--secondary:hover { border-color: var(--brand-indigo); color: var(--brand-indigo) !important; }
.pvb-btn--light { background: #fff; color: var(--brand-navy) !important; }
.pvb-btn--light:hover { background: var(--brand-tint); }
.pvb-btn--outline-light { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, 0.5); }
.pvb-btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.pvb-btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.pvb-btn[disabled], .pvb-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.pvb-btn .pvb-arrow { transition: transform 0.2s var(--brand-ease); }
.pvb-btn:hover .pvb-arrow { transform: translateX(3px); }
.pvb-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-indigo); font: 650 14.5px/1.3 var(--brand-font); text-decoration: none; }
.pvb-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- badges -- */
.pvb-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font: 700 12px/1.4 var(--brand-font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-indigo); }
.pvb-eyebrow .pvb-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.pvb-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--brand-radius-pill); background: var(--brand-tint); color: var(--brand-indigo); font: 700 11.5px/1.3 var(--brand-font); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.pvb-badge--quiet { background: var(--brand-surface); color: var(--brand-ink-2); }
.pvb-stock { display: inline-flex; align-items: center; gap: 7px; font: 650 13px/1.3 var(--brand-font); color: var(--brand-success); }
.pvb-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pvb-stock--out { color: var(--brand-error); }
.pvb-stock[hidden] { display: none; }

/* ---------------------------------------------------------------- header -- */
.pvb-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--brand-line); font-family: var(--brand-font); }
.pvb-header__bar { display: flex; align-items: center; gap: 28px; min-height: var(--brand-header-h); }
.pvb-nav { flex: 1; display: flex; justify-content: center; }
.pvb-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pvb-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--brand-radius-sm); color: var(--brand-ink-2); font-size: 15px; font-weight: 600; text-decoration: none; transition: color 0.2s, background-color 0.2s; }
.pvb-nav a:hover { color: var(--brand-navy); background: var(--brand-surface); }
.pvb-nav a[aria-current="page"] { color: var(--brand-navy); box-shadow: inset 0 -2px 0 var(--brand-indigo); border-radius: 0; }
.pvb-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pvb-account { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--brand-radius-sm); color: var(--brand-ink-2); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pvb-account:hover { color: var(--brand-navy); background: var(--brand-surface); }
.pvb-account[aria-current="page"] { color: var(--brand-navy); }
.pvb-account svg, .pvb-cart svg, .pvb-menu-btn svg { width: 20px; height: 20px; flex: none; }
.pvb-cart { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--brand-radius-sm); color: var(--brand-navy); text-decoration: none; }
.pvb-cart:hover { background: var(--brand-surface); }
.pvb-cart__count { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--brand-indigo); color: #fff; font: 700 11px/20px var(--brand-font); text-align: center; box-shadow: 0 0 0 2px #fff; }
.pvb-cart[data-count="0"] .pvb-cart__count, .pvb-cart:not([data-count]) .pvb-cart__count { display: none; }
.pvb-menu-btn { display: none; place-items: center; width: 44px; height: 44px; border-radius: var(--brand-radius-sm); border: 1px solid var(--brand-line); background: #fff; color: var(--brand-navy); cursor: pointer; }
.pvb-menu-btn .i-close { display: none; }
.pvb-menu-btn[aria-expanded="true"] .i-close { display: block; }
.pvb-menu-btn[aria-expanded="true"] .i-menu { display: none; }
.pvb-mobile-nav { display: none; }
@media (max-width: 900px) {
  .pvb-nav { display: none; }
  .pvb-account .pvb-account__label { display: none; }
  .pvb-account { width: 44px; justify-content: center; padding: 0; }
  .pvb-menu-btn { display: inline-grid; }
  .pvb-mobile-nav { border-top: 1px solid var(--brand-line); background: #fff; }
  .pvb-mobile-nav[data-open="true"] { display: block; }
  .pvb-mobile-nav ul { list-style: none; margin: 0; padding: 6px 0 14px; }
  .pvb-mobile-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 2px; border-bottom: 1px solid var(--brand-line); color: var(--brand-navy); font: 650 17px/1.2 var(--brand-font); text-decoration: none; }
  .pvb-mobile-nav li:last-child a { border-bottom: 0; }
  .pvb-mobile-nav a[aria-current="page"] { color: var(--brand-indigo); }
}

/* ----------------------------------------------------------------- trust -- */
.pvb-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px 28px; margin: 0; padding: 0; list-style: none; }
.pvb-trust li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.pvb-trust__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-indigo); }
.pvb-trust__icon svg { width: 21px; height: 21px; }
.pvb-trust strong { display: block; font: 700 14.5px/1.3 var(--brand-font); color: var(--brand-navy); }
.pvb-trust span { display: block; font: 500 13px/1.4 var(--brand-font); color: var(--brand-muted); }

/* ------------------------------------------------------------ vial stage -- */
/* A product image sits on a soft, light well. Images are transparent WebP
   vials (images/vials/<slug>.webp), so the well is the only background. */
.pvb-vial { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--brand-radius); background: radial-gradient(70% 55% at 50% 38%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #F3F6FD 0%, #E9EEFA 100%); }
.pvb-vial::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 5%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(11, 22, 64, 0.20), rgba(11, 22, 64, 0)); }
.pvb-vial img { position: absolute; z-index: 1; left: 50%; bottom: 8%; display: block; width: auto; height: 84%; max-width: 90%; transform: translateX(-50%); object-fit: contain; }

/* ---------------------------------------------------------- product card -- */
.pvb-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1080px) { .pvb-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pvb-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.pvb-product { position: relative; display: flex; flex-direction: column; border-radius: var(--brand-radius); border: 1px solid var(--brand-line); background: #fff; box-shadow: var(--brand-shadow); overflow: hidden; transition: border-color 0.2s, box-shadow 0.25s var(--brand-ease); font-family: var(--brand-font); }
.pvb-product:hover { border-color: var(--brand-tint-2); box-shadow: var(--brand-shadow-lift); }
.pvb-product .pvb-vial { border-radius: 0; aspect-ratio: 1 / 1; }
.pvb-product__body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.pvb-product__name { margin: 0; font: 700 16px/1.3 var(--brand-font); color: var(--brand-navy); letter-spacing: -0.01em; }
.pvb-product__name a { color: inherit; text-decoration: none; }
.pvb-product__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pvb-product__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pvb-product__price { font: 650 14.5px/1.3 var(--brand-font); color: var(--brand-ink-2); font-variant-numeric: tabular-nums; }
.pvb-product__add { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--brand-radius-sm); border: 0; background: var(--brand-navy); color: #fff; cursor: pointer; text-decoration: none; }
.pvb-product__add:hover { background: var(--brand-navy-2); }
.pvb-product__add svg { width: 18px; height: 18px; }
.pvb-product__strength { font: 600 12.5px/1.3 var(--brand-font); color: var(--brand-muted); }
@media (max-width: 480px) { .pvb-product__body { padding: 12px; } .pvb-product__name { font-size: 15px; } }

/* ------------------------------------------------------------------ band -- */
.pvb-band { position: relative; overflow: hidden; border-radius: var(--brand-radius-lg); background: var(--brand-band); color: var(--brand-on-dark); padding: clamp(32px, 5vw, 56px); font-family: var(--brand-font); }
.pvb-band h2 { color: #fff; margin: 0; }
.pvb-band p { color: var(--brand-on-dark-2); }
.pvb-band .pvb-eyebrow { color: #AEB9F2; }

/* ---------------------------------------------------------------- footer -- */
.pvb-footer { margin-top: clamp(40px, 6vw, 80px); background: var(--brand-surface); border-top: 1px solid var(--brand-line); font-family: var(--brand-font); color: var(--brand-ink-2); }
.pvb-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 0.8fr)) 1.6fr; gap: 36px 28px; padding-block: 56px 36px; }
.pvb-footer__brand p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--brand-muted); max-width: 30ch; }
.pvb-footer h2 { margin: 0 0 14px; font: 700 12px/1.3 var(--brand-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-navy); }
.pvb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pvb-footer ul a { color: var(--brand-ink-2); font-size: 14.5px; text-decoration: none; }
.pvb-footer ul a:hover { color: var(--brand-indigo); text-decoration: underline; text-underline-offset: 3px; }
.pvb-news p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--brand-muted); }
.pvb-news form { display: flex; gap: 8px; }
.pvb-news input[type="email"] { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: var(--brand-radius-sm); border: 1px solid var(--brand-line-strong); background: #fff; color: var(--brand-navy); font: 500 15px/1 var(--brand-font); }
.pvb-news input[type="email"]:focus { outline: none; border-color: var(--brand-indigo); box-shadow: 0 0 0 3px var(--brand-tint); }
.pvb-news .pvb-btn { min-height: 46px; flex: none; }
.pvb-news__msg { margin-top: 10px; min-height: 1.4em; font-size: 13.5px; color: var(--brand-ink-2); }
.pvb-news__msg.is-error { color: var(--brand-error); }
.pvb-footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; padding-block: 20px 28px; border-top: 1px solid var(--brand-line); font-size: 13px; color: var(--brand-muted); }
.pvb-footer__bottom p { margin: 0; }
.pvb-footer__bottom a { color: var(--brand-muted); }
.pvb-footer__legal { max-width: 74ch; }
@media (max-width: 1080px) { .pvb-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pvb-footer__brand, .pvb-news { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pvb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; } .pvb-news form { flex-direction: column; } .pvb-news .pvb-btn { width: 100%; } }

/* -------------------------------------------------------------- focus ---- */
.pvb-header :focus-visible, .pvb-footer :focus-visible, .pvb-btn:focus-visible, .pvb-product :focus-visible, .pvb-link:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pvb-btn, .pvb-btn .pvb-arrow, .pvb-product, .pvb-nav a { transition: none !important; }
  .pvb-btn:hover .pvb-arrow { transform: none; }
}